>[success] # 封裝一個全局的發布訂閱對象 ~~~ 1.假設我們有3個js文件，事件觸發在a.js內，而響應該事件的在b.js和c.js內， 要是用常規調用的方法的話，就要把b.js和c.js的方法傳到a.js內。這是一個非常麻煩 的操作。而發布-訂閱模式是將調度中心掛在了全局，我們只管調用調度中心相應的方法注冊和訂閱。 2.這樣就可以做到全局通信，甚至跨模塊通信 ~~~ >[danger] ##### 封裝成全局 ~~~ var Event = (function(){ var clientList = {}, listen, trigger, remove; listen = function( key, fn ){ if ( !clientList[ key ] ){ clientList[ key ] = []; } clientList[ key ].push( fn ); }; trigger = function(){ var key = Array.prototype.shift.call( arguments ), fns = clientList[ 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 = clientList[ key ]; if ( !fns ){ return false; } if ( !fn ){ fns && ( fns.length = 0 ); }else{ for ( var l = fns.length - 1; l >=0; l-- ){ var _fn = fns[ l ]; if ( _fn === fn ){ fns.splice( l, 1 ); } } } }; return { listen: listen, trigger: trigger, remove: remove } })(); Event.listen( 'squareMeter88', function( price ){ // 小紅訂閱消息 console.log( '價格= ' + price ); // 輸出：'價格=2000000' }); Event.trigger( 'squareMeter88', 2000000 ); // 售樓處發布消息 ~~~ >[danger] ##### 將上面代碼轉換成es6 ~~~ 1.其實這里可以考慮單例模式，全局共享一個實例，這里就沒有具體改成單例模式， 詳細的可以根據單例模式自己改進 ~~~ ~~~ /** * 1.發布者需要一個緩存列表 * 2.需要一個登記需要訂閱對象的方法 * 3.需要一個發布消息的方法 * 4.需要一個刪除不在需要訂閱的方法 * **/ class Event{ constructor(){ this.clientList = {} } // 保存訂閱對象方法 listen(key,fn){ if(!this.clientList[key]){ this.clientList[key] = [] } this.clientList[key].push(fn) } trigger(key,...args){ let fns = this.clientList[key] if(!fns || fns.length === 0){ return false } fns.forEach(fn=>{ fn(...args) }) } remove(key, fn){ let fns = this.clientList[key] if(!fns){ return false } // 如果不指定要刪除的就默認刪除全部 if(!fn){ fns && fns(fns.length =0) }else{ for ( var l = fns.length - 1; l >=0; l-- ){ var _fn = fns[ l ]; if ( _fn === fn ){ fns.splice( l, 1 ); } } } } } ~~~