<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • js設計模式——代理模式proxy

    2018-4-14    seo達人

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    什么是代理模式

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

    (可以想象一下明星與經紀人的關系,明星是請求的本體,經紀人就是代理proxy)

    如何實現代理模式

    代理對象內部含有對本體對象的引用,因而可以與調用本體的相關方法;同時,代理對象提供與本體對象相同的接口,方便在任何時刻代理本體對象。

    例子(上代碼)

    代理模式的變體有很多,有:保護代理虛擬代理緩存代理、防火墻代理、遠程代理、智能引用代理、寫時復制代理。具體介紹前三種。

    (1)保護代理

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

    作用:過濾請求

    例如:權限的劃分和管理就是使用保護代理proxy來完成的。

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

    論壇管理者   :code為“002”

    系統管理者   :code為“003”

    游        客    :code為“000”

    論壇開放了四個基礎功能

    1,發帖

    2,帖子審核

    3,清除帖子

    4,留言

    游客不具備任何操作權限,注冊用戶只能發帖,論壇管理者可以審核以及刪帖操作,系統管理者具有所有功能權限。

    [javascript] view plain copy
    1. //用戶本體  
    2. function User(name,code){  
    3.     this.name = name ;  
    4.     this.code = code ;  
    5. } ;  
    6. User.prototype = {  
    7.     getName : function(){  
    8.         return this.name ;  
    9.     } ,  
    10.     getCode : function(){  
    11.         return this.code ;  
    12.     } ,  
    13.     post : function(){  
    14.         console.log("發帖子!") ;  
    15.     } ,  
    16.     remove : function(){  
    17.         console.log("刪除帖子!") ;  
    18.     } ,  
    19.     check : function(){  
    20.         console.log("審核帖子!") ;  
    21.     } ,  
    22.     comment : function(){  
    23.         console.log("回復帖子!") ;  
    24.     }  
    25. } ;  
    26. //代理論壇類  
    27. function Forum(user){  
    28.     this.user = user ;  
    29. } ;  
    30. Forum.prototype = {  
    31.     getUser : function(){  
    32.         return this.user ;  
    33.     } ,  
    34.     post : function(){  
    35.         if(this.user.getCode() == "001" || this.user.getCode() == "003"){  
    36.             return this.user.post() ;  
    37.         }  
    38.         console.log("沒權限發帖子!") ;  
    39.     } ,  
    40.     remove : function(){  
    41.         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  
    42.             return this.user.remove() ;  
    43.         }  
    44.         console.log("沒權限刪除帖子!") ;  
    45.     } ,  
    46.     check : function(){  
    47.         if(this.user.getCode() == "002" || this.user.getCode() == "003"){  
    48.             return this.user.check() ;  
    49.         }  
    50.         console.log("沒權限審核帖子!") ;  
    51.     } ,  
    52.     comment : function(){  
    53.         if(this.user.getCode() == "003"){  
    54.             return this.user.comment() ;  
    55.         }  
    56.         console.log("沒權限回復帖子!") ;  
    57.     }  
    58. } ;  
    59. //功能測試  
    60. function ForumClient(){  
    61.      this.run = function(){  
    62.          new Forum(new User("bigbear","003")).check() ; // 審核帖子  
    63.      }  
    64.  } ;  

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

    本案例來源:大熊君大話設計模式JavaScript

    (2)虛擬代理

    虛擬代理是將調用本體方法的請求進行管理,等到本體適合執行時,再執行。

    作用:將開銷很大的對象,延遲到真正需要它的時候再執行。

    比如:利用虛擬代理實現圖片預加載功能:

    [javascript] view plain copy
    1. /**在圖片預加載中實現虛擬代理 */  
    2. var myImage = (function(){  
    3.     var imageNode = document.createElement('img');  
    4.     document.body.appendChild(imageNode);  
    5.   
    6.     return {  
    7.         setSrc: function(src){  
    8.             imageNode.src = src;  
    9.         }  
    10.     }  
    11. })()  
    12.   
    13. //代理類  
    14. var proxyImage = (function(){  
    15.     var img = new Image();  
    16.     img.onload = function(){  
    17.         myImage.setSrc(this.src);  
    18.     }  
    19.   
    20.     return {  
    21.         setSrc: function(src){  
    22.             myImage.setSrc('本地的圖片地址');  
    23.             img.src = src; //緩存完畢之后會觸發img的onload事件  
    24.         }  
    25.     }  
    26. })()  

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

    [javascript] view plain copy
    1. /**虛擬代理合并http請求 */  
    2. //通過代理函數收集一段時間的請求,一次性發送給服務器,減少頻繁的網絡請求帶來的極大開銷  
    3. //模擬向服務器發送同步請求的函數  
    4. var synchronousFile = function(id){  
    5.     console.log('開始同步上傳文件,id為:'+id);  
    6. }  
    7.   
    8. //代理類收集一段時間的同步請求,統一發送  
    9. var proxySynchronousFile = (function(){  
    10.     var cache = [], //設置緩存數組  
    11.         timer; //定時器,通過閉包訪問定時器的引用  
    12.   
    13.     return function(id){  
    14.         cache.push(id);  
    15.         if(timer){  
    16.             return;  
    17.         }  
    18.         timer = setTimeout(function(){  
    19.             synchronousFile(cache.join(','));  
    20.             clearTimeout(timer);  
    21.             timer = null;  
    22.             cache.length = 0;  
    23.         },2000)  
    24.     }  
    25. })()  
    26.   
    27. var checkbox = document.getElementsByTagName('input');  
    28.   
    29. for(var i=0,c;c=checkbox[i++];){  
    30.     c.onclick = function(){  
    31.         if(this.check === true){  
    32.             proxySynchronousFile(this.id);  
    33.         }  
    34.     }  
    35. }  

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

    (3)緩存代理

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

    [javascript] view plain copy
    1. /**創建緩存代理工廠 */  
    2. //將緩存代理與工廠模式相結合,創建多種運算的緩存代理  
    3. var mult = function(){  
    4.     var a = 1;  
    5.     for(var i=0;i<arguments.length;i++){  
    6.         a = a*arguments[i];  
    7.     }  
    8.     return a;  
    9. }  
    10. var plus = function(){  
    11.     var a = 0;  
    12.     for(var i=0; i<arguments.length; i++){  
    13.         a = a + arguments[i];  
    14.     }  
    15.     return a;  
    16. }  
    17. //高階函數:將函數作為參數或者返回值的函數  
    18. var proxyFactory = function(fn) {  
    19.     var cache = {}; //參數緩存列表  
    20.     return function(){  
    21.         var args = Array.prototype.join.call(arguments,',');  
    22.         if(args in cache){  
    23.             return cache[args];  
    24.         }  
    25.         //參數屬性對應的是函數  
    26.         return cache[args] = fn.apply(this,arguments);  
    27.     }  
    28. }  
    29.   
    30. //測試  
    31. var proxyMult = proxyFactory(mult),  
    32.     proxyPlus = proxyFactory(plus);  
    33.   
    34. console.log(proxyMult(1,2,3,4));  
    35. console.log(proxyMult(1,2,3,4));  
    36. console.log(proxyPlus(5,6,7,8));  
    37. console.log(proxyPlus(5,6,7,8));  

    什么情況下使用代理

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

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

    小結

    代理模式的一個好處就是對外部提供統一的接口方法,而代理類在接口中實現對真實類的附加操作行為,從而可以在不影響外部調用情況下,進行系統擴展。也就是說,我要修改真實角色的操作的時候,盡量不要修改他,而是在外部在“包”一層進行附加行為,即代理類。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 伊人久久精品无码av一区| 精品无码一区二区三区爱欲| 亚洲无线观看国产精品| 久久国产精品-国产精品| 亚洲∧v久久久无码精品| 精品国产一区二区三区AV性色| 国产成人精品无码片区在线观看| 欧美精品黑人粗大| 国产AⅤ精品一区二区三区久久| 久久久无码精品亚洲日韩按摩 | 国产精品无码素人福利| 国产一区二区精品| 97精品久久天干天天天按摩| 无码国产精品一区二区免费式芒果 | 香蕉依依精品视频在线播放| AAA级久久久精品无码区| www.亚洲精品| 69久久夜色精品国产69| 麻豆成人久久精品二区三区免费 | 国自产精品手机在线观看视| 亚洲精品电影网| 精品视频在线v| 国产福利视精品永久免费| 久久国产亚洲精品无码| 日产精品久久久久久久| 亚洲精品成人片在线观看精品字幕| 久久精品亚洲男人的天堂| 精品久久久久一区二区三区| 国产精品第六页| 国内精品久久久久国产盗摄 | 在线电影国产精品| 欧美精品一本久久男人的天堂| 国产精品1区2区| 国产精品久久久久久搜索| 成人精品视频在线观看| 成人精品视频一区二区三区| 国产精品成人观看视频国产奇米| 精品人妻久久久久久888| 精品无码久久久久久尤物| 精品久久久久久无码中文字幕一区| 热re99久久精品国99热|