zoukankan      html  css  js  c++  java
  • Javascript观察者模式

      观察者模式(Observer Pattern),也被称为“发布/订阅模型(publisher/subscriber model)”。在这种模式中,有两类对象,分别是“观察者-Observer”和“目标对象-Subject”。目标对象中保存着一份观察者的列表,当目标对象的状态发生改变的时候就主动向观察者发出通知(调用观察者提供的方法),从而建立一种发布/订阅的关系。

    1.DOM中的观察者模式

      JavaScript是一个事件驱动型语言,观察者模式可谓随处可见,例如常用的一些onclick、 attachEvent 、addEventListener 都是观察者模式的具体应用。

    document.body.onclick = function(){
        alert('我是一个观察者,你一点击,我就知道了');
    }
    document.body.addEventListener('click',function(){
        alert('我也是一个观察者,你一点击,我就知道了');
    });

      其中,body是发布者,即目标对象,当被点击的时候,向观察者反馈这一事件;JavaScript中函数也是一个对象,click这个事件的处理函数(alert('...'))就是观察者,当接收到目标对象反馈来的信息时进行一定处理。

      这个例子中的发布/订阅关系是由JavaScript语言本身实现的,DOM的每个节点都可以作为Subject,提供了很多事件处理(Event handle)的接口,你只需要给这些接口添加监听函数(也就是Observer),就可以捕获触发的事件进行处理。

    2.自定义的对象上实现观察者模式

      对于DOM的事件操作我们直接使用实现好的就行,但是对于自己实现的对象,就需要自己实现发布/订阅模型了。

    /**
     * Created by tsy on 2015/12/25.
     */
    var ObseverPattern=function(){
    
        var observerPattern={
            callbacks:{},
    
            //增加观察者
            addObserver:function(mes,callback,observer){
                this.callbacks[mes]=this.callbacks[mes]||[];
                this.callbacks[mes].push({
                    scope:observer||this,
                    callback:callback
                })
            }
    
            //通知事件所有观察者
            publishObserver:function(mes,datas){
                this.callbacks[msg] = this.callbacks[msg] || [];
                for (var i = 0,len = this.callbacks[msg].length; i < len; i++) {
                    this.callbacks[msg][i].apply(this.callbacks[mes][scope],datas||[]);
                }
            }
    
            //删除某个观察者
            removeObserver:function(mes,observer){
                if(!this.callbacks[mes]) return;
                this.callbacks[mes]=this.callbacks[mes].filter(function(item,index,arr){
                    return item!=observer;
                });
            }
        }
    
    }
    
    var writer = new ObseverPattern();
    var reader = {
        read: function(){alert("我读了这本新书")}
    };
    writer.addObserver("newbook", function(){this.read()},reader);
    writer.publishObserver("newbook");  

       

      今天就先到这里吧,明天我将会使用观察者模型来实现简单的双向绑定。

  • 相关阅读:
    06python 中的递归函数(python函数)
    05python 的内置函数以及匿名函数(python函数)
    Elasticsearch6.x集群部署
    SuperMap iServer之CAS单点登陆搭建流程
    大数据系列文章-Hadoop的HDFS读写流程(二)
    大数据系列文章-Hadoop基础介绍(一)
    SuperMap iObjects for Spark使用
    Hadoop集群+Spark集群搭建(一篇文章就够了)
    Linux配置 xampp下的https证书(腾讯云申请)
    SuperMap iServer 9D HBase使用
  • 原文地址:https://www.cnblogs.com/shytong/p/5077316.html
Copyright © 2011-2022 走看看