关于javascript:观察者模式JS描述

观察者模式又名 ” 公布 - 订阅 ” 模式，可能无效的将模块间进行解耦。

观察者模式是使用在一些有一对多关系的场景中，一个对象有了一些扭转，其余依赖于该对象的对象也要做一些动作。

比方，上课，老师提了一个问题，所有会这道问题的学生都解答这个问题。其中老师就是主对象，老师发问就是状态扭转，学生是依赖于老师的对象，学生答复问题就是针对老师发问这个状态所做的扭转。

弄清楚这个原理，咱们来看看怎么用代码实现。

咱们能够创立一个对象帮咱们监控主对象得扭转，而且要告诉订阅了主对象扭转这个工夫的依赖对象做出相应，还以下面老师发问学生答为例，咱们创一个 Observer 的对象，它得能帮学生去订阅老师发问某个问题，也得能帮老师收回发问得音讯，而且既然有订阅，就得有解除订阅，所以得有一个解除订阅得办法，基于这个思路，咱们设计的 Observer 差不多就是以下这个样子：

const Observer = (function(){var _messages = {};
    return {add: ()=>{},   // 订阅音讯
        emit: ()=>{},  // 公布音讯
        remove: ()=>{} // 勾销音讯的订阅
    }
})()

用立刻执行函数创立一个公有变量，_messages 寄存被订阅的音讯，以及订阅者所要执行的操作。

接下来咱们看 add 办法，add 要把被订阅的音讯，以及订阅者的操作寄存到 _messages 里，以供在音讯收回时，订阅者可能做出相应回应。所以 add 办法能够这么实现：

add: (type, fn)=>{        //type 就是音讯，fn 就是订阅者的回调
    if(_messages[type]){_messages[type].push(fn)
    }else{_messages[type] = [fn] 
    }
}

办法很简略，就是看_messages 里有没有某个音讯，如果没有就创立数组，把回调方里，否者间接放数组里。因为可能有多个订阅者订阅同一个音讯，所以要用数组。

接下来是 emit 办法，emit 用于收回某个音讯，其实就是去_messages 中看某个音讯有没有订阅者，有的话就把所有的回调执行一遍。

emit: (type, args)=>{if(_messages[type] && _messages[type] instanceof Array){for(let i = 0; i < _messages[type].length; i++){typeof _messages[type][i] == 'function' && _messages[type][i].call(this, args)
        }
    }
}

最初就是 remove 办法，其实就是看某个音讯找某个订阅者的回调，删掉就行。

remove: (type, fn)=>{if(_messages[type] && _messages[type] instanceof Array){for(let i = _messages[type].length - 1; i >= 0; i--){_messages[type][i] == fn && _messages[type].splice(i, 1);
       }
    }
}

组合起来，一个残缺的观察者对象就是上面这样：

const Observer = (function(){var _messages = {};
    return {add: (type, fn)=>{if(_messages[type]){_messages[type].push(fn)
            }else{_messages[type] = [fn] 
            }
        },
        emit: (type, args)=>{if(_messages[type] && _messages[type] instanceof Array){for(let i = 0; i < _messages[type].length; i++){typeof _messages[type][i] == 'function' && _messages[type][i].call(this, args)
                }
            }
        },
        remove: (type, fn)=>{if(_messages[type] && _messages[type] instanceof Array){for(let i = _messages[type].length - 1; i >= 0; i--){_messages[type][i] == fn && _messages[type].splice(i, 1);
                }
            }
        }
    }
})()

接下来，让咱们看看它是怎么工作的，还以学生答问题为例，咱们先来一个老师，老师就是公布发问：

var Teacher = function(){this.question = function(questionName){console.log('老师发问了：' + questionName);
        Observer.emit(questionName, {question: questionName})
    }
}

而后是学生，学生有一个答复问题的办法，有一个监听问题的办法，只监听本人会的问题，另外还有一个睡觉办法，睡觉其实就是勾销订阅某个音讯。

var Student = function(name){
    this.name = name;
    this.answer = function(args){console.log(name +'答复老师的问题：' + args.question);
    }
}
Student.prototype = {listen: function(questionName){console.log(this.name +'想要答复问题：' + questionName);
        Observer.add(questionName, this.answer)
    },
    sleep: function(questionName){console.log(this.name +'睡着了');
        Observer.remove(questionName, this.answer)
    }
}

listen 和 sleep 能够放到原型链上，然而 answer 办法放在实例上了，因为如果再放在原型链上，观察者就没法分清哪个回调是哪个订阅者的了。

有了以上两个对象，咱们联合上面的代码，看看观察者怎么工作：

var s1 = new Student('小明');
var s2 = new Student('小红');

s1.listen("谁最帅");
s2.listen("谁最帅");

var t = new Teacher();
setTimeout(() => {t.question('谁最帅');

    s1.sleep("谁最帅");
    setTimeout(() => {t.question('谁最帅')
    }, 2000);

}, 2000);

咱们创立两个学生，别离监听了 ’ 谁最帅 ’ 这个问题，而后创立一个老师，老师两秒后发问 ’ 谁最帅 ’，两个学生应该都答复该问题。而后学生 s1 睡着了，于是不再监听 ’ 谁最帅 ’，老师 2 秒后又发问，这次只有学生 s2 答复该问题。
残缺的后果是上面这样的。

 小明想要答复问题：谁最帅
小红想要答复问题：谁最帅
老师发问了：谁最帅

小明答复老师的问题：谁最帅
小红答复老师的问题：谁最帅
小明睡着了

老师发问了：谁最帅
小红答复老师的问题：谁最帅 

会呈现下面的后果就是观察者在起作用，两个学生监听发问，Observer 往_messages 中插入了 ’ 谁最帅 ’，而且把两位学生的答复办法放进了数组里，等老师发问，Observer 就去_messages 中顺次执行。起初 s1 勾销了订阅，Observer 从_messages 删除了该对象对事件的订阅，从而第二次发问的时候，s1 就不再答复了。