最近在重温设计模式的一些知识，可能是因为之前曾经看过，这次看起来颇觉收货比上次深入，以观察者模式而言，之前也写过一个文章纪录，摘代码如下：
var listener = { list : [], //用于保存B的addItem C的addNum等。 publish : function(name,args){ if(!this.list[name]){ this.list[name] = []; } var list = this.list[name]; if(list.length > 0){ for(var i=0; i<list.lengt; i++){ list[i](args); } } }, subscribe : function(name,callback){ if(!this.list[name]){ this.list[name] = []; } this.list[name].push(callback); return len; //当前callback在list中的顺序，用于unsubscribe; }, unsubscribe : function(name,n){ this.list[name].splice(n); } }
这个是之前的认识，也是网上常见的方式。
周末在网上浏览的时候，看到了另一种类似的方式，我觉得有点意思，就自己写了一个，上午调试了一下，确实也没问题，现在纪录下来。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> #a,#b,#c{ width:500px; height:170px; border:1px solid #666; padding:10px; } .content{ width : 200px; height:100px; } </style> </head> <body> <div id="a"> <textarea id="content" class="content"></textarea> <br/> <input type="button" id="btn" value="publish info" /> </div> <div id="b"></div> <div id="c" num="0">0</div> </body> <script> var Publisher = function(){ this.customers = []; } Publisher.prototype.broadcast = function(data){ var list = this.customers; if(list.length == 0){ return; } for(var i=0; i<list.length; i++){ list[i].receive(list[i].callback,data); } } var Customer = function(name){ this.name = name; } Customer.prototype.subscribe = function(publisher){ var customers = publisher.customers; var isExist = false; for(var i=0,len=customers.length; i<len; i++) { if(customers[i] == this) { isExist = true; break; } } if(!isExist) { customers.push(this); } return this; } Customer.prototype.callback = function(){} Customer.prototype.receive = function(callback,data){ if(data){ this.callback(data); }else{ this.callback(); } } var a = new Publisher(); var b = new Customer("b"); var c = new Customer("c"); b.subscribe(a); c.subscribe(a); var id = function(id){ return document.getElementById(id); } var insertInfo = function(info){ id("b").innerHTML += "<p>" + info +"</p>"; } var changeNum = function(){ var num = id("c").getAttribute("num"); num = parseInt(num); num += 1; id("c").setAttribute("num",num); id("c").innerHTML = num; } b.callback = insertInfo; c.callback = changeNum; id("btn").onclick = function(){ var value = id("content").value; if(!value){ return; } a.broadcast(value); } </script> </html>
最主要的是js部分，我在jsbin上跑了一下，没问题，附上jsbin的链接。
http://jsbin.com/cofilu/6
http://jsbin.com/cofilu/6/edit
我觉得中介者模式也是应用比较广泛的一种模式，网上的例子看了几个 觉得都不太好，最近准备自己动手写一个。