亚洲视频精品在线,麻豆国产高清精品国在线,国产三级精品三级在线专区1

js設(shè)計模式——代理模式proxy

2018-4-14 seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中，請點這里

什么是代理模式

代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問。

（可以想象一下明星與經(jīng)紀(jì)人的關(guān)系，明星是請求的本體，經(jīng)紀(jì)人就是代理proxy）

如何實現(xiàn)代理模式

代理對象內(nèi)部含有對本體對象的引用，因而可以與調(diào)用本體的相關(guān)方法；同時，代理對象提供與本體對象相同的接口，方便在任何時刻代理本體對象。

例子（上代碼）

代理模式的變體有很多，有：保護代理、虛擬代理、緩存代理、防火墻代理、遠(yuǎn)程代理、智能引用代理、寫時復(fù)制代理。具體介紹前三種。

（1）保護代理

保護代理主要用于控制不同權(quán)限的對象對本體對象的訪問權(quán)限。比如很多人想訪問本體A，如果有代理B存在的話，B會首先剔除不滿足A的訪問條件的訪問者，符合條件的才能訪問。

作用：過濾請求

例如：權(quán)限的劃分和管理就是使用保護代理proxy來完成的。

注冊普通用戶：code為“001”

論壇管理者   ：code為“002”

系統(tǒng)管理者   ：code為“003”

游客：code為“000”

論壇開放了四個基礎(chǔ)功能

1，發(fā)帖

2，帖子審核

3，清除帖子

4，留言

游客不具備任何操作權(quán)限，注冊用戶只能發(fā)帖，論壇管理者可以審核以及刪帖操作，系統(tǒng)管理者具有所有功能權(quán)限。

[javascript] view plain copy

//用戶本體

function User(name,code){

    this.name = name ;

    this.code = code ;

} ;

User.prototype = {

    getName : function(){

        return this.name ;

    } ,

    getCode : function(){

        return this.code ;

    } ,

    post : function(){

        console.log("發(fā)帖子！") ;

    } ,

    remove : function(){

        console.log("刪除帖子！") ;

    } ,

    check : function(){

        console.log("審核帖子！") ;

    } ,

    comment : function(){

        console.log("回復(fù)帖子！") ;

    }

} ;

//代理論壇類

function Forum(user){

    this.user = user ;

} ;

Forum.prototype = {

    getUser : function(){

        return this.user ;

    } ,

    post : function(){

        if(this.user.getCode() == "001" || this.user.getCode() == "003"){

            return this.user.post() ;

        }

        console.log("沒權(quán)限發(fā)帖子！") ;

    } ,

    remove : function(){

        if(this.user.getCode() == "002" || this.user.getCode() == "003"){

            return this.user.remove() ;

        }

        console.log("沒權(quán)限刪除帖子！") ;

    } ,

    check : function(){

        if(this.user.getCode() == "002" || this.user.getCode() == "003"){

            return this.user.check() ;

        }

        console.log("沒權(quán)限審核帖子！") ;

    } ,

    comment : function(){

        if(this.user.getCode() == "003"){

            return this.user.comment() ;

        }

        console.log("沒權(quán)限回復(fù)帖子！") ;

    }

} ;

//功能測試

function ForumClient(){

     this.run = function(){

         new Forum(new User("bigbear","003")).check() ; // 審核帖子

     }

} ;

在該例子中，論壇代理有與user本體相同的接口，可以在滿足條件時，執(zhí)行與本體相同的代碼，與調(diào)用方法的人而言，是不透明的，我實現(xiàn)了調(diào)用，但不在乎是通過代理實現(xiàn)的，還是本體實現(xiàn)的。

本案例來源：大熊君大話設(shè)計模式JavaScript

（2）虛擬代理

虛擬代理是將調(diào)用本體方法的請求進行管理，等到本體適合執(zhí)行時，再執(zhí)行。

作用：將開銷很大的對象，延遲到真正需要它的時候再執(zhí)行。

比如：利用虛擬代理實現(xiàn)圖片預(yù)加載功能：

[javascript] view plain copy

/**在圖片預(yù)加載中實現(xiàn)虛擬代理 */

var myImage = (function(){

    var imageNode = document.createElement('img');

    document.body.appendChild(imageNode);



    return {

        setSrc: function(src){

            imageNode.src = src;

        }

    }

})()



//代理類

