[JavaScript知识库]js的设计模式 - 【观察者模式】

当对象间存在一对多关系时，则使用观察者模式（Observer Pattern）。比如，当一个对象被修改时，则会自动通知它的依赖对象。一对多的关系。

模式演示实例

示例代码如下：

// 主题，接受状态的变化，触发每个观察者
class Subject {
    constructor() {
        this.state = 0;
        this.observers = []
    }
    getState () {
        return this.state;
    }
    setState () {
        this.state = this.state;
        this.notifyAllObservers();
    }
    attach(observer) {
        this.observers.push(observer);
    }
    notifyAllObservers() {
        this.observers.forEach((observer) => {
            observer.update();
        })
    }
}
// 观察者，等待被触发
class Observer{
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        this.subject.attach(this);
    }
    update() {
        console.log(`${this.name} update, state:${this.subject.getState()}`)
    }
}
// 测试代码
let s = new Subject()
let o1 = new Observer('o1', s)
let o2 = new Observer('o2', s)
let o3 = new Observer('o3', s)
s.setState(1)
s.setState(2)
s.setState(3)

应用场景

一开始说到异步有 callback的都是观察者模式，而 Promise作为异步的解决方案，也避免不了要使用。

function loadImg(src) {
    var promise = new Promise(function (resolve, reject) {
        var img = document.createElement('img')
        img.onload = function () {
            resolve(img)
        }
        img.onerror = function () {
            reject('图片加载失败')
        }
        img.src = src
    })
    return promise
}

var src = 'https://www.imooc.com/static/img/index/logo_new.png'
var result = loadImg(src)
result.then(function (img) {
    console.log('width', img.width)
    return img
}).then(function (img) {
    console.log('height', img.height)
})

resolve和reject就相当于之前的setState，状态改变，其实这也是 Promise 的真实状态变化：pending -> fulfilled 或者 pending -> rejected 。两个then就是观察者，状态变化就会触发观察者update 。
观察者模式在前端的开发中是应用最为广泛的一种模式；vue的生命周期与vue的响应式模式，一些我们常用的组件中都存在着模式的学习；我们不防将设计的思想代入到已封装好的组件中去反观源码并模仿进行调整开发！在此其中学习并提高