【JS基础】虚拟DOM 及 双向数据绑定

JavaScript

参 照：
https://www.hbiger.com/index.php/archives/27/
https://github.com/DMQ/mvvm
MDN - Object.defineProperty

最 新：
https://www.zybuluo.com/c-Ku/note/940054

虚拟Dom

前端更新页面视图并渲染数据时需操作大量页面Dom，常用的方法有 appendChild 和 innerHTML，两个方法性能相差不大，innerHTML更好一点，使用时皆对Dom进行了大量的操作，引发浏览器的重构及重绘，影响页面性能。

虚拟Dom方案是在页面渲染 Dom Tree 时，先在内存中模拟一个Dom树，然后比较两颗Dom树的不同，再将不同的地方渲染进Dom，以控制页面重构重绘的范围。这在渲染大量数据且数据复杂不规律的情况下更具优势。

双向数据绑定

大致分为：

发布／订阅模式（backbone.js）
脏值检查模式（Angular.js）
数据劫持（Vue.js）

订阅发布模式

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq';                      // 监听到变化
function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};
function defineReactive(data, key, val) {
    observe(val);                       // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true,               // 可枚举
        configurable: false,            // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('监听到变化 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify();               // 通知所有订阅者
        }
    });
}
function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};