Learn about JavaScript Design Patterns (Agent mode) _javascript tips

Agent mode is to provide a substitute or placeholder for an object to control access to it
The use of proxy mode (personal understanding): In order to protect the single responsibility of the current object (relative independence), it is necessary to create another object to handle some of the logic before the current object is invoked to improve the efficiency of the Code, State judgment, and so on.
The most commonly used in Agent mode is the virtual agent and the caching agent

A, virtual agent
A virtual proxy is a way to create an execution by deferring some expensive objects until they really need it.
Example: virtual agent implements picture preload

Picture load function
var myimage = (function () {
  var imgnode = document.createelement ("img");
  Document.body.appendChild (Imgnode);

  return {
    setsrc:function (src) {
      imgnode.src = src;
    }
  }
) ();

Introduce proxy object
var proxyimage = (function () {
  var img = new Image;
  Img.onload = function () {
    //Picture loading complete, formally loading picture
    myimage.setsrc (THIS.SRC);
  return {
    setsrc:function (src) {
      //Picture not loaded, load a hint picture
      myimage.setsrc ("File://c:/loading.png");
      IMG.SRC = src;
    }
  }
) ();

Invoke the proxy object to load
the picture proxyimage.setsrc ("yun_qi_img/qq.jpg");

Example: Virtual agent merging HTTP requests
Assuming that a feature requires frequent network requests, this can cause considerable overhead, and the solution is to collect requests for a period of time through an agent function and send them to the server at once.
For example: To do a file synchronization function, when we select a file, synchronized to another standby server

File sync function
var synchronousfile = function (id) {
  console.log ("Start synchronizing file, ID:" + ID);
}
Use agent merge request
var proxysynchronousfile = (function () {
  var cache = [],///Save the ID timer that needs to be synchronized for a period of time
    ;//timer pointer

  re Turn function (ID) {
    cache[cache.length] = ID;
    if (timer) {return
      ;
    }

    Timer = settimeout (function () {
      proxysynchronousfile (Cache.join (","));//2s send to the ontology a collection of IDs to be synchronized
      cleartimeout ( timer); Empty timer
      = null;
      cache = []; Clear-Sky timer
    },2000);
  }
();

Binding point Click event
var checkbox = document.getelementsbytagname ("input");

for (Var i= 0, C; c = checkbox[i++];) {
  C.onclick = function () {
    if (this.checked = = True) {
      //file synchronization using proxy
      proxysynchronousfile (this.id );
    }
  }
}

Second, the caching agent
Cache proxy can provide temporary storage for some of the overhead operations, and can return the previous result of the operation if the passed in parameter is consistent with the previous operation.
Example: Create a caching proxy for multiplication, addition, etc.

 the product var mult = function () {var a = 1;
  for (var i = 0, L = arguments.length i < l; i++) {a = a * arguments[i];
return A;
};
  Compute Plus and var plus = function () {var a = 0;
  for (var i = 0, L = arguments.length i < l; i++) {A + = Arguments[i];
return A;
}; Create cache proxy factory var createproxyfactory = function (fn) {var cache = {};//cache-store parameters and computed value return function () {var ar
    GS = Array.prototype.join.call (arguments, "-");
      if (args in cache) {//whether the parameters of access are computed Console.log ("Use cache proxy");
    return Cache[args];
  return Cache[args] = fn.apply (this, arguments);
}
};

Create agent var Proxymult = createproxyfactory (mult), Proxyplus = Createproxyfactory (plus); Console.log (Proxymult (1, 2, 3, 4)); Output: Console.log (Proxymult (1, 2, 3, 4)); Output: Cache proxy Console.log (Proxyplus (1, 2, 3, 4)); Output: Console.log (Proxyplus (1, 2, 3, 4)); Output: Cache agent Ten 

The above three examples give you a detailed description of JavaScript agent mode, I hope to help you learn.