Agent pattern belongs to structural pattern in design pattern.

Definition:

Vernacular explanation:

Many stars have agents. If you want to contact an obvious commercial performance or concert or other business activities, you need to contact an agent first. After you talk about the cooperation with the agent, the agent will transfer it to a star, and then a star will participate in the activities. It's the same thing to rent a house, whether we rent a house or not. When buying a house, the first reaction must be to find a platform such as chain house, because we only need to communicate with chain house, and chain house to communicate with the landlord, which saves us the steps of communicating with the landlord directly; because chain house is an agent model, which represents the landlord's house supply;

For example:

As a Star chaser, you are a loyal fan of a star. Just as a star is about to have a birthday, you are going to send a gift to represent your mind. Normal process:

    var Fans = {
        flower(){
            star.reception("FLOWER");
        }
    }

    var star = {
        reception:function(gift){
            console.log("Received from fans:"+gift);
        }
    }

    Fans.flower();   //Received from fans: Flower

You choose to buy flowers and send them to her, hoping that she can feel your heart, but often the ideal is very full, the reality is very bony! Don't forget the agent, because it's not the star who signs your gift, but the agent:

    var Fans = {
        flower(){
            Agent.reception("FLOWER");
        }
    }

    var Agent = {
        reception:function(gift){
            console.log("Fans sent:"+gift);   //Flowers from fans
            star.reception("FLOWER");
        }
    }
    var star = {
        reception:function(gift){
            console.log("Received from fans:"+gift);
        }
    }

    Fans.flower();    //Received from fans: Flower

The agent here is a simple agent. Fans need to give gifts to the agent first, and then the agent transfers them to the star himself.

Protection agent:

When the star saw the package sent by the fans, he opened it and saw it was a flower! Stars are very disdainful, so tell the agent, in the future, if you send me flowers, don't give them to me at all. You can deal with them by yourself:

    var Fans = {
        flower(){
            Agent.reception("FLOWER");
        }
    }

    var Agent = {
        reception:function(gift){
            console.log("Fans sent:"+gift);  //Flowers from fans
            if(gift != "FLOWER"){
                star.reception("FLOWER");
            }
          
        }
    }
    var star = {
        reception:function(gift){
            console.log("Received from fans:"+gift);
        }
    }

    Fans.flower();

In the above program, the star didn't receive the flowers sent by the fans at all, because they had been intercepted and handled by the agent; some gifts were filtered out through the agent, which is called protection agent;

　　

Virtual agent:

If the star can't receive the flowers sent by the fans, the fans should change their thinking and send some money to buy what they want. So I found the agent and gave the agent a million cash to convey to the star himself.

    function Money(){
        this.total = "One million cash"
       return this.total;
    }
    var Fans = {
        flower(){
            Agent.reception();
        }
    }

    var Agent = {
        reception:function(){
            // console.log("fan sent:" + gift);
            let money = new Money();
            star.reception(money.total);
          
        }
    }
    var star = {
        reception:function(gift){
            console.log("Received from fans:"+gift);  //Received from fans: one million cash
        }
    }

    Fans.flower();

Stars are very happy when they receive a million, because they are not flowers and are not intercepted and filtered by agents, so stars receive them directly, which is called virtual agent mode.

 

The virtual agent implements image lazy loading:

When no agent is used, our code is as follows:

// Create an ontology object
var myImage = (function(){
  // create label
  var imgNode = document.createElement( 'img' );
  // Add to page
  document.body.appendChild( imgNode );
  return {
    // Set src for pictures
    setSrc: function( src ){
      // Change src
      imgNode.src = src;
    }
  }
})();

myImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

Virtual agent:

// Create an ontology object
var myImage = (function(){
  // create label
  var imgNode = document.createElement( 'img' );
  // Add to page
  document.body.appendChild( imgNode );
  return {
    // Set src for pictures
    setSrc: function( src ){
      // Change src
      imgNode.src = src;
    }
  }
})();

// Create proxy object
var proxyImage = (function(){
  // Create a new img tag
  var img = new Image;
  // img load complete event
  img.onload = function(){
    // Call myImage to replace src method
    myImage.setSrc( this.src );
  }
  return {
    // Proxy set address
    setSrc: function( src ){
      // Preloading
      myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
      // Assign normal picture address
      img.src = src;
    }
  }
})();

proxyImage.setSrc( 'http:// image.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

The above code uses the proxy mode to achieve image preloading. You can see that the proxy mode cleverly separates the creation of images from the preloading logic. In the future, if there is no need for preloading, just change the request ontology to replace the request proxy object.