How to Learn the JavaScript design pattern: proxy pattern _ javascript skills

This article mainly introduces the status mode in the JavaScript design mode. If you are interested in the JavaScript design mode, refer to it.

• Stars all have brokers as agents. If you ask a celebrity to perform a business presentation, they can only contact their agent. The agent will discuss the details and remuneration of the presentation, and then hand over the contract to the celebrity for signing.

I. Definition

Proxy mode:Provides a substitute or placeholder for an object to control its access.
Proxies are divided:Protection proxy and virtual proxy
Protection Proxy:It is used to control the access of objects with different permissions to the target object. In JavaScript, it is difficult to determine who has accessed an object, so it is difficult to implement proxy protection.

Ii. image pre-loading (the most common virtual proxy application scenario)

Image pre-loading is a common technique. If you directly set the src attribute for an img label node, the image location may be blank due to the image size or poor network performance. A common practice is to use a loading image to occupy a space in advance, and then load the image asynchronously. After the image is loaded, fill it in the img node.
Implementation principle:
Create an Image object: var a = new Image ();
Define the Image object src: a. src = “xxx.gif ";
This is equivalent to caching an image for the browser.

You can use the complete attribute of the Image object to check whether the Image is loaded. Each Image object has a complete attribute. When the Image is being loaded, the attribute value is false. When any event in onload, onerror, and onabort occurs, the image loading process ends. The complete attribute is true.

(1) Non-proxy implementation

var myImage = (function() {  var imgNode = document.createElement("img");  document.body.appendChild(imgNode);  var img = new Image();  img.onload = function() {    imgNode.src = img.src;  };  return {    setSrc: function(src) {      imgNode.src = "./images/loading.gif";      img.src = src;    }  }})();myImage.setSrc("./images/originImg.png");

(2) proxy implementation

// Create Image DOMvar myImage = (function () {var imgNode = document. createElement ("img"); document. body. appendChild (imgNode); return {setSrc: function (src) {imgNode. src = src ;};}) (); // proxy var proxyImage = (function () {var img = new Image (); img. onload = function () {myImage. setSrc (this. src); // this points to img! After img is loaded. src passed to myImage}; return {setSrc: function (src) {myImage. setSrc (". /images/loading.gif "); // loading img. src = src ;};}) (); proxyImage. setSrc (". /images/originImg.png ");

Benefits of using the proxy mode: enables a single function to implement the "single Responsibility Principle" of Object design "!

Iii. file synchronization

Assume that we are working on a file synchronization function. When checkbox is selected, the corresponding file will be synchronized to another server.

    File 1File 2File 3File 4File 5File 6

If a checkbox is not selected, it will be synchronized once, which is obviously not reasonable. In web development, the biggest overhead is network requests.
Solution:A proxy function is used to collect requests within a period of time and send them to the server at one time.

Var synchronousFile = function (id) {console. log ("START file synchronization, id:" + id) ;}; var proxySynchonousFile = (function () {var cache = [], // Save the id timer of the file to be synchronized this time; // timer return function (id) {cache. push (id); if (timer) {// do not overwrite the started scheduled return;} timer = setTimeout (function () {synchronousFile (cache. join (","); clearTimeout (timer); timer = null; cache. length = 0; // clear cache}, 2000) ;}) (); var checkboxs = document. getElementsByTagName ("input"); for (var I = 0, c; c = checkboxs [I]; I ++) {c. onclick = function () {if (this. checked = true) {proxySynchonousFile (this. id );}}}

Iv. cache proxy-product of computing (same sequence)

Var mult = function () {var result = 1; for (var I = 0, l = arguments. length; I <l; I ++) {result = result * arguments [I];} return result ;}; var proxyMult = (function () {var cache = {}; // {"1, 2, 3": 6} return function () {var args = Array. prototype. join. call (arguments, ","); if (args in cache) {return cache [args];} return cache [args] = mult. apply (this, arguments) ;}}) (); console. log (proxyMult (1, 2, 3); // Transformation: var proxyFactory = function (fn) {var cache ={}; return function () {var args = Array. prototype. join. call (arguments, ","); if (args in cache) {return cache [args];} return cache [args] = fn. apply (this, arguments) ;}}; console. log (proxyFactory (mult) (1, 2, 3 ));

I hope this article will help you learn about javascript programming.