概念

观察者模式：定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主体对象。这个主体对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。

观察者模式和发布订阅模式是有区别的
区别：观察者模式只有两个，一个是观察者一个是被观察者。发布订阅模式还有一个中间层，发布订阅模式的实现是，发布者通知给中间层 => 中层接受并通知订阅者 => 订阅者收到通知并发生变化
如下图所示：左边是观察者模式 —— 右边是发布订阅模式

11.png

举个栗子：
以学生为例，上课和下课的铃声就是被观察者，学生就是观察者，当下课铃声响了，学生就知道下课了，就出去跑着玩了，然后过了10分钟，上课铃声又响了，然后学生听到上课铃，又开始从外面往教室跑，去上课。

在DOM节点上绑定事件函数，JS和DOM之间就实现了一种观察者模式。

document.body.addEventListener("click", function() {
    alert("Hello World")
}，false )
document.body.click() //模拟用户点击

以上js就是观察者，DOM就是被观察者，给DOM添加点击事件就相当于订阅了DOM,当DOM被点击，DOM就会通知js触发‘ alert("Hello World") ’

vue框架就采用了观察者模式，下面模仿vue的v-model双向绑定的实现：

利用Object.defineProperty实现

在ES5中主要是通过Object.defineProperty方法定义对象属性的设置和获取，并在进行设置时执行相关的处理函数

var targetObj = {      // 创建对象
    name:'小李'
}
var targetObj2 = {
    name:'小李'
}
function observer(oldVal, newVal) {  // 定义值改变时的处理函数（观察者）
    // 其他处理逻辑...
    targetObj2.name = newVal
    console.info('targetObj2的name属性的值改变为 ' + newVal);
}
// 定义name属性及其set和get方法（name属性为被观察者）
Object.defineProperty(targetObj, 'name', {
    enumerable: true,
    configurable: true,
    get: function() {
        return name;
    },
    set: function(val) {   
        observer(name, val)      //调用处理函数
        name = val
    }
});
targetObj.name = '张三';
targetObj.name = '李四';
console.log(targetObj2.name)

虽然只是改变了targetObj的name属性，但是因为观察者模式的设计，targetObj2的name属性同样被改变，这就实现了一个简单的观察者模式。

ES6 利用 class 实现

（也可改用利用原型prototype实现，原理相同）
实现派发事件，监听事件；

class TargetObj {
    constructor(age, name) {
        this.name = name;
        this.age = age;
    }
    set name(val) {
        observer(name, val);
        name = val;
    }
}
let targetObj = new TargetObj(1, 'Martin');
function observer(oldVal, newVal) {  // 定义值改变时的处理函数
    // 其他处理逻辑...
    console.info('name属性的值从 '+ oldVal +' 改变为 ' + newVal);
}
targetObj.name = 'Lucas';
console.info(targetObj)