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