"javascript design pattern and development Practice"--proxy mode

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

The key to proxy mode is to provide a surrogate object to control access to the object when the client is not convenient to access an object directly or when it is not satisfied, and the client actually accesses the alias Object. The surrogate object makes some processing of the request and then forwards the request to the ontology Object.

(1) Virtual Agent implementation Picture Preloading

web Span class= "fontstyle0" > in development, picture preloading is a common technique, if you give a img tag node settings Span class= "fontstyle3" >src property, because the picture is too large or the network is not good, the location of the picture is often a blank time. The common practice is to first use a loading picture placeholder, and then asynchronously load the picture, and so the picture is loaded and then fill it into img node, This scenario is ideal for using virtual Proxies.

Let's implement this virtual agent, first create a common ontology object, This object is responsible for creating a img setsrc interface, the outside call this interface, you can give the img label settings src properties:

 var  myimage = (function   () { var  imgnode = document.createelement (' img ' 
    
    return  
     {setsrc:  
    function  
     (src) {imgnode.src  =
     src; }}) (); myimg.setsrc ( ' you.jpg '); 
   

We set the Internet speed to 5kb/smyimage.setsrc give the img node settings src

Now introduce the proxy object proxyimage Through this proxy object, before the picture is really loaded, a placeholder chrysanthemum diagram will appear on the Page. Span class= "fontstyle3" >loading.gif,

 var  proxyimg = (function   () { var  img = new Image; Img.onload  = function   () {myimg.se            TSRC ( this  .src);            };  return   {setsrc:  function   (src) {myimg.setsrc ( ' loading.                    GIF '  = src;        }            }        })(); Proxyimg.setsrc ( ' you.jpg '); 

Now we go through proxyimage myimageproxyimage control customer to myimage and add some extra actions to the process, such as img src set to a local loading picture.

(2) The meaning of the proxy

To illustrate the meaning of the agent, we introduce a principle of object-oriented design--the principle of single Responsibility.
/span>

The single principle of responsibility is that there should be only one cause for a class (which usually also includes objects and functions, etc.) that causes it to Change. If an object takes on a number of responsibilities, it means that the object will become huge and there may be multiple reasons for it to Change. object-oriented Design encourages the distribution of behavior into fine-grained objects, and if an object takes on too much responsibility, it is tantamount to coupling those responsibilities together, which leads to weak and low-cohesion Designs. When changes occur, the design can be accidentally damaged.

actually, All we need to do is give img node settings src Preloaded images are just a icing on the Cake. If you can put this action in another object, nature is a very good way. So the role of the agent is reflected here, the agent is responsible for pre-loading the picture, the pre-loading operation is completed, the request is re-handed to the ontology myimage
/span>

Throughout the program, we haven't changed or added myimage img node settings src /span>

"javascript design pattern and development Practice"--proxy mode