快捷導(dǎo)航

輕松掌握J(rèn)avaScript代理模式

更新時(shí)間：2016年08月26日 08:45:07 作者：蘇福

這篇文章主要幫助大家輕松掌握J(rèn)avaScript代理模式，什么是代理模式？代理的用途，感興趣的小伙伴們可以參考一下

在面向?qū)ο笤O(shè)計(jì)中，有一個(gè)單一職責(zé)原則，指就一個(gè)類（對(duì)象、函數(shù)）而言，應(yīng)該僅有一個(gè)引起它變化的原因。如果一個(gè)對(duì)象承擔(dān)了過多的職責(zé)，就意味著它將變得巨大，引起它變化的原因就多，它把這些職責(zé)耦合到了一起，這種耦合會(huì)導(dǎo)致程序難于維護(hù)和重構(gòu)。

這時(shí)候，我們可以把該對(duì)象（本體）的其中一部分職責(zé)分離出來給一些第三方對(duì)象去做，本體只管自己的一些核心職責(zé)，這些第三方對(duì)象就稱作代理。代理對(duì)象可以作為對(duì)象（也叫“真正的主體”）的保護(hù)者，讓真正的主體對(duì)象做盡量少的工作。在代理設(shè)計(jì)模式中，一個(gè)對(duì)象充當(dāng)了另一個(gè)對(duì)象的接口的角色。

通常代理和本體的接口應(yīng)該保持一致性，這樣當(dāng)不需要代理的時(shí)候，用戶可直接訪問本體。

當(dāng)我們不方便直接訪問一個(gè)對(duì)象時(shí)，就可以考慮給該對(duì)象招一個(gè)代理。

代理可用于：圖片預(yù)加載、合并HTTP請(qǐng)求（代理收集一定時(shí)間內(nèi)的所有HTTP請(qǐng)求，然后一次性發(fā)給服務(wù)器）、惰性加載（通過代理處理和收集一些基本操作，然后僅在真正需要本體的時(shí)候才加載本體）、緩存代理（緩存請(qǐng)求結(jié)果、計(jì)算結(jié)果）等

例子1：圖片預(yù)加載

 var myImage = (function(){
 var imgNode = document.createElement('img');
 document.body.appendChild(imgNode);
 return {
  setSrc:function(src){
   imgNode.src = src;
  }
 }
})();
//代理函數(shù)
var proxyImage = (function(){
 var img = new Image;
 img.onload = function(){
  myImage.setSrc(this.src);
 }
 return{
  setSrc:function(src){
   myImage.setSrc('loading.gif');
   img.src = src;
  }
 }
})();

proxyImage.setSrc('show.jpg');

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解
下面小編就為大家?guī)硪黄猍js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
ComboBox（下拉列表框）通過url加載調(diào)用遠(yuǎn)程數(shù)據(jù)的方法
這篇文章主要介紹了ComboBox（下拉列表框）通過url加載調(diào)用遠(yuǎn)程數(shù)據(jù)的方法 ,需要的朋友可以參考下
2017-08-08
詳解webpack引用jquery（第三方模塊）的三種辦法
這篇文章主要介紹了詳解webpack引用jquery（第三方模塊）的三種辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
小程序如何構(gòu)建骨架屏
最近在移動(dòng)端上面看到不同于菊花圖的加載方式，就是這篇文章需要分享的Skeleton Screen，中文稱之為"骨架屏"，下面我們來簡(jiǎn)單了解一下吧
2019-05-05
fmt:formatDate的輸出格式詳解
本篇文章主要是對(duì)fmt:formatDate的輸出格式進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
小程序清理本地緩存的方法
這篇文章主要介紹了小程序清理本地緩存的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
基于js對(duì)象,操作屬性、方法詳解
下面小編就為大家?guī)硪黄趈s對(duì)象,操作屬性、方法詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
layui之select的option疊加問題的解決方法
下面小編就為大家分享一篇layui之select的option疊加問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
javascript實(shí)現(xiàn)簡(jiǎn)單的可隨機(jī)變色網(wǎng)頁計(jì)算器示例
這篇文章主要介紹了javascript實(shí)現(xiàn)簡(jiǎn)單的可隨機(jī)變色網(wǎng)頁計(jì)算器,具有基本的四則運(yùn)算與背景色隨機(jī)變換功能,需要的朋友可以參考下
2016-12-12
JavaScript利用el-table實(shí)現(xiàn)繪制熱度表
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用el-table實(shí)現(xiàn)繪制熱度表，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-03-03