最近，小编重新回顾了百度前端大牛张容铭的《JavaScript设计模式》一书，不得不推荐下这本书，因为讲得实在太精彩了，很生动，可谓是书回价值O(∩_∩)O，玩过Angularjs、Reactjs，Redux，了解过RxJS，实现原理都用到观察者模式，可见其重要性，以下便是我的学习总结~
观察者模式（Observer）: 又称为发布-订阅者模式或者消息机制，主要作用是为了解决类或对象之间的耦合，解耦两个相互依赖的对象，使其依赖观察者的消息机制。适用场景比如团队成员用独立闭包模块进行模块开发，为了避免新模块与旧模块的严重耦合，即可采用观察者模式。
实现思想代码如下，引用自《JavaScript设计模式》一书
1 var Observer = (function(){ 2 //将消息容器作为静态私有变量存储，是为了防止消息队列暴露而被篡改 3 var __message = {}; 4 return { 5 //注册信息接口 6 regist:function(type,fn){ 7 if(typeof __message[type] === 'undefined'){ 8 __message[type] = [fn]; 9 }else{ 10 __message[type].push(fn); 11 } 12 }, 13 //发布信息接口 14 fire:function(type,args){ 15 if(!__message[type]) 16 return; 17 var events = { 18 type:type, 19 args:args || {} 20 }, 21 i = 0, 22 len = __message[type].length; 23 for(;i < len;i++){ 24 __message[type][i].call(this,events) 25 } 26 }, 27 //移除信息接口 28 remove:function(type,fn){ 29 if(__message[type] instanceof Array){ 30 var i = __message[type].length - 1; 31 for(;i > 0;i--){ 32 __message[type][i] === fn && __message[type].splice(i,1); 33 } 34 } 35 } 36 } 37 })(); 38 // 注册接口:将订阅者注册的消息推入消息队列中 39 // 发布接口:当观察者发布一个消息时将所有订阅者订阅的消息一次执行。 40 // 移除接口:将订阅者注销的消息从消息队列中注销
笔者室友是一位前端大牛，他的博文中也谈到了观察者模式的JS实现，思想是一样但代码实现有点不一样，于是我借用他的demo改造成自己的实现，代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 </head> 8 9 <body> 10 <div class="ez-led" id="clock">00:00:00</div> 11 12 <script type="text/javascript"> 13 var Observer = (function(){ 14 //将消息容器作为静态私有变量存储，是为了防止消息队列暴露而被篡改 15 var __message = {}; 16 return { 17 //注册信息接口 18 regist:function(type,fn){ 19 if(typeof __message[type] === 'undefined'){ 20 __message[type] = [fn]; 21 }else{ 22 __message[type].push(fn); 23 } 24 }, 25 //发布信息接口 26 fire:function(type,args){ 27 if(!__message[type]) 28 return; 29 var events = { 30 type:type, 31 args:args || {} 32 }, 33 i = 0, 34 len = __message[type].length; 35 for(;i < len;i++){ 36 __message[type][i].call(this,events) 37 } 38 }, 39 //移除信息接口 40 remove:function(type,fn){ 41 if(__message[type] instanceof Array){ 42 var i = __message[type].length - 1; 43 for(;i >= 0;i--){ 44 __message[type][i] === fn && __message[type].splice(i,1); 45 } 46 } 47 } 48 } 49 })(); 50 51 window.onload = function() { 52 var elClock = document.getElementById('clock'); 53 var getTime = function() { 54 var _ = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09'], //补零 55 d = new Date(), 56 h = d.getHours(), 57 m = d.getMinutes(), 58 s = d.getSeconds(); 59 return [_[h] || h, _[m] || m, _[s] || s].join(":"); 60 } 61 elClock.textContent = getTime(); 62 63 function renderClock(data){ 64 elClock.textContent = data.args.msg; 65 } 66 67 //注册渲染时钟消息 68 Observer.regist('renderClockMessage',renderClock) 69 70 setInterval(function(){ 71 //每隔1s钟，发布渲染时钟消息 72 Observer.fire('renderClockMessage',{msg:getTime()}) 73 },1000) 74 } 75 </script> 76 </body> 77 </html>
参考注明：