observer

lilythy · lilythy · commit bc7b78d30305 · 2016-04-27T18:19:28.000+08:00
diff --git a/Observer/observer.html b/Observer/observer.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<body>
+<script type="text/javascript">
+    document.body.addEventListener('click',function(){
+        alert(2);
+    },false);
+
+    document.body.click();           // 模拟用户点击
+
+    document.body.addEventListener( 'click', function(){
+        alert(3);
+    }, false );
+    document.body.addEventListener( 'click', function(){
+        alert(4);
+    }, false );
+    document.body.click();          // 模拟用户点击
+
+
+    var salesOffices = {};         // 定义售楼处
+    salesOffices.clientList = [];    // 缓存列表，存放订阅者的回调函数
+    salesOffices.listen = function(fn){    // 增加订阅者
+        this.clientList.push(fn);             // 订阅的消息添加进缓存列表
+    };
+    salesOffices.trigger = function(){       // 发布消息
+        for(var i = 0, fn;fn = this.clientList[i++];){
+            fn.apply(this,arguments);          // arguments 是发布消息时带上的参数
+        }
+    };
+
+    //下面我们来进行一些简单的测试：
+    salesOffices.listen(function(price,squareMeter){       // 小明订阅消息
+        console.log( '价格= ' + price );
+        console.log('价格= ' + price);
+        console.log('squareMeter = ' + squareMeter);
+    });
+    salesOffices.trigger( 2000000, 88 ); // 输出：200 万，88 平方米
+    salesOffices.trigger( 3000000, 110 ); // 输出：300 万，110 平方米
+
+
+    var salesOffices1 = {};  //定义售楼处
+    salesOffices1.clientList = [];    // 缓存列表，存放订阅者的回调函数
+
+    salesOffices1.listen = function(key,fn){
+        if(!this.clientList[key]){      // 如果还没有订阅过此类消息，给该类消息创建一个缓存列表
+            this.clientList[key] = [];
+        }
+        this.clientList[key].push(fn);      // 订阅的消息添加进消息缓存列表
+    };
+
+    salesOffices1.trigger = function(){    //发布消息
+        var key = Array.prototype.shift.call(arguments),    // 取出消息类型
+            fns = this.clientList[key];       // 取出该消息对应的回调函数集合
+        if(!fns || fns.length === 0){
+            return false;
+        }
+        for(var i= 0,fn;fn = fns[i++];){
+            fn.apply(this,arguments);
+        }
+    };
+
+    salesOffices1.listen('squareMeter88',function(price){
+        console.log('价格= ' + price);
+    });
+    salesOffices1.listen('squareMeter110',function(price){
+        console.log('价格= ' + price);
+    });
+
+    salesOffices1.trigger('squareMeter88',2000000);
+    salesOffices1.trigger('squareMeter110',3000000);
+
+
+    //所以我们把发布—订阅的功能提取出来，放在一个单独的对象内：
+    var event = {
+        clientList:[],
+        listen:function(key,fn){
+            if(!this.clientList[key]){
+                this.clientList[key] = [];
+            }
+            this.clientList[key].push(fn);      // 订阅的消息添加进缓存列表
+        },
+        trigger:function(){
+            var key = Array.prototype.shift.call(arguments),
+                fns = this.clientList[key];
+            if(!fns || fns.length === 0){        // 如果没有绑定对应的消息
+                return false;
+            }
+            for(var i = 0, fn;fn = fns[i++];){
+                fn.apply(this.arguments);
+            }
+        }
+    };
+
+    var installEvent = function(obj){
+        for(var i in event){
+            obj[i] = event[i];
+        }
+    };
+
+    //再来测试一番，我们给售楼处对象salesOffices 动态增加发布—订阅功能：
+    var salesOffices2 = {};
+    installEvent(salesOffices2);
+    salesOffices2.listen('squareMeter88',function(price){
+        console.log('价格= ' + price);
+    });
+    salesOffices2.listen('squareMeter100',3000000);
+    salesOffices2.listen('squareMeter88',2000000);
+
+
+    event.remove = function(key,fn){
+        var fns = this.clientList[key];
+        if(!fns){
+            return false;         // 如果key 对应的消息没有被人订阅，则直接返回
+        }
+        if(!fn){
+            fns && (fns.length = 0);    // 如果没有传入具体的回调函数，表示需要取消key 对应消息的所有订阅
+        }else{
+            for(var l = fns.length - 1;l>= 0;l--){   // 反向遍历订阅的回调函数列表
+                var _fn = fns[l];
+                if(_fn === fn){
+                    fns.splice(l,1);                 // 删除订阅者的回调函数
+                }
+            }
+        }
+    };
+
+    var salesOffices3 = {};
+    var installEvent = function(obj){
+        for(var i in event){
+            obj[i] = event[i];
+        }
+    }
+    installEvent(salesOffices3);
+
+    salesOffices3.listen('squareMeter88',fn1 = function(price){   // 小明订阅消息
+        console.log('价格= ' + price);
+    });
+    salesOffices3.listen('squareMeter88',fn2 = function(price){   // 小红订阅消息
+        console.log('价格= ' + price);
+    });
+
+    salesOffices3.remove('squareMeter88',fn1);      // 删除小明的订阅
+    salesOffices3.trigger('squareMeter88',2000000);  // 输出：2000000
+</script>
+</body>
+</html>
