用es6 （proxy 和 reflect）轻松实现 观察者模式

 

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

posted @ 2017-06-15 10:09  _白马非马  阅读(2012)  评论(0)  编辑  收藏  举报