国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

Javascript的觀察者模式

來源:懂視網 責編:小采 時間:2020-11-27 20:01:03
文檔

Javascript的觀察者模式

Javascript的觀察者模式:這次給大家帶來Javascript的觀察者模式,Javascript觀察者模式的注意事項有哪些,下面就是實戰案例,一起來看一下。觀察者(又稱發布訂閱)模式定義了對象間的一種一對多的依賴關系,以便一個對象的狀態發生變化時,所有依賴于它的對象都得到通知并自動刷新。
推薦度:
導讀Javascript的觀察者模式:這次給大家帶來Javascript的觀察者模式,Javascript觀察者模式的注意事項有哪些,下面就是實戰案例,一起來看一下。觀察者(又稱發布訂閱)模式定義了對象間的一種一對多的依賴關系,以便一個對象的狀態發生變化時,所有依賴于它的對象都得到通知并自動刷新。

這次給大家帶來Javascript的觀察者模式,Javascript觀察者模式的注意事項有哪些,下面就是實戰案例,一起來看一下。

觀察者(又稱發布訂閱)模式定義了對象間的一種一對多的依賴關系,以便一個對象的狀態發生變化時,所有依賴于它的對象都得到通知并自動刷新。

當用戶在網頁執行一些操作(如點擊)后就需要執行一些預定的事件(如表單提交、跳轉頁面)

優點:在發布者和訂閱者間耦合性降低

缺點:弱化了對象間的關系,不利于代碼的維護和理解

實現思路

確定發布者

定義發布者緩存列表,存儲回調函數通知訂閱者

發布消息依次執行緩存列表回調函數

簡單實現

let event = {};
event.list = [];//增加訂閱者event.listen = function(fn){
 event.list.push(fn);
}//發布消息event.trigger = function(){ for(var i = 0,fn; fn = this.list[i++];) {
 fn.apply(this,arguments); 
 }
}let click = function(){ console.log('event:click');
}let hover = function(){ console.log('event:hover');
}
event.listen(click);
event.listen(hover);
event.trigger();//打印:‘event:click’'event:hover'

完善觀察者模式

let Event = (function(){ var list = {},
 listen,
 trigger,
 remove;
 listen = function(key,fn){ list[key] = list[key]||[]; list[key].push(fn);
 };
 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);
 }
 };
 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('click', function(type) {
 console.log('event: ' + type +' click'); 
});
Event.trigger('click' , 'button');//打印'event: button click'

觀察者模式可以用于模塊間通訊,訂閱用戶的事件、狀態,觸發執行相應的邏輯處理。

相信看了本文案例你已經掌握了方法,更多精彩請關注Gxl網其它相關文章!

推薦閱讀:

Javascript的代理模式

Javascript的策略模式

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

Javascript的觀察者模式

Javascript的觀察者模式:這次給大家帶來Javascript的觀察者模式,Javascript觀察者模式的注意事項有哪些,下面就是實戰案例,一起來看一下。觀察者(又稱發布訂閱)模式定義了對象間的一種一對多的依賴關系,以便一個對象的狀態發生變化時,所有依賴于它的對象都得到通知并自動刷新。
推薦度:
標簽: 模式 js javascript
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 国产精品视频一区二区三区w | 国产高清不卡一区二区三区 | 欧美日韩国产一区二区 | 久久大香香蕉国产免费网vrr | 日本国产最新一区二区三区 | 久久久久国产成人精品亚洲午夜 | 美国一级大黄大色毛片视频一 | 日韩视频网 | 欧美高清不卡 | 亚洲1页| 91久久国产综合精品女同我 | 欧美精品第二页 | 欧美日韩a| 国内在线视频 | 伊人久久影院 | 日本欧美一区二区三区 | 中文字幕一区二区三区久久网站 | 日韩精品一区二区三区国语自制 | 久久久国产成人精品 | 一区二区三区电影 | 高清 国产 日韩 欧美 | 久久国产精品电影 | 亚洲va在线va天堂va四虎 | 国产精品一区二区av | a一级毛片| 一级黄网站 | 香港一级a毛片在线播放 | 人善交另类欧美重口另类 | 欧美成人一区二区三区 | 中文亚洲欧美日韩无线码 | 国产亚洲欧美精品久久久 | 国产精品久久久久… | 国产成人精品视频在放 | 亚洲一区二区在线成人 | 国产欧美日韩在线播放 | 日韩视频在线观看 | 在线视频观看国产 | 亚洲视频在线观看免费 | 另类欧美亚洲 | 国产日韩在线观看视频网站 | 国产一区二区高清视频 |