Learning JavaScript design pattern (proxy pattern) _ javascript skills

This article focuses on the proxy mode and detailed analysis of the proxy mode, if you are interested, refer to the proxy mode to provide a substitute or placeholder for an object to control access to it.
Proxy mode (personal understanding): to ensure the single responsibility (relative independence) of the current object ), you need to create another object to process some logic before calling the current object to improve code efficiency and State judgment.
The most common proxy mode is Virtual ProxyAnd Cache proxy

1. Virtual Proxy
A virtual proxy is used to create and execute objects with high overhead and delay until they are actually needed.
Example:Virtual Proxy for image pre-loading

// Image loading function var myImage = (function () {var imgNode = document. createElement ("img"); document. body. appendChild (imgNode); return {setSrc: function (src) {imgNode. src = src ;}}) (); // introduce the proxy object var proxyImage = (function () {var img = new Image; img. onload = function () {// The image is loaded, and the image myImage is officially loaded. setSrc (this. src) ;}; return {setSrc: function (src) {// when the image is not loaded, load a prompt Image myImage. setSrc ("file: // c:/loading.png"); img. src = src ;}}) (); // call the proxy object to load the image proxyImage. setSrc ("http: // images/qq.jpg ");

Example:Merge HTTP requests with virtual proxy
Assuming that a function requires frequent network requests, this will cause considerable overhead. the solution is to use a proxy function to collect requests within a period of time and send them to the server at one time.
For example, to implement a file synchronization function, when we select a file, it will be synchronized to another backup server.

// File synchronization function var synchronousFile = function (id) {console. log ("start file synchronization, id:" + id);} // use the proxy to merge the request var proxySynchronousFile = (function () {var cache = [], // Save the ID timer to be synchronized for a period of time; // The return function (id) of the timer pointer {cache [cache. length] = id; if (timer) {return;} timer = setTimeout (function () {proxySynchronousFile (cache. join (","); // send the ID set clearTimeout (timer) to the ontology after 2 s; // clear the timer = null; cache = []; // clear air timer}, 2000) ;}(); // bind the click event var checkbox = document. getElementsByTagName ("input"); for (var I = 0, c; c = checkbox [I ++];) {c. onclick = function () {if (this. checked = true) {// use a proxy for file synchronization proxySynchronousFile (this. id );}}}

II. cache proxy
The cache proxy can temporarily store some overhead computing results. during the next calculation, if the passed parameters are the same as before, the previous calculation results can be returned.
Example:Create cache proxy for multiplication and addition

// Calculate the product var mult = function () {var a = 1; for (var I = 0, l = arguments. length; I <l; I ++) {a = a * arguments [I];} return a ;}; // calculates and adds var plus = function () {var a = 0; for (var I = 0, l = arguments. length; I <l; I ++) {a + = arguments [I];} return a ;}; // create a factory var createProxyFactory = function (fn) {var cache ={}; // cache-store parameters and calculated value return function () {var args = Array. prototype. join. call (arguments, "-"); if (args in cache) {// determines whether the input and output parameters have been computed on the console. log ("use cache proxy"); return cache [args];} return cache [args] = fn. apply (this, arguments) ;}}; // create proxy var proxyMult = createProxyFactory (mult), proxyPlus = createProxyFactory (plus); console. log (proxyMult (1, 2, 3, 4); // output: 24console. log (proxyMult (1, 2, 3, 4); // output: cache proxy 24console. log (proxyPlus (1, 2, 3, 4); // output: 10console. log (proxyPlus (1, 2, 3, 4); // output: cache proxy 10

The above three examples describe the javascript proxy mode in detail, hoping to help you learn.