分析

EBind

EBind 构造函数接收应用根元素、数据、方法来初始化双向数据绑定：

function EBind(options) {
    this._init(options);}EBind.prototype._init = function (options) {

    // options 为上面使用时传入的结构体，包括 el, data, methods
    this.$options = options;

    // el 是 #app, this.$el 是 id 为 app 的 Element 元素
    this.$el = document.querySelector(options.el);

    // this.$data = {number: 0}
    this.$data = options.data;

    // this.$methods = {increment: function () { this.number++; }}
    this.$methods = options.methods;

    // _binding 保存着 model 与 view 的映射关系，也就是我们定义的 Watcher 的实例。当 model 改变时，我们会触发其中的指令类更新，保证 view 也能实时更新
    this._binding = {};

    // 重写 this.$data 的 set 和 get 方法
    this._obverse(this.$data);

    // 解析指令
    this._complie(this.$el);};

obverse

_obverse 的关键是使用 Object.defineProperty 来定义传入数据对象的 getter 及 setter，通过 setter 来监听对象属性的变化从而触发 Watcher 中的更新方法。

EBind.prototype._obverse = function (currentObj, completeKey) {
    var _this = this;
    Object.keys(currentObj).forEach(function (key) {
        if (currentObj.hasOwnProperty(key)) {

            // 按照前面的数据，_binding = {number: _directives: [], preson: _directives: [], preson.age: _directives: []}
            var completeTempKey = completeKey ? completeKey + '.' + key : key;
            _this._binding[completeTempKey] = {
                _directives: []            };
            var value = currentObj[key];

            // 如果值还是对象，则遍历处理
            if (typeof value === 'object') {
                _this._obverse(value, completeTempKey);
            }
            var binding = _this._binding[completeTempKey];

            // 双向数据绑定的关键
            Object.defineProperty(currentObj, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    console.log(key + '获取' + JSON.stringify(value));
                    return value;
                },
                set: function (newVal) {
                    if (value !== newVal) {
                        console.log(key + '更新' + JSON.stringify(newVal));
                        value = newVal;

                        // 当 number 改变时，触发 _binding[number]._directives 中的绑定的 Watcher 类的更新
                        binding._directives.forEach(function (item) {
                            item.update();
                        });
                    }
                }
            });
        }
    })};

_complie

_complie 的关键是简析自定义指令，根据不同的自定义指令实现不同的功能。如 e-click 就解析为将对应 node 绑定 onclick 事件，e-model 必须绑定在 INPUT 和 TEXTAREA 上，然后监听 input 事件，更改 model 的值，e-bind 就直接将绑定的变量值输出到DOM元素中。

EBind.prototype._complie = function (root) {
    var _this = this;
    var nodes = root.children;
    for (var i = 0; i 
Watcher
作为连接 _obverse 和 _complie 的桥梁，用来绑定更新函数，通过 update 实现对视图的更新。
function Watcher(options) {
    // options 属性：
    // name 指令名称，例如文本节点，该值设为"text"
    // el 指令对应的DOM元素
    // eb 指令所属EBind实例
    // exp 指令对应的值，本例如"number"
    // attr 绑定的属性值，本例为"innerHTML"
    this.$options = options;
    this.update();}/** * 根据 model 更新 view */Watcher.prototype.update = function () {
    var _this = this;
    var keys = this.$options.exp.split('.');

    // 比如 H3.innerHTML = this.data.number; 当 number 改变时，会触发这个 update 函数，保证对应的 DOM 内容进行了更新。
    this.$options.el[this.$options.attr] = keys.reduce(function (value, key) {
        return value[key];
    }, _this.$options.eb.$data);};
总结
这样我们就使用原生 JavaScript 实现了简单的双向数据绑定。
源码：https://github.com/laixiangran/e-bind
原文出处