设计模式学习_javascript_观察者模式

什么是观察者模式

观察者模式，用于一和多之间，一改变的时候通知多进行相应的变化。现在我们通过一个栗子来看一下观察者模式是怎样的。

下面这个demo要是实现的效果就是通过ADD按钮添加CheckBox显示在下面的灰色div中，然后上面的CheckBox选择的时候下面的CheckBox进行相应的操作。可能项目不是很完整，基本上看一个思想就好。

下面来分析 一下

这里当最上面的CheckBox选中的时候就会通知观察者们，他们进行相应的处理，是选中还是不选中还是其他操作。下面看一下代码。

var ObserverPattern =(
        function (){

            //这是被观察者，它内部有一个ObserVerList数组用来存储观察者，还有一个方法用来移除观察者，最后有一个notify去通知观察者进行相应的操作。
            var Subject = function(){
            var ObserVerList=[];
            this.pushObserver = function(observer){

            ObserVerList.push(observer);
                return true;
            };
            this.removeObserver = function(index){

                if(index>=pushObserver.length||index<0)
                return false;
                ObserVerList.splice(index,1);

                return true;
            };
            this.notify = function(context){
                //通知所有的观察者
                ObserVerList.forEach(function(item){
                    console.log("context"+context);
                    item.update(context);
                });
              return true;
            };
        };

        //这是观察者，可以看成一个接口，update由观察者自己定义
        var Observer= function(){
            this.update= null;
        };

        //继承
        var extend =function(obj,extension){

            for(item in obj)
            extension[item] =obj[item];

        };
        return {
            Subject:Subject,
            Observer:Observer,
            extend:extend
        }

    })();

下面看一下具体的观察模式：

  window.onload=function(){


    var checkAll=document.getElementById("checkAll");
    var addBtn=document.getElementById("addBtn");
    var showCheck=document.getElementById("showCheck");

    ObserverPattern.extend(new ObserverPattern.Subject(),checkAll);
     var i=0;//当做CheckBox的下标
    addBtn.onclick=function(){
         i++;

        var chk=document.createElement("input");
        var brLine=document.createElement("br");
        chk.type="checkbox";
        showCheck.appendChild(chk);
        showCheck.appendChild(brLine);
        ObserverPattern.extend(new ObserverPattern.Observer(),chk);

        //添加到观察者列表
        checkAll.pushObserver(chk);


        chk.update=(function(i){
            var checkChoose = function(context){
                this.checked=context;
            }
            var checkUnChoose = function(context){
                this.checked=!context;
            }
            return (i%2==0)?checkChoose:checkUnChoose;
         })(i);

    }

    checkAll.onclick =  function(){
        if(i>0){
            checkAll.notify(this.checked);
        }else{
            this.checked=false;
            alert("add button first");
        }

    };
};

在window.onload的时候，先获取对应的控件对象，然后通过ObserverPattern.extend将checkAll这个CheckBox变成被观察者。接着监听ADD按钮的点击事件，去创建CheckBox然后添加到下面的DIV中。同时通过ObserverPattern.extend讲他们变成观察者。现在在checkAll的点击事件中去调用他的notify方法，通知观察他的所有观察者进行update。至此完成观察者模式。