JavaScript設(shè)計模式之代理模式簡單實例教程

更新時間：2018年07月03日 09:28:12 作者：CangoWu

這篇文章主要介紹了JavaScript設(shè)計模式之代理模式,簡單描述了代理模式的概念、功能、組成并結(jié)合實例形式較為詳細的分析了javascript代理模式的定義與使用相關(guān)操作技巧,需要的朋友可以參考下

一、代理模式概念

代理，顧名思義就是幫助別人做事，GoF對代理模式的定義如下：

代理模式（Proxy），為其他對象提供一種代理以控制對這個對象的訪問。代理模式使得代理對象控制具體對象的引用。代理幾乎可以是任何對象：文件，資源，內(nèi)存中的對象，或者是一些難以復(fù)制的東西。

解釋：房屋中介，可以代理幫助賣家把房子賣給買家，這中間賣家說要賣的價錢就可以了，買家也可以提出自己要買的房型，中介可以幫忙處理中間環(huán)節(jié)。最后達成買賣。中介可以同時代理很多房屋買賣，并且可以代理租房事宜。

代理模式的組成：

抽象角色：通過接口或抽象類聲明真實角色實現(xiàn)的業(yè)務(wù)方法。

代理角色：實現(xiàn)抽象角色，是真實角色的代理，通過真實角色的業(yè)務(wù)邏輯方法來實現(xiàn)抽象方法，并可以附加自己的操作。

真實角色：實現(xiàn)抽象角色，定義真實角色所要實現(xiàn)的業(yè)務(wù)邏輯，供代理角色調(diào)用。

二、代理模式的作用和注意事項

模式作用：

1、遠程代理（一個對象將不同空間的對象進行局部代理）

2、虛擬代理（根據(jù)需要創(chuàng)建開銷很大的對象如渲染網(wǎng)頁暫時用占位代替真圖）

3、安全代理（控制證實對象的訪問權(quán)限）

4、智能指引（調(diào)用對象代理處理另外一些事情如垃圾回收機制）

注意事項：

1、不能濫用代理，有時候僅僅是給代碼增加復(fù)雜度

三、代理模式代碼和實戰(zhàn)總結(jié)

<!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>

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun測試運行效果如下：