JavaScript design mode proxy mode

The proxy mode is to provide a substitute or placeholder for an object in order to control access to it.

The key of proxy mode is that when the customer is not convenient to access an object directly or does not meet the need, provide a surrogate object to control access to the object, the client actually accesses the surrogate object, the surrogate object to the request to make some processing, and then transfer the request to the Ontology object.

First look at an example, if a want to send flowers to C, but do not know the mood of C, C is happy to send flowers success, then you can pass C's good friend B to send Flowers, B understand C, you can know the mood of C.

varFlower =function(){}; //a send flower request     varA ={sendflower:function(target) {varFlower =NewFlower ();      Target.receiveflower (flower);     }     }; //b Accept the flower request and listen to C when the mood is good to C     varB ={receiveflower:function(Flower) {C.listengoodmood (function() {c.receiveflower (flower);         });     }     }; //C Accept Flower sending request and express mood     varC ={receiveflower:function(Flower) {console.log (flower); }, Listengoodmood:function(FN) {setTimeout (function() {fn (); },1000)         }     }; A.sendflower (B);

In the actual development, because the price of flowers is expensive, then can be when B listening to the good mood of C, only to create flowers to save consumption.

var B = {         receiveflower:function() {           c.listengoodmood()} (function() {             var  New Flower ();             C.receiveflower (flower);}          );         }     ;

In this case, the key is the B object, which is the proxy object described in this chapter, Agent B can help C filter out those who are too old and so on, these requests can be directly rejected by B, this is called the protection agent. And in the real need to create objects, that is, C in good mood when the creation of flowers, known as virtual agent.

Here is an example of the actual development, usually when loading a larger picture, we will first use a Chrysanthemum diagram hint that the user is loading, when the real picture is loaded, the picture is displayed.

//class for loading pictures       varMyimg = (function(){           varImgnode = document.createelement (' img ');           Document.body.appendChild (Imgnode); return{setsrc:function(SRC) {imgnode.src=src;       }           }       })(); //proxy class, before the picture is loaded complete display the daisy graph after loading is complete change the real picture       varProxyimg = (function(){          varIMG =NewImage (); Img.onload=function() {MYIMG.SETSRC ( This. SRC);          }; return{setsrc:function(SRC) {myimg.setsrc ("Chrysanthemum Chart!"); IMG.SRC=src;       }          }       })(); PROXYIMG.SETSRC (' The real picture! ');

Here, there may be doubts, even without proxy mode can achieve this effect, first look at the code implementation without proxy:

varMyimg = (function(){           varImgnode = document.createelement (' img ');           Document.body.appendChild (Imgnode); varIMG =NewImage (); Img.onload=function() {MYIMG.SETSRC ( This. SRC);           }; return{setsrc:function(SRC) {myimg.setsrc ("Chrysanthemum Chart!"); IMG.SRC=src;       }           }       })(); MYIMG.SETSRC ("Real picture!")

To illustrate the meaning of the agent, a concept, the single responsibility principle, is introduced to indicate that a class should have only one reason to cause it to change. This guarantees the high cohesion and low coupling of the class.

In the case of not using the proxy, MYIMG is responsible for the IMG set SRC, but also responsible for preloaded images, sometimes our pictures may be very small, or the future speed of the Internet quickly, then we need to drill down to the class to remove the preloaded features.

And if the proxy mode is used, then when we don't need to preload, we just need to call myimg directly.

The application of virtual agent in lazy loading.

As a console, when the user enters Console.log (0), it prints 0 on the console, but usually the user does not open the console at first, so it does not load the console at the beginning. Then we can first create a proxy class, the information will be printed into the proxy class, when the user presses F12 to open the console, we created the console, then traverse the information and output.

Agent in the Zepto class library event processing use more, specific can refer to the Zepto Event Analysis series, which is the proxy object.

Refer to the Book of Design patterns and development practices from JavaScript .

JavaScript design mode proxy mode