设计模式学习

1.观察者模式

 

eg：DOM事件

需要监听dom元素一些行为，但却不知道用户会在什么时间主动触发—— 在DOM节点上绑定事件函数

 

var dom = document.getElementById('box');
dom.addEventListener('click', function () {
  console.log("click box");
}, false);

// 模拟点击
dom.click();  // click box

此时，DOM的click事件是被观察者，监听事件就是观察者。

 

定义：

观察者模式 定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知并 被自动更新。

特点：
观察者模式降低了目标和观察者之间的耦合关系，在目标和观察者之间建立了一套触发机制，但是目标和观察者之间的依赖关系并没有完全解除，且有可能出现循环引用。

 

应用实例： Vue响应式原理