设计模式学习_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。至此完成观察者模式。