Big Xun Jun talk about JS and design mode------proxy mode

One, general overview

1, the author discusses

When we browse the webpage, the picture in the webpage sometimes does not display immediately, this is through the virtual proxy to replace the real picture, but the proxy stores the real picture path and the size, this is one kind of proxy way.

proxy mode is a more useful mode, and more variants ( virtual agent, remote agent, Copy-on-write agent, protection agent, cache agent, firewall agent, synchronous agent, smart Guide ), applications cover large structures from small structures to the entire system,

we may have a proxy server and other concepts, The agent concept can be interpreted as: there is an intermediary between the starting point and the destination, which means the agent.

The proxy object role contains a reference to the real object so that the real object can be manipulated, while the proxy object provides the same interface as the real object to replace the real object at any moment.

Let's look at an example, as follows:

1 functionXiaov () {2      This. talk =function(){3Console.log ("Wolf cat brother, sorry about the last thing, please forgive me." ") ;4     } ;5 } ;6 functionLangmao () {7      This. BB =Newbigbear ();8      This. talk =function(){9Console.log ("Great Bear, what is the most taboo?" ") ;Ten          This. Bb.talk (); One     } ; A } ; - functionbigbear () { -      This. Xiaov =NewXiaov (); the      This. talk =function(){ -Console.log ("Wolf cat Brother, noon nothing to eat a meal chat, the day I saw little V, he optimized and you said ... ") ; -          This. Xiaov.talk (); -     } ; + } ; - functionGo () { +     NewLangmao (). talk (); A} ;

Small V and Wolf cat a little misunderstanding, by the big Bear to help alleviate the misunderstanding slowly relieved. O (∩_∩) o hahaha ~

Second, source case reference

Describes------geo-coded objects to simulate Google Maps GeoCode services. When Geocoding provides a location (in a place on the Earth), it returns its latitude/longitude (parameter). Our geocoding can address only 4 locations, but in reality there are millions of them, as it relates to countries, cities, and streets.

The programmer decides to implement a proxy object because the geocoding is relatively slow. The proxy object is called Geoproxy. It is known that many duplicate requirements (the same location) come. Speeds up the geoproxy cache of frequently requested locations. If a location is not already cached, it goes to the real GeoCode service and stores the results in the cache.

The location of several cities is queried, and these are all for the same city. Geoproxy builds its cache while supporting these phones. Finally geoproxy< has processed 11 requests and has to request only 3 times. Note that the client program does not understand the proxy object (it calls the same interface as the standard GETLATLNG method). See the code below:

Geoproxy the same interface to real objects to complete specific operations at any moment in lieu of real objects, and to implant other related task functions among them.

Third, the introduction of the case

Registered Normal User: code for "001"

Forum Manager: Code for "002"

System Manager: Code for "003"

Visitor: Code is "000"

The forum opens four basic functions

1, Post

2, Post review

3. Clear Posts

4, message

Visitors do not have any operational rights, registered users can only post, forum managers can audit and delete the operation, the System Manager has all the functions of the Authority.

These permissions are divided and managed using proxy.

(1) Create a user entity class

1 functionUser (name,code) {2      This. Name =name;3      This. Code =Code;4 } ;5User.prototype = {6GetName:function(){7         return  This. Name;8     } ,9GetCode:function(){Ten         return  This. Code; One     } , APost:function(){ -Console.log ("Send post! ") ; -     } , theRemove:function(){ -Console.log ("Delete post! ") ; -     } , -Check:function(){ +Console.log ("Review post! ") ; -     } , +Comment:function(){ AConsole.log ("Reply to post! ") ; at     } -} ;

(2) Create a forum class

1 functionForum (user) {2      This. user =user;3 } ;4Forum.prototype = {5GetUser:function(){6         return  This. Code;7     } ,8Post:function(){9         if( This. User.getcode () = = "001" | | This. User.getcode () = = "003"){Ten             return  This. User.post (); One         } AConsole.log ("no permission to send posts!") ") ; -     } , -Remove:function(){ the         if( This. User.getcode () = = "002" | | This. User.getcode () = = "003"){ -             return  This. User.remove (); -         } -Console.log ("no permission to delete posts! ") ; +     } , -Check:function(){ +         if( This. User.getcode () = = "002" | | This. User.getcode () = = "003"){ A             return  This. User.check (); at         } -Console.log ("no permission to review posts! ") ; -     } , -Comment:function(){ -         if( This. User.getcode () = = "003"){ -             return  This. User.comment (); in         } -Console.log ("no permission to reply to posts! ") ; to     } +} ;

(3), creating a Client test class

1 function forumclient () {2      This function () {3         New Forum (new//  review post 4    }5 };

In the example above, the forum is the same interface as the real object to accomplish certain operations at any moment instead of real objects, and to implant other related task functions among them.

Four, summarize

Abstract role: A common interface for declaring real objects and proxy objects.
Proxy role: The proxy object role contains a reference to the real object, allowing you to manipulate the real object while the proxy object provides the same interface as the real object to replace the real object at any moment. At the same time, the proxy object can attach other actions when performing the real object operation, which is equivalent to encapsulating the real object.
Real role: The real object represented by the proxy role is the object we end up referencing.

One of the benefits of proxy mode is to provide a unified interface method to the external, while the proxy class implements the additional operation behavior of the real class in the interface, so that the system can be extended without affecting the external invocation. That is, I want to modify the actual role of the operation, try not to modify him, but outside in the "package" layer of additional behavior, that is, the proxy class.

Proxy mode usage Scenarios

　　When the objects we need to use are complex or take a long time to construct, then we can use proxy mode. For example, if building an object is time consuming and computer resources, Proxy mode allows us to control this situation until we need to use the actual object. A proxy usually contains the same method as the object that will be used, and once the object is started, these methods are passed to the actual object by proxy. Some scenarios in which you can use proxy mode:

　　An object, such as a large image, takes a long time to load.

A calculated result that takes a long time to complete and needs to show intermediate results during its calculation

An object that exists on a remote computer requires a long time to load the remote object over the network, especially during periods of network transmission.

An object has limited access rights, and proxy mode can verify the user's permissions

　　

hahaha, the end of this article, not to be continued, hope and we have enough communication, common progress (*^__^*) hehe ...

Big Xun Jun talk about JS and design mode------proxy mode