js中 观察者 之前我们一般通过事件机制完成
ex:
注册监听
Event.listen('changeName', name => console.log(name))
派发事件
Event.trigger('changeName', name )
那么es6中 我们可以通过如下方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>123345</p> <input type="text" onclick="test()"> <button onclick="test()">dianow</button> </body> <script> //添加观察者 const queuedObservers = new Set(); const observe = fn => queuedObservers.add(fn); //proxy 的set 方法 function set(target, key, value, receiver) { const result = Reflect.set(target, key, value, receiver); queuedObservers.forEach(observer => observer()); return result; } //创建proxy代理 const observable = obj => new Proxy(obj, {set}); //被观察的 对象 const person = observable({ name: '张三', age: 20 }); function print() { console.log(`${person.name}, ${person.age}`) } function print2() { console.log(`我是二号观察者：${person.name}, ${person.age}`) } //添加观察者 observe(print); observe(print2); person.name = '李四'; </script> </html>
具体参考 http://es6.ruanyifeng.com/#docs/proxy