javascript设计模式 观察者模式

javascript设计模式 观察者模式
2016-06-07

别人端午节放假 我却还上班

观察者模式； 我通过看书籍觉得似乎是有两种场景做法；
上代码

（如果有意见请提出来，我写博客也是为了学习、分享，先学习 后分享。我也是新人，代码肯定有问题，思路肯定也有局限性，不怕批评，就怕你不指出来 谢谢大家！）

//首先整个观察者模式 是通过被观察者订阅观察者；当有关状态被改变的时候，观察者通过广播通知被观察者，
//一种是先写好被通知之后干嘛
//一种是先通知，然后自己来定义  先通知你了 然后定义你要去干嘛

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

javascript代码

    //页面有四个元素， 当钱发生变化的时候， 我需要给他们加上去
        function observer(){
            this.observerList = [];
        }
        //订阅
        observer.prototype.add = function(obj) {
            //先来判断这里是否已经被注册了
            var is = this.observerList.some(function(e){
                return e === obj;
            })

            if(!is){
                this.observerList.push(obj);
            }
        };

        observer.prototype.$ = function(ele) {
            //一般情况下，如果我获取的DOM对象不需要用到jquery方法，我很少用$(ele),因为这样没必要，影响性能
            //就算你之后要重新用到jquery方法 也可以把这个原声的dom对象转为jquery对象
            return document.getElementById(ele);
        };

        //通知
        observer.prototype.Notify = function(price) {
            //这个地方我先定义好我要做的事情，给订阅的元素加钱
            this.observerList.forEach(function(e){
                e.innerText = (Number(e.innerText) + Number(price)).toFixed(2);`

            })
        };

然后就是订阅

       //首先创建一个实例
        var ob = new observer();
        //订阅
        ob.add(ob.$("a"))
        ob.add(ob.$("b"))
        ob.add(ob.$("c"))
        ob.add(ob.$("d"))
        //发布钱
        ob.Notify("500.02");

这是预先说好，我这个观察者模式给页面的金钱发生改变时，用来广播的

还有一种就是订阅者订阅我这个东西，当这个东西被发布了，我就去通知他，“你订阅的东西发布啦”，然后订阅者就是看发布的内容，根据内容去做处理逻辑；

代码

        function observer(){
            //注意这里是对象
            this.observerList = {};
        }

        //订阅
        observer.prototype.listen = function(key,fn) {
            // body...
            var stack,clonekey;
            //这里判断它是不是创建过订阅键值， 有的话直接把我们绑定的回调放进去， 没有就新建一个数组放进去
            stack = (clonekey = this.observerList[key]) != null ? clonekey : this.observerList[key] = [];
            stack.push(fn);
        };

        //发布
        observer.prototype.Notify = function() {
             //这里不传参数， 因为我们不知道它发布的时候要用到多少东西，所以我们直接用arguments获取
             var stack,clonekey,key,self = this,fn;
             key = Array.prototype.shift.call(arguments);//获取订阅的名称;
             //取到订阅键值的值
             stack = (clonekey = this.observerList[key]) != null ? clonekey : this.observerList[key] = [];
             //发布
             for(var _i = 0,_max = stack.length; _i < _max; _i++){
                fn = stack[_i];
                fn.apply(self,arguments)
             }

        };


        //订阅
        var ob = new observer();
        ob.listen("watch",function(data,b,c){
            //这里订阅了节目
            console.log(data + " " + b + " " + c)
            alert("今天听说有"+data.name);
        })

        //电视台发布
        ob.Notify("watch",{name : "铁甲小宝"})

大概是这样了，

apply 跟 call还是有点迷糊
apply 是把参数整合成一个数组
call是把参数分开来传
看起来是没多大的区别，、
可是这里的fn.apply(self,arguments)为什么我使用call传过去是一个数组，而apply却是一个对象
简单分析一下：
apply是传的一个数组，当了下一个流程的时候我们假设javascript解释器会把参数数组自动拆分成一个一个的参数，所以这里明明传的是数组，外面的数组壳没了却成为了一个对象
call是传的一个一个的值，所javascript解释器不会做多余的修饰操作，传的是什么就是什么
谢谢大家的阅读，希望能给我提意见 谢谢大家