javascript之代理模式

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

支持原作者，購(gòu)買地址鏈接描述

概念

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

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

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

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

保護(hù)代理和虛擬代理

經(jīng)濟(jì)人可以幫助 明星過(guò)濾掉一些請(qǐng)求，比如 錢不夠多或者場(chǎng)地不夠好，這種請(qǐng)求可以直接在經(jīng)紀(jì)人出被過(guò)濾拒絕掉。這種代理就叫做保護(hù)代理。 
由經(jīng)紀(jì)人Agent來(lái)控制對(duì)明星star的訪問(wèn)。

- 如果A 通過(guò) B 送花給C,我們可以在A的時(shí)候new 一個(gè) flower傳遞給代理B,再由B決定什么時(shí)候或者是否要再轉(zhuǎn)交個(gè)最終的target C。new Flower這個(gè)操作可以交給B，B決定可以送花給C的時(shí)候再由B做 new Flower的操作。這種模式就叫做虛擬代理。虛擬代理把一些開(kāi)銷很大的對(duì)象，延遲到真正需要它的時(shí)候才去創(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("接受了鮮花")
    }
}

實(shí)現(xiàn)圖片預(yù)加載

不是用代理設(shè)計(jì)模式的實(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;
        }
    }
})()

使用代理模式的實(shí)現(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;
        }
    }
})

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

preLoadImage方法，承擔(dān)了添加img標(biāo)簽，還有預(yù)加載兩個(gè)功能，代碼耦合到了一起，當(dāng)我修改添加標(biāo)簽時(shí)，可能會(huì)影響到另一部分功能。

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

虛擬代理合并http請(qǐng)求

(page95)

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91113.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MAX_zuo

男|高級(jí)講師

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

TA的文章

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

閱讀 3551·2021-11-23 10:10
你可能不了解的動(dòng)畫(huà)神器之requestAnimationFrame及其兼容寫(xiě)法

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

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

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

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

閱讀 2017·2019-08-28 18:28
Webpack Loader 高手進(jìn)階(一)

閱讀 2852·2019-08-26 13:34
用Vue搭建一個(gè)應(yīng)用盒子（一）：todo-list

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

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript之代理模式

相關(guān)文章

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

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

javascript設(shè)計(jì)模式學(xué)習(xí)筆記之代理模式

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

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

發(fā)表評(píng)論

0條評(píng)論

MAX_zuo

男|高級(jí)講師

TA的文章

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

你可能不了解的動(dòng)畫(huà)神器之requestAnimationFrame及其兼容寫(xiě)法

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

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

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

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

Webpack Loader 高手進(jìn)階(一)

用Vue搭建一個(gè)應(yīng)用盒子（一）：todo-list

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

javascript之代理模式

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！