javascript之代理模式

MAX_zuo 發布于2019-08-22 10:42 / 521人閱讀

支持原作者，購買地址鏈接描述

概念

代理模式
代理模式(Proxy),為其他對象提供一種代理以控制對這個對象的訪問。
在現實生活中，可以找到很多代理模式使用的場景。明星都有經紀人作為代理。如果請明星來演出，就要先同他的經紀人溝通，談好相應的細節與報酬。再交給明星。
需求：公司(Company)通過經紀人(agent)找明星(start)開演唱會

//演唱會
var Concert = function(){}
//公司
var Company = {
    askforconcert: function(target){
       var concert = new Concert();
       target.openconcert(concert )
    }

}
//明星
var star = {
    openconcert: function(concert){
         console.log("明星同意開一場演唱會")
    }
}
//經紀人代理
var agent = {
    openconcert: function(concert){
        star.openconcert(concert)
    }
}
//執行
Company.askforconcert(agent);  //=>明星同意開一場演唱會

這樣 company直接把請求發給agent，agent再轉給star，這樣就完成了一個簡單的代理模式
(compan=>agent=>star)

保護代理和虛擬代理

經濟人可以幫助 明星過濾掉一些請求，比如 錢不夠多或者場地不夠好，這種請求可以直接在經紀人出被過濾拒絕掉。這種代理就叫做保護代理。 
由經紀人Agent來控制對明星star的訪問。

- 如果A 通過 B 送花給C,我們可以在A的時候new 一個 flower傳遞給代理B,再由B決定什么時候或者是否要再轉交個最終的target C。new Flower這個操作可以交給B，B決定可以送花給C的時候再由B做 new Flower的操作。這種模式就叫做虛擬代理。虛擬代理把一些開銷很大的對象，延遲到真正需要它的時候才去創建

var Flower = function(){
    this.price = 150
}
var a = {
  sendflower: function(target){
        var flower = new Flower()
        target.receiveFlower(flower )
    }
}
var b = {
    receiveFlower: function(flower){
        if(flower.price < 100){
          console.log("太便宜了，女神表示一臉嫌棄")
          return false
        }else{
            c.receiveFlower(flower)
        }
    },
    
        
}
var c = {
    receiveFlower: function(){
        console.log("接受了鮮花")
    }
}

實現圖片預加載

不是用代理設計模式的實現

var  preLoadImage = (function(){
    var imgNode = document.createElement("img");
    document.body.append(imgNode)
    var img = new Image();
    img.onload = function(){
      imgNode.src = img.src
    }
    return {
        setSrc: function(src){
            imgNode.src = "loading.gif";
            img.src = src;
        }
    }
})()

使用代理模式的實現方式

var image = (function(){
    var imgNode = document.createElement("img");
    document.body.append(imgNode);
    return {
        setSrc: function(src){
            imgNode.src = src;
        }
    }
})()
//代理
var proxyImage = (function(){
    var img = new Image();
    img.onload = function(){
        image.setSrc = img.src;
    }
    return {
        setSrc: function(src){
            image.setSrc = "loading.gif";
            img.src = src;
        }
    }
})

單一職責原則
單一職責指的是，對一個類而言，應該僅有一個引起他變化的原因。如果一個對象承擔了多個原則，就意味著這個對象將變得巨大，引起他變化的原因可能也會有多個。面向對象設計鼓勵將行為分不到細粒度的對象之中，如果一個對象承擔的職責過多，等于把這些值得耦合到了一起，這種耦合會導致脆弱和低內聚的設計。當變化發生時，設計可能會遭到意外的破壞。(書中93頁)

preLoadImage方法，承擔了添加img標簽，還有預加載兩個功能，代碼耦合到了一起，當我修改添加標簽時，可能會影響到另一部分功能。

而用代理方法重構后，image方法只負責創建標簽，設置src,預加載功能交給了proxyImage，解除了耦合的代碼，兩個功能互不干擾。

虛擬代理合并http請求

(page95)

