JavaScript Design patterns and development Practices-6th chapter-Proxy mode

Proxy mode definition: The proxy mode provides a broker for an object in order to control access to it

Virtual proxies: Virtual agents delay the creation of some expensive objects until they are really needed

Using virtual proxies for picture preloading

1 //The actual picture object to be displayed by the agent2 varMyImage = (function(){3     //Create a picture Dom and save the reference in the closure4     varImgnode = document.createelement (' img ' );5 Document.body.appendChild (imgnode);6     return {7         //This real picture object provides a way to modify the image src8SETSRC:function(SRC) {9IMGNODE.SRC =src;Ten         } One     } A })(); -  - varProxyimage = (function(){ the     //Create a DOM img object to be used later as a cache of pictures -IMG =NewImage; -     //bind this IMG object to an event after loading is complete -Img.onload =function(){ +         //the img.src that passed into the function is actually blank at first. -         //But after this event is triggered, it's bound to have a real value. + myimage.setsrc (IMG.SRC); A     } at     return { -         //This method of modifying the image Src actually does two things: -         //play pre-loaded pictures, add src to cached picture objects -SETSRC:function(SRC) { -MYIMAGE.SETSRC (' Preload.gif ' ); -IMG.SRC =src; in         } -     } to })(); +  -PROXYIMAGE.SETSRC (' cat.jpg ')

What it means to use proxies:

• Single principle of responsibility
• The picture preload feature does not introduce any patterns, but the code for "Manage Real pictures" and "Manage preload" is mixed together
• If the preload feature is not needed later, the code that manages the entire real picture needs to be changed

Consistency of agent and ontology interfaces:

• When you do not request a proxy object, you can also request the ontology to achieve the same purpose directly.
• At the same time, if both the proxy object and the ontology are a function, then you can also think that they have a consistent "interface" (the code is similar to the above, this is not written here)

Virtual Agent Merge HTTP requests:

1 varSynchronousfile =function(ID) {2 Console.log (ID);3 }4 5 //Proxy Object6 varProxysynchronousfile = (function(){7     //array of Cache IDs8     varCache = [];9     //A variable that marks whether the inertia time endsTen     varTimeisnotup =NULL; One      A     return function(ID) { - Cache.push (ID); -         if(timeisnotup) { the             return; -}Else{ -Timeisnotup = SetTimeout (function(){ -Synchronousfile (Cache.join (', ') ) ); + cleartimeout (timeisnotup); -Timeisnotup =NULL; +Cache.length = 0; A}, 2000 ); at         }; -     } - })(); -  - //Customer Actions - varcheckboxes = document.getelementsbytagname (' input '); in  for(vari = 0, checkbox; checkbox = checkboxes[i++]; ) { -Checkbox.onclick =function(){ to         if( This. checked = = =true ) { +Proxysynchronousfile ( This. ID); -         } the     } *};

Cache Proxy: A function that can be used in an algorithm to save a previously computed result, and to call the previous calculation directly if the calculation of the same parameter is encountered

Ajax caching Proxy: the implementation is similar to the above, but can not directly cache the results into the proxy object, the need to use the callback method

Dynamically create proxies with higher-order functions: Use a function to create a proxy for multiple functions, which is somewhat similar to the factory pattern

JavaScript Design patterns and development Practices-6th chapter-Proxy mode