快捷導(dǎo)航

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

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

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

一、代理模式概念

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

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

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

代理模式的組成：

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

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

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

二、代理模式的作用和注意事項(xiàng)

模式作用：

1、遠(yuǎn)程代理（一個(gè)對(duì)象將不同空間的對(duì)象進(jìn)行局部代理）

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

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

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

注意事項(xiàng)：

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

三、代理模式代碼和實(shí)戰(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代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun測(cè)試運(yùn)行效果如下：