1.定义
它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。
它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,
发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。
2>观察者模式的好处:
- 支持简单的广播通信,自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
JS里对观察者模式的实现是通过回调来实现的
3>观察者模式和发布/订阅模式的区别
1》本质上调度的地方不同
2》虽然两种模式都存在订阅者和发布者,但是观察者模式是由具体目标调度的,而发布/订阅模式是统一由调度中心调的,
所以观察者模式的订阅者与发布者之间是存在依赖的,而发布/订阅模式则不会。
4>实例
浏览器的事件就是观察者模式
div.onclick = function click() {
console.log('click')
}
function click是一个观察者监听div 的click 事件,当这个事件发生变化时,停止function click,让他执行。
实现自定义事件 Event 对象的接口
var Event={
//通过on接口监听事件eventName,如果事件eventName被触发则执行回调
on:function(eventName,callback){
if(!this.handles){
this.handles={}
}
if(!this.handles[eventName]){
this.handles[eventName]=[];
}
this.handles[eventName].push(callback)
},
//触发eventName
emit:function(eventName){
if(this.handles[arguments[0]]){
for(var i=0;i