Introduction to proxy pattern in JavaScript design patterns-JS Tutorial-php.cn

Introduction to proxy pattern in JavaScript design patterns

不言

Release： 2018-07-03 14:24:21

Original

1503 people have browsed it

This article mainly introduces the proxy mode of JavaScript design pattern, briefly describes the concept, function, and composition of the proxy mode, and combines the example form with a more detailed analysis of the definition and use of the JavaScript proxy mode. Friends who need it You can refer to the following

This article explains the proxy pattern of JavaScript design patterns with examples. Share it with everyone for your reference. The details are as follows:

1. The concept of agency model

Agency, as the name suggests, is to help others do things. GoF defines the agency model as follows:

Agency Mode (Proxy) provides a proxy for other objects to control access to this object. The proxy pattern enables proxy objects to control references to specific objects. A proxy can be almost any object: a file, a resource, an object in memory, or something difficult to copy.

Explanation: A housing agency can help the seller sell the house to the buyer. During this period, the seller can set the price at which he wants to sell the house, and the buyer can also propose the type of house he wants to buy. An intermediary can help with the intermediate steps. Finally a deal is concluded. An intermediary can act as an agent for many house sales and rentals at the same time.

Composition of the proxy pattern:

Abstract role: Business methods implemented by declaring real roles through interfaces or abstract classes.

Agent role: implements an abstract role and is an agent of the real role. It implements the abstract method through the business logic method of the real role and can attach its own operations.

Real role: implement abstract role, define the business logic to be implemented by the real role, and be called by the agent role.

2. The functions and precautions of the proxy mode

Mode functions:

1.Remote proxy (an object locally proxies objects in different spaces)

2. Virtual agent (create expensive objects as needed, such as rendering web pages and temporarily use placeholders instead of real images)

3. Security agent (control the access rights of confirmed objects)

4. Intelligent guidance (calling the object agent to handle other things such as garbage collection mechanism)

Notes:

1. Don’t abuse the agent, sometimes it just adds complexity to the code

3. Agent mode code and practical summary

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>代理模式</title>
</head>
<body>
<script>
 //代理模式需要三方
 //1.买家
 function maijia(){
  this.name = "小明";
  this.money = "30万";
 }
 //2.中介
 function zhongjie(){
 }
 zhongjie.prototype.maifang = function(){
  //new fongdong(new maijia()).maifang("20万");
  new fongdong(new maijia()).maifang("20万");
 }
 //3.卖家
 function fongdong(maijia){
  this.maijia_name = maijia.name;
  this.maijia_money = maijia.money;
  this.maifang = function(money){
//   console.log("收到了来自【"+this.maijia_name+"】"+money+"人民币");
   console.log("收到了来自【"+this.maijia_name+"】"+this.maijia_money+"人民币");
  }
 }
 (new zhongjie()).maifang();
</script>
<script>
// A2B
 function A(){
  this.money = "20RMB";
 }
 function to(){
  if(!(this instanceof to)){
   return new to;
  }
 }
 to.prototype.maifang = function(){
  var a = new A();
  new B().maifang(a.money);
 }
 function B(){
  this.maifang = function(money){
   console.log("收到了钱"+money);
  }
 }
 (new to()).maifang();
 to().maifang();
</script>
</body>
</html>

Copy after login

The operation effect is as follows:

and above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the use of RegExp objects and brackets in JS regular expressions

jQuery prevents event bubbling Case Analysis

The above is the detailed content of Introduction to proxy pattern in JavaScript design patterns. For more information, please follow other related articles on the PHP Chinese website!