var syncFile = function(id){
    $.ajax({
        data: {
            id: id
        }
    })...
}
//綁定事件
for(var i = 0;i
這里有個很嚴重的問題，每點一個都會發送一個ajax請求，性能上，這是一個很大的開銷
需求： 文件同步穿，選中的文件會被上傳到服務器上，解決方法，我們可以 通過一個代理函數，來收集一段時間內的請求，將請求的參數緩存起來，與后端人員協商將選中的id作為一個數組傳到后臺保存。

var syncFile = function(ids){
    $.ajax({
        data: {
            id: ids
        }
    })...
}

var proxyFile = (function(){
    var cache = [],
        timer = null;

    return function(id){
        cache.push(id);
        if(timer){
            return
        }
        timer = setTimeout(function(){
            syncFile(cache.join(","))
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000)
    }
})()
//綁定事件
for(var i = 0;i
這樣，有選中操作的話，不會頻繁觸發請求。
緩存代理
緩存代理可以作為一些開銷大的運算結果提供暫時的存儲，下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回前面存儲的運算結果

//demo
var mult = function(){
    console.log("開始計算結果")
    var a  = 1;
    for(var i = 0;i
 return cache[args] = mult.apply(this,arguments),這里遇見個認知上的問題，一直在想，這里的this指針是指向window對象的，而mult函數，也在window對象下。思路卡住，沒想明白為什么要用apply指一下指針，想了一下，原來是為了把這個參數apply進去。。。我真他媽的智障。參數是不能從 把代理里的arguments直接mult(arguments) 過去的。
實際中
積分商城項目的購物車之前由于趕工，請求處理的很粗糙，可以使用代理模式重新重構代碼。
將請求合并緩存做處理。
重構之后 會補充文章。

云服務器 GPU云服務器 Java設計模式之（五）——代理模式代理模式靜態代理模式 java代理模式用處

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91113.html

Javascript設計模式之——代理模式

摘要：最近在讀設計模式與開發實踐，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。經紀人可以全權代表明星和客戶談判，最后把談判結果給明星，明星決定簽約與否。這也違反了面向對象設計原則中的單一職責原則。最近在讀《javascript設計模式與開發實踐》，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。如果你不了解設計模式，那么強烈推薦你閱讀一下這本書，...

cuieney 2019-08-20 17:07 評論0 收藏0
100行代碼讓您學會JavaScript原生的Proxy設計模式

摘要：面向對象設計里的設計模式之代理模式，相信很多朋友已經很熟悉了。代表當前執行方法的實例，即方法調用者。代表具體的方法名稱?，F在我們再次調用，傳入構造器返回的代理對象打印輸出，代理邏輯生效了和的一樣優雅地實現了代理設計模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向對象設計里的設計模式之Proxy（代理...

txgcwm 2019-08-23 12:28 評論0 收藏0
javascript設計模式學習筆記之代理模式

摘要：代理模式代理模式是為一個對象提供一個代用品或者占位符以便控制對它的訪問引入代理模式，其實是為了實現單一職責的面向對象設計原則。代理模式代理模式是為一個對象提供一個代用品或者占位符, 以便控制對它的訪問引入代理模式，其實是為了實現單一職責的面向對象設計原則。虛擬代理將一些開銷很大的對象, 延遲到正真需要的時候執行 // 針對大圖增加loading圖 ...

big_cat 2019-08-26 13:39 評論0 收藏0
細談JavaScript中的一些設計模式

摘要：注意事項聲明函數時候處理業務邏輯區分和單例的區別，配合單例實現初始化構造函數大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設計模式] 常見設計模式一直對設計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設計模式，并總結了一下。設計模式簡介設計模式概念解讀設計模式的發展與在JavaScript中的應用 ...

30e8336b8229 2019-08-19 17:47 評論0 收藏0
JavaScript設計模式之結構型設計模式

摘要：享元模式通過分析應用程序的對象，將其解析為內在數據和外在數據，減少對象數量，從而提高程序的性能。通過這種方式進行事件綁定，可以減少事件處理程序的數量，這種方式叫做事件委托，也是運用了享元模式的原理。事件處理程序是公用的內在部分，每個菜單項各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript設計模式之外觀模式概念外觀模式：為一組復雜子系統接口提...

xiaoqibTn 2019-08-21 18:24 評論0 收藏0