js设计模式之发布订阅模式 + 观察者模式 + 实现vue的响应式（笔记）

笔记笔记笔记新鲜出炉的笔记

首先说观察者模式：

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

比如举个例子：红绿灯和行人。红绿灯为被观察者，行人为观察者。当绿灯亮起时，人要通过了而且是必须通过。红灯时，必须停下。这就是一个观察者模式。很多个行人同时为一个红路灯指示器作出响应。

发布订阅模式的区别：

必须有一个中间调用层，举例子来说就是比如：送报纸的，报亭，和买报纸的人。报亭就是那个全局调用区域。送报纸的是发布者，整天买报纸的是订阅者。随着卖不同的报纸，买家得到的也随之变化。

粘贴过来的源码：
Observer:

import Dep from 'Dep'
// Observer类用于给data属性添加set&get方法
export default class Observer{
     
    constructor(value){
     
        this.value = value
        this.walk(value)
    }
    walk(value){
     
        Object.keys(value).forEach(key => this.convert(key, value[key]))
    }
    convert(key, val){
     
        defineReactive(this.value, key, val)
    }
}
export function defineReactive(obj, key, val){
     
    // 用于存放某个属性的所有订阅者
    var dep = new Dep()
    // 给当前属性的值添加监听
    var chlidOb = observe(val)
    Object.defineProperty(obj, key, {
     
        enumerable: true,
        configurable: true,
        get: ()=> {
     
            console.log('get value')
            // 如果Dep类存在target属性，将其添加到dep实例的subs数组中
            // target指向一个Watcher实例，每个Watcher都是一个订阅者
            // Watcher实例在实例化过程中，会读取data中的某个属性，从而触发当前get方法
            if(Dep.target){
     
                dep.addSub(Dep.target)
            }
            return val
        },
        set: (newVal) => {
     
            console.log('new value setted')
            if(val === newVal) return
            val = newVal
            // 对新值进行监听
            chlidOb = observe(newVal)
            // 通知所有订阅者，数值被改变了
            dep.notify()
        }
    })
}
export function observe(value){
     
    // 当值不存在，或者不是复杂数据类型时，不再需要继续深入监听
    if(!value || typeof value !== 'object'){
     
        return
    }
    return new Observer(value)
}

Dep：

export default class Dep{
     
    constructor(){
     
        this.subs = []
    }
    addSub(sub){
     
        // 在收集订阅者的时候，需要对subs中的订阅者进行去重，这边不详细解析
        this.subs.push(sub)
    }
    notify(){
     
        // 通知所有的订阅者(Watcher)，触发订阅者的相应逻辑处理
        this.subs.forEach((sub) => sub.update())
    }
}

Watcher：

import Dep from 'Dep'
export default class Watcher{
     
    constructor(vm, expOrFn, cb){
     
        this.vm = vm // 被订阅的数据一定来自于当前Vue实例
        this.cb = cb // 当数据更新时想要做的事情
        this.expOrFn = expOrFn // 被订阅的数据
        this.val = this.get() // 维护更新之前的数据
    }
    // 对外暴露的接口，用于在订阅的数据被更新时，由订阅者管理员(Dep)调用
    update(){
     
        this.run()
    }
    run(){
     
        const val = this.get()
        if(val !== this.val){
     
            this.val = val;
            this.cb.call(this.vm)
        }
    }
    get(){
     
        // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时，通知订阅者管理员收集当前订阅者
        Dep.target = this
        const val = this.vm._data[this.expOrFn]
        // 置空，用于下一个Watcher使用
        Dep.target = null
        return val;
    }
}

Vue的响应系统
其核心有三点：Observer、Watcher、Dep。
（1）. Observer：遍历data中的属性，使用Object.defineProperty的get/set方法进行进行数据劫持
（2）. Dep：每个属性拥有自己的消息dep订阅器，用于放置所有订阅了该属性的观察者对象
（3）. Watcher：观察者（对象），通过dep实现对响应属性的监听，监听到结果后，主动触发自己的响应进行响应。
个人观点（不对请指正）：
Object.defineProperty劫持的属性是被观察者，这我认为Object.defineProperty本身也可以抽象为发布订阅模式的中间层。
当前实例的对象中包含这个属性的都将放进自己的Dep中（Object.defineProperty的get），set方法被触发时将Dep进行更新。从而达到数据响应。