javascript 設計模式 -- 發布/訂閱模式
阿新 • • 發佈:2017-07-01
length 內部 設計模式 name 不能 data lis 設計 class
直接上代碼:
index.html :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>設計模式</title> </head> <body> <div id="box"> <div>{{message}}</div> </div> <!-- // 全局: // 低耦合,高內聚 // 繼承:JS並沒有繼承這個概念(偽繼承),ajax沒有跨域這個概念一樣 // 類式繼承、原型式繼承 // 代碼重用高:方法解耦合高(獨立性)、方法盡量獨立和組合都能夠使用 --> <script src="vue.js"></script> <script> /*// 類式繼承 var father = function() { // 爸爸幹爸爸的活 this.age = 50; this.say = function(){ console.log(11); } } var child = function(){ // 兒子幹兒子的活 this.name = "think"; father.call(this); // call apply } var man = new child(); man.say();*/ // 原型式繼承 var father = function(){ // } father.prototype.a = function(){ console.log(2); } var child = function(){ // } // 子繼承父屬性 child.prototype = new father(); var man = new child(); man.a(); // jquery中所有方法都是可以連綴的 $(".box").html().css({"background":"yellow"}) // new對象不能直接使用 局部對象所有對象外部都無法訪問 window.jQuery = window.$ = jQuery // 調用之後才 new new Vue({ // el:"#box", // 元素 data:{ message:"hello", arr:[1,2,3], num:0 }, created: function(){ // vue構造函數 var _this = this; setInterval(function(){ // 不屑分析 _this.arr.push("DN"+(_this.num+1)); // 操作內部數據時,不會整個渲染更新(DIFF算法:區分我們哪個地方有區別) _this.num += 1; // 動態數據追蹤,訂閱者模式 // 值:更新的時候,元素是存在的,無需創建元素(document.createElement) // 數組增加:更新的時候,元素不存在,需要創建(document) },5000); } }) //訂閱者模式 // 每次都會輸出所有的信息 /*var shoeObj = {}; shoeObj.list = []; // 存放訂閱者 shoeObj.listen = function(fn){ // 訂閱一次,增加數據一次 shoeObj.list.push(fn); //訂閱消息添加到緩存列表 } // 效果性的開發,只是基礎 shoeObj.trigger = function(){ // 發布消息 for(var i=0,fn;fn = this.list[i++];){ fn.apply(this,arguments); // arguments } } // 訂閱 shoeObj.listen(function(color,size){ console.log(color); console.log(size); }); shoeObj.listen(function(color,size){ console.log("2" + color); console.log("2" + size); }); shoeObj.trigger("紅色",20); shoeObj.trigger("黃色",20);*/ // 修改後 /*var shoeObj = {}; shoeObj.list = []; // 存放訂閱者 shoeObj.listen = function(key,fn){ // 訂閱增加一個名字,方便區分訂閱者信息 if(!this.list[key]){ shoeObj.list[key] = []; //訂閱消息添加到緩存列表 } this.list[key].push(fn); } // 效果性的開發,只是基礎 shoeObj.trigger = function(){ //根據訂閱者名字發布消息 var key = Array.prototype.shift.call(arguments); // // arguments: 參數,取出消息類型的名稱 var fns = this.list[key]; // 如果沒有訂閱過該消息,則返回 if(!fns || fns.length === 0){ return; } for(var i=0,fn;fn = fns[i++];){ fn.apply(this,arguments); } } // 訂閱 shoeObj.listen("red",function(size){ console.log(size); }); shoeObj.listen("yellow",function(size){ // yellow改為動態參數,vuejs的動態更新出來一半 console.log("2" + size); }); shoeObj.trigger("red",40); shoeObj.trigger("yellow",40);*/ // 封裝 var event = { list:[], // 訂閱的人數是不固定的 listen:function(key,fn){ if(!this.list[key]){ this.list[key] = [];// 清空 } } } var shoeObj = {}; shoeObj.list = []; // 存放訂閱者 shoeObj.listen = function(key,fn){ // 訂閱增加一個名字,方便區分訂閱者信息 if(!this.list[key]){ shoeObj.list[key] = []; //訂閱消息添加到緩存列表 } this.list[key].push(fn); } // 效果性的開發,只是基礎 shoeObj.trigger = function(){ //根據訂閱者名字發布消息 var key = Array.prototype.shift.call(arguments); // // arguments: 參數,取出消息類型的名稱 var fns = this.list[key]; // 如果沒有訂閱過該消息,則返回 if(!fns || fns.length === 0){ return; } for(var i=0,fn;fn = fns[i++];){ fn.apply(this,arguments); } } // 訂閱 shoeObj.listen("red",function(size){ console.log(size); }); shoeObj.listen("yellow",function(size){ // yellow改為動態參數,vuejs的動態更新出來一半 console.log("2" + size); }); shoeObj.trigger("red",40); shoeObj.trigger("yellow",40); var initEvent = function(){ // 讓所有普通對象都具有發布訂閱功能 for(var i in event){ // 對象可以是多個 obj[i] = event[i]; } } var shoeObj = {}; initEvent(shoeObj); shoeObj.listen("red",function(size){ console.log(size); }) shoeObj.trigger("red",40); // 取消訂閱 event.remove = function(key,fn){ var fns = this.list[key]; if(!fns){ return false; } if(!fn){ fn && (fns.length = 0); }else{ for(var i = fns.length-1;i>=0;i--){ // } } } // RN </script> </body> </html>
.
javascript 設計模式 -- 發布/訂閱模式