JavaScript design pattern learning proxy pattern

Overview

The proxy pattern belongs to the structural design pattern among the design patterns;

definition:

As the name suggests, it provides a substitute or placeholder for an object in order to control access to it!

Vernacular explanation:

Many celebrities have agents. If they want to contact the agent for commercial performances or concerts, they need to contact the agent first. After discussing the cooperation matters with the agent, the agent will convey them to the celebrity, and then the celebrity will go to participate in the activities. The same is true for renting a house. Whether we rent or buy a house, our first reaction is definitely to find a platform like Lianjia, because we only need to communicate with Lianjia, and Lianjia communicates with the landlord, which saves us the step of communicating directly with the landlord; because Lianjia is an agency model, it acts as an agent for the landlord's housing resources;

Implementation

For example:

As a star chaser, you are a loyal fan of a star. It happens that the star is about to have a birthday, and you are going to send a gift to express your feelings. The normal process is:

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

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

Fans.flower(); //Receive flowers from fans

You chose to buy flowers and send them to her, hoping that she could feel your love; but often ideals are full and reality is very skinny! Don’t forget the agent, because it’s often not the star himself but the agent who signs for your gift:

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

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

Fans.flower(); //Received flowers from fans

The agent here is a simple agent. Fans need to give gifts to the agent first, and the agent will then pass it on to the star himself;

Protection Agent

When the star was overjoyed to see the package sent by fans, he opened it and found out it was flowers! The star was very disdainful, so he told his agent that from now on, anyone who sent me flowers should not send them to me anymore, and he could handle it himself:

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

var Agent = {
    reception:function(gift){
        console.log("gift from fans: "+gift); //gift from fans: flowersif(gift != "flowers"){
            star.reception("花");
        }
      
    }
}
var star = {
    reception:function(gift){
        console.log("Received from fans: "+gift);
    }
}

Fans.flower();

In the above program, the star did not receive the flowers sent by fans at all, because they were intercepted and processed by the agent; filtering out some gifts through the agent is called protection agent;

Virtual Agent

If the stars don’t receive the flowers sent by fans, then the fans can change their mindset and give some money so that the stars can buy what they want! So he found an agent, gave the agent one million in cash, and asked the agent to pass it on to the star himself;

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

var Agent = {
    reception:function(){
        // console.log("gift from fans: "+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();

The star was very happy when he received one million. Since the one million was not spent, it was not intercepted and filtered by the agent. Therefore, the star received it directly. We call this model the virtual agent model.

Virtual proxy to achieve lazy loading of images

When there is no proxy, our code looks like this:

// Create an entity object var myImage = (function(){
  // Create a tag var imgNode = document.createElement( 'img' );
  // Add to the page document.body.appendChild( imgNode );
  return {
    // Set the src of the image
    setSrc: function( src ) {
      // Change src
      imgNode.src = src;
    }
  }
})();

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

Virtual Agent

// Create an entity object var myImage = (function(){
  // Create a tag var imgNode = document.createElement( 'img' );
  // Add to the page document.body.appendChild( imgNode );
  return {
    // Set the src of the image
    setSrc: function( src ) {
      // Change src
      imgNode.src = src;
    }
  }
})();

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

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

The above code uses the proxy mode to implement image preloading. It can be seen that the proxy mode cleverly separates the creation of images from the preloading logic. In the future, if preloading is not needed, just change the request body instead of the request proxy object.

The above is the detailed content of the proxy pattern in JavaScript design pattern learning. For more information about JavaScript design patterns, please pay attention to other related articles on 123WORDPRESS.COM!