var proxyImage = (function(){

    var img = new Image();

    img.onload = function(){

        myImage.setSrc(this.src);

    }



    return {

        setSrc: function(src){

            myImage.setSrc('本地的圖片地址');

            img.src = src; //緩存完畢之后會觸發(fā)img的onload事件

        }

    }

})()

比如：利用虛擬代理合并HTTP請求

[javascript] view plain copy

/**虛擬代理合并http請求 */

//通過代理函數(shù)收集一段時間的請求，一次性發(fā)送給服務(wù)器，減少頻繁的網(wǎng)絡(luò)請求帶來的極大開銷

//模擬向服務(wù)器發(fā)送同步請求的函數(shù)

var synchronousFile = function(id){

    console.log('開始同步上傳文件，id為：'+id);

}



//代理類收集一段時間的同步請求，統(tǒng)一發(fā)送

var proxySynchronousFile = (function(){

    var cache = [], //設(shè)置緩存數(shù)組

        timer; //定時器，通過閉包訪問定時器的引用



    return function(id){

        cache.push(id);

        if(timer){

            return;

        }

        timer = setTimeout(function(){

            synchronousFile(cache.join(','));

            clearTimeout(timer);

            timer = null;

            cache.length = 0;

        },2000)

    }

})()



var checkbox = document.getElementsByTagName('input');



for(var i=0,c;c=checkbox[i++];){

    c.onclick = function(){

        if(this.check === true){

            proxySynchronousFile(this.id);

        }

    }

}

在這些例子中，虛擬代理對請求進行擱置處理，等到合適的時機，對本體的接口進行調(diào)用，可以有效提升Web性能。

（3）緩存代理

緩存代理可以為開銷大的一些運算結(jié)果提供暫時性的存儲，如果再次傳進相同的參數(shù)是，直接返回結(jié)果，避免大量重復(fù)計算。

[javascript] view plain copy

/**創(chuàng)建緩存代理工廠 */

//將緩存代理與工廠模式相結(jié)合，創(chuàng)建多種運算的緩存代理

var mult = function(){

    var a = 1;

    for(var i=0;i<arguments.length;i++){

        a = a*arguments[i];

    }

    return a;

}

var plus = function(){

    var a = 0;

    for(var i=0; i<arguments.length; i++){

        a = a + arguments[i];

    }

    return a;

}

//高階函數(shù):將函數(shù)作為參數(shù)或者返回值的函數(shù)

var proxyFactory = function(fn) {

    var cache = {}; //參數(shù)緩存列表

    return function(){

        var args = Array.prototype.join.call(arguments,',');

        if(args in cache){

            return cache[args];

        }

        //參數(shù)屬性對應(yīng)的是函數(shù)

        return cache[args] = fn.apply(this,arguments);

    }

}



//測試

var proxyMult = proxyFactory(mult),

    proxyPlus = proxyFactory(plus);



console.log(proxyMult(1,2,3,4));

console.log(proxyMult(1,2,3,4));

console.log(proxyPlus(5,6,7,8));

console.log(proxyPlus(5,6,7,8));

什么情況下使用代理

當(dāng)我們需要使用的對象很復(fù)雜或者需要很長時間去構(gòu)造，這時就可以使用代理模式(Proxy)。例如：如果構(gòu)建一個對象很耗費時間和計算機資源，代理模式(Proxy)允許我們控制這種情況，直到我們需要使用實際的對象。一個代理(Proxy)通常包含和將要使用的對象同樣的方法，一旦開始使用這個對象，這些方法將通過代理(Proxy)傳遞給實際的對象。

比如上面的代碼：需要花很長的時間加載很多圖片，復(fù)雜的運算過程，頻繁的多次請求處理等；都可以用到代理模式。

小結(jié)

代理模式的一個好處就是對外部提供統(tǒng)一的接口方法，而代理類在接口中實現(xiàn)對真實類的附加操作行為，從而可以在不影響外部調(diào)用情況下，進行系統(tǒng)擴展。也就是說，我要修改真實角色的操作的時候，盡量不要修改他，而是在外部在“包”一層進行附加行為，即代理類。
藍(lán)藍(lán)設(shè)計( m.skdbbs.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

« 你真的了解盒模型么移動端界面設(shè)計規(guī)范（Android尺寸篇） »

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://m.skdbbs.com

存檔

js設(shè)計模式——代理模式proxy

什么是代理模式

如何實現(xiàn)代理模式

例子（上代碼）

分類

日歷

鏈接

個人資料

存檔