标签：
观察者模式又被称为发布-订阅模型或消息机制。
基本思想是观察者一个静态（或全局）对象，为大家提供三个方法：发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息，当发布者发布某些消息的时候对应的订阅者就收到消息了。订阅者也可以取消订阅。
1 var Observer = (function(){ 2 var _messages = {}; 3 return { 4 regist: function(type,fn) { //订阅消息 5 if(typeof _messages[type] === ‘undefined‘){ 6 _messages[type] = [fn]; 7 } else { 8 _messages[type].push(fn); 9 } 10 }, 11 fire: function(type,args){ //发布消息 12 if(!_messages[type]) 13 return; 14 var events = { 15 type: type, 16 args: args; 17 }; 18 19 _messages[type].forEach(function(item){ 20 item.call(this,events); //这里的this不太明 21 }); 22 23 }, 24 remove: function(type,args){ //取消订阅 25 if(_messages[type] instanceof Array){ 26 _messages[type].lastIndexOf(fn) && _messages[type].splice(i,1); 27 /*var i = _messages[type].length-1; 28 for(; i>-1; i--){ 29 _messages[type][i] === fn && _messages[type].splice(i,1); 30 }*/ 31 } 32 } 33 } 34 35 })();
使用场景，用户在留言评论的同时用户消息栏也相应改变。这里订阅者是评论模块和消息模块，发布者是用户操作模块。
1 //评论模块： 2 (function(){ 3 Observer.regist(‘addCommentMessage‘,addMsg); 4 Observer.regist(‘addCommentMessage‘,removeMsg); 5 function addMsg(){ 6 //... 7 } 8 function removeMsg(){ 9 //... 10 } 11 })(); 12 13 //消息模块 14 (function(){ 15 Observer.regist(‘addCommentMessage‘,changeMsgNum); 16 Observer.regist(‘removeCommentMessage‘,changeMsgNum); 17 function changeMsgNum(){ 18 //... 19 } 20 })(); 21 22 //用户操作模块 23 (function(){ 24 $("#submitBtn").onclick = function(){ 25 //... 26 Observer.fire(‘addCommentMessage‘,{ 27 text: text.value, 28 num: 1 29 }); 30 }; 31 $("#deleteBtn").onclick = function(){ 32 //... 33 Observer.fire(‘removeCommentMessage‘,{ 34 num: -1 35 }); 36 }; 37 })();
参考：
张容铭《JavaScript设计模式》
标签：
原文地址：http://www.cnblogs.com/feitan/p/5348406.html
