首页 > 代码库 > 观察者模式的新纪录

观察者模式的新纪录

2024-07-13 05:56:20   220人阅读

最近在重温设计模式的一些知识，可能是因为之前曾经看过，这次看起来颇觉收货比上次深入，以观察者模式而言，之前也写过一个文章纪录，摘代码如下：

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

我觉得中介者模式也是应用比较广泛的一种模式，网上的例子看了几个 觉得都不太好，最近准备自己动手写一个。


联系
我们