一个简单的发布订阅者模式

当我们用vue构建项目时候，都知道改变组件data的变量值，用到它的页面得值也会自动改变，这就是基于发布订阅者模式，data里面变量就是发布者，用到这个变量的地方都是订阅者,接下来写一个简单的发布订阅者模式，在这不考虑性能，是一个思维导图，旨在让你清除什么是发布订阅模式：

//1.设定目标对象
let obj = {
    name:"jack"
}
//2.设置两个订阅者
function sub1(key,value){
    console.log(`sub1设置的属性${key}发生了变化，新的值为${value}`)
}

function sub2(key,value){
    console.log(`sub2设置的属性${key}发生了变化，新的值为${value}`)
}
//3.将订阅者放在一个数组里面统一进行通知的数组
let subWrapper = new Set()
function addSub(sub){
    subWrapper.add(sub)
}
addSub(sub1)
addSub(sub2)
//3.设置变化set函数,使用reflect函数
function set(target,key,value){
    let result = Reflect.set(target,key,value)
    result?subWrapper.forEach(fn=>{
        fn(key,value)
    }):''
}
let proxy = new Proxy(obj,{set})
proxy.name = "honi"

当改变name值，会打印出以下结果：

 

 

 我们可以看到，发布者值改变了，订阅者会收到改变的消息，做出相应的处理，其中我们针对几个知识点进行讲解：

ES6、ES5有3个方法能监听对象数据的改变:

（1）Object.definproperty(target,key,value) 里面有set和get方法，可以监听对象属性值获取和设置操作

（2）Proxy(target,{set,get}) 所有被Proxy定义的属性，对对象的任何操作都可以被拦截，set和get都可以进行其他的功能

（3）Reflet.definproperty(target,key,value) Es6新接口，这个方法和Object.definproperty(target,key,value)一样，只是处理错误时候不同，Reflet函数会有一个Booren类型返回值，表示设置是否成功。