javascript之代理模式

MAX_zuo 發(fā)布于2019-08-22 10:42 / 581人閱讀

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

概念

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

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

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

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

保護代理和虛擬代理

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

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

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("接受了鮮花")
    }
}

實現(xiàn)圖片預加載

不是用代理設(shè)計模式的實現(xiàn)

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;
        }
    }
})()

使用代理模式的實現(xiàn)方式

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;
        }
    }
})

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

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

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

虛擬代理合并http請求

(page95)

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

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
這樣，有選中操作的話，不會頻繁觸發(fā)請求。
緩存代理
緩存代理可以作為一些開銷大的運算結(jié)果提供暫時的存儲，下次運算時，如果傳遞進來的參數(shù)跟之前一致，則可以直接返回前面存儲的運算結(jié)果

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

云服務器 GPU云服務器 Java設(shè)計模式之（五）——代理模式代理模式靜態(tài)代理模式 java代理模式用處

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91113.html

發(fā)表評論

登陸后可評論

0條評論

MAX_zuo

男|高級講師

我要關(guān)注我要私信

TA的文章

易探云：棗莊高防云服務器促銷,4核4G內(nèi)存/30M帶寬/100G防御,130元/月

閱讀 3641·2021-11-23 10:10
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

閱讀 3403·2019-08-30 14:03
CSS實用技巧總結(jié)一

閱讀 2141·2019-08-30 13:09
前端每日實戰(zhàn)：29# 視頻演示如何不用 transition 和 animation 也能做網(wǎng)頁動畫

閱讀 3465·2019-08-29 15:29
移動端h5開發(fā)相關(guān)內(nèi)容總結(jié)（四）

閱讀 1607·2019-08-29 11:23
CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

閱讀 2071·2019-08-28 18:28
Webpack Loader 高手進階(一)

閱讀 2916·2019-08-26 13:34
用Vue搭建一個應用盒子（一）：todo-list

閱讀 2219·2019-08-26 11:32

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript之代理模式

相關(guān)文章

Javascript設(shè)計模式之——代理模式

**100行代碼讓您學會JavaScript原生的Proxy設(shè)計模式**

javascript設(shè)計模式學習筆記之代理模式

**細談JavaScript中的一些設(shè)計模式**

JavaScript設(shè)計模式之結(jié)構(gòu)型設(shè)計模式

發(fā)表評論

0條評論

MAX_zuo

男|高級講師

TA的文章

易探云：棗莊高防云服務器促銷,4核4G內(nèi)存/30M帶寬/100G防御,130元/月

你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

CSS實用技巧總結(jié)一

前端每日實戰(zhàn)：29# 視頻演示如何不用 transition 和 animation 也能做網(wǎng)頁動畫

移動端h5開發(fā)相關(guān)內(nèi)容總結(jié)（四）

CSS清除浮動float的三種方法總結(jié)，為什么清浮動？浮動會有那些影響？

Webpack Loader 高手進階(一)

用Vue搭建一個應用盒子（一）：todo-list

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript之代理模式

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！