JavaScript design pattern classic proxy pattern_javascript skills-JS Tutorial-php.cn

JavaScript design pattern classic proxy pattern_javascript skills

WBOY

Release： 2016-05-16 15:13:53

Original

1771 people have browsed it

1. Concept of agency model

Note: As the name suggests, one class is used to replace another class to perform method functions. This mode is somewhat similar to the decoration mode. The difference is that the proxy mode initializes the proxy object class on behalf of the client, while the decoration mode uses an interface or The initial decorator parameter reference is used to execute.

Explanation: A real estate agency can help the seller sell the house to the buyer. In the middle, the seller can specify the selling price. The buyer can also propose the type of house he wants to buy, and the intermediary can help handle 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.

2. The role and precautions of the proxy mode

Mode function:

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

2. Virtual proxy (create expensive objects as needed, such as temporarily replacing real images with placeholders when rendering web pages)

3. Security agent (controlling access rights to confirmed objects)

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

Note:

1. Don’t abuse the proxy, 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){
// alert("收到了来自【"+this.maijia_name+"】"+money+"人民币");
alert("收到了来自【"+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){
alert("收到了钱"+money);
}
}
(new to()).maifang();
to().maifang();
</script>
</body>
</html>

Copy after login