Hello Js

导航

观察者模式的新纪录

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

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

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

posted on 2014-07-21 13:34  苏拉A梦  阅读(252)  评论(0)  编辑  收藏  举报