使用 Proxy 实现观察者模式

为了检验 es6 学的怎么样了，大家一起来做一道小题目吧！

观察者模式（Observer mode）指的是函数自动观察数据对象，一旦对象有变化，函数就会自动执行。

const person = observable({
  name: '张三',
  age: 20
});

function print() {
  console.log(`${person.name}, ${person.age}`)
}

observe(print);
person.name = '李四';
// 输出
// 李四, 20

上面代码中，数据对象person是观察目标，函数print是观察者。一旦数据对象发生变化，print就会自动执行。

下面，使用 Proxy 写一个观察者模式的最简单实现，即实现observable和observe这两个函数。思路是observable函数返回一个原始对象的 Proxy 代理，拦截赋值操作，触发充当观察者的各个函数。

下面是作者写的答案，你如果做完了，可以参考一下作者的答案，记得看答案之前先思考一下哦！

/**
 * 实例：使用 Proxy 实现观察者模式
 */
const person = observable({
    name: '张三',
    age: 20
});

function print() {
    console.log(`${person.name}, ${person.age}`)
}

function say() {
    console.log(`我是${person.name}，今年${person.age}`);
}

var funcList = new Set();

observe(print);
observe(say);

person.name = '李四';

person.name = "Clig";

// 输出
// 李四, 20

/**
 * 观察者模式方法
 * @param {*} obj 
 */
function observable(obj) {
    let target = obj || {};
    let handler = {
        set: function (tar, key, value) {
            funcList.forEach(v => v());
            Reflect.set(tar, key, value);
        }
    }
    let res = new Proxy(target, handler);
    return res;
}

/**
 * 添加观察者方法
 * @param {*} fun 
 */
function observe(func) {
    funcList.add(func);
}

运行结果

作者 vs code 编译js时是热编译的，是通过 nodemon 插件实现的。

nodemon简介：
nodemon是一种工具，可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。

全局安装

npm install -g nodemon

使用

nodemon   ./main.js // 启动node服务

vs code 将终端（控制台）放到右侧

你做出来了吗？没有做出来就说明你 es6 还不够熟练哦？快去看看 阮一峰 的es6入门教程吧！

ES6 入门教程：阮一峰 es6 教程

如果你觉得 es6 没问题了，不知道观察者模式，说明你的设计模式还不够熟练哦？快去看看 w3c 的 JavaScript 设计模式 吧！

JavaScript 设计模式：JavaScript 设计模式

如果你前面两项知识掌握的差不多了，下面来一点更加进阶的知识。

深入剖析Vue源码：深入剖析Vue源码