双向数据绑定的原理

• 在MVC模式下数据绑定是指将模型数据与视图模板之间建立一种关联关系，这种关联关系分成两种情况，一种是将相应的模型数据展示视图模板的对应位置，另一种是将视图模板上的数据变化反应到数据模型上，综合上述两种情况即所谓双向数据绑定。

  其原理分析大致如下：

  • 模型 -> 视图

    // 视图
    var view = '<p>大家好我叫{{name}}，我今年{{age}}岁了</p>';
    // 模型
    var data = {name: '老布头', age: 28};
    // 利用正则表达式实现编译
    var reg = /{{\s*([^}}]+\S)\s*}}/;
    var match = null;
    // 便利替换
    while(match = reg.exec(view)) {
        view = view.replace(match[0], data[match[1]]);
    }
    console.log(view); // 大家好我叫老布头，我今年28岁了

  • 视图->模型

    <div class="box">
        <input type="text" data-model="msg">
    </div>
    <script>
        // 模型
        var data = {};
        // 通过监听视图数据的变化更新模型
        var viewModel = document.querySelector('input');
        viewModel.addEventListener('keyup', function () {
            var val = this.value;
            var property = this.dataset.model;
            data[property] = val;
        });
    </script>