js設(shè)計模式之代理模式及訂閱發(fā)布模式實例詳解
本文實例講述了js設(shè)計模式之代理模式及訂閱發(fā)布模式。分享給大家供大家參考,具體如下:
為啥將兩種模式放在一起呢?因為這樣文章比較長啊。
寫博客的目的我覺得首要目的是整理自己的知識點,進(jìn)而優(yōu)化個人所得知識體系。知識成為個人的知識,就在于能夠用自己的話表達(dá)同一種意義。
本文是設(shè)計模式系列文章的第二篇文章,第一篇:。
1,代理模式,只是學(xué)習(xí)了虛擬代理以及緩存代理,具體案例
1)虛擬代理
//業(yè)務(wù)代碼 var myImage = (function() { var imgNode = document.createElement("img"); document.body.appendChild(imgNode); return { setSrc: function(src) { console.log(1111); imgNode.src = src; } } })(); // 設(shè)計模式代碼 var ProxyImage = (function() { var img = new Image(); //這個img只是用來判斷圖片是否加載完成,加載完成之后修改圖片鏈接 img.onload = function() { console.log(this); myImage.setSrc(this.src); }; return { setSrc: function(src) { console.log(22); myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif"); img.src = src; } } })();
這個例子好吧,拿來主義。說一下自己的理解:上面的業(yè)務(wù)代碼實現(xiàn)的是將一個圖片dom插入到dom樹之中,代理模式則是通過創(chuàng)建一個新的img元素,通過判斷onload判斷是否加載完成,然后替換原有鏈接。
2)下面是緩存代理:
<script> //緩存代理 // 計算乘法 var mult = function() { var a = 1; for (var i = 0, ilen = arguments.length; i < ilen; i += 1) { a = a * arguments[i]; } return a; }; // 代理函數(shù) var proxyFunc = function(fn) { var cache = {}; // 緩存對象 return function() { //利用閉包 var args = Array.prototype.join.call(arguments); if (args in cache) { return cache[args]; // 使用緩存代理 } return cache[args] = fn.apply(this, arguments); } }; var proxyMult = proxyFunc(mult); console.log(proxyMult(1, 2, 3, 4)); // 24 console.log(proxyMult(1, 2, 3, 4)); // 緩存取 24 </script>
運(yùn)行結(jié)果:
就是利用閉包實現(xiàn)原有計算數(shù)據(jù)的緩存。
2,訂閱發(fā)布模式
<script> var Event = (function(){ var list = {}, listen, trigger, remove; //添加訂閱對象 listen = function(key,fn){ if(!list[key]) { list[key] = []; } list[key].push(fn); }; //觸發(fā)訂閱內(nèi)容 trigger = function(){ var key = Array.prototype.shift.call(arguments), fns = list[key]; if(!fns || fns.length === 0) { return false; } for(var i = 0, fn; fn = fns[i++];) { fn.apply(this,arguments); } }; //刪除訂閱內(nèi)容 remove = function(key,fn){ var fns = list[key]; if(!fns) { return false; } if(!fn) { fns && (fns.length = 0); }else { for(var i = fns.length - 1; i >= 0; i--){ var _fn = fns[i]; if(_fn === fn) { fns.splice(i,1); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); // 測試代碼如下: Event.listen("color",function(size) { console.log("尺碼為:"+size); // 打印出尺碼為42 }); Event.trigger("color",42); </script>
運(yùn)行結(jié)果:
本質(zhì)上,上述的發(fā)布訂閱只是一個數(shù)組的增刪改查。緩存下增刪改查。
本文結(jié)束。
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具:http://tools.jb51.net/code/WebCodeRun測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容還可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript創(chuàng)建對象的四種常用模式實例分析
這篇文章主要介紹了JavaScript創(chuàng)建對象的四種常用模式,結(jié)合實例形式分析了javascript使用工廠模式、構(gòu)造函數(shù)模式、原型模式及動態(tài)原型模式創(chuàng)建對象的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-01-01js實現(xiàn)prototype擴(kuò)展的方法(字符串,日期,數(shù)組擴(kuò)展)
這篇文章主要介紹了js實現(xiàn)prototype擴(kuò)展的方法,實例分析了JavaScript針對字符串、日期、數(shù)組等的prototype擴(kuò)展相關(guān)技巧,需要的朋友可以參考下2016-01-01遨游,飛飛,IE,空中網(wǎng) 瀏覽器無提示關(guān)閉方法
遨游,飛飛,IE,空中網(wǎng) 瀏覽器無提示關(guān)閉方法,需要的朋友可以參考下。2011-07-07JavaScript之IE的fireEvent方法詳細(xì)解析
剛開始我以為是會跟平時使用onclick()一樣,沒想到最近在寫javascript入門ppt的時候發(fā)現(xiàn)了,原來自己太自以為是了!看來還有很多javascript的細(xì)節(jié)沒有掌握好啊2013-11-11