vue 源码分析 双向数据binding的方法

96
梁同桌
2017.03.12 10:42* 字数 252

我们的目的是:更新数据->自动更新ui
1.首要检测数据有没有变化
2.更新ui

根据 vue 的思想, es5 提供我们一个方法,为一个对象某一个属性设置监听方法。

    var data = {
          a: 5;
    }
    
     //我们设置了 data对象的a属性的监听
      Object.defineProperty(data, a, { 
          set: function(newVal) {
                  console.log(newVal,'为data.a设置了新值');
          },
          get: function() {
               console.log('获取data.a');
                return variable; 
          }
       )

    data.a = 10;//会调用set方法
    //打印:10为data.a设置了新值。
    var c = data.a;//会调用gat方法
    //打印:获取data.a

我把源码稍微修改了(基本没动),添加了一些注释。 Chrome 可以直接粘贴运行。

  1. 先用正则把{{}}这里面的数据找到。 以属性为“data-element-binding”绑定到DOM树上
  2. 根据DOM树上“data-element-binding”,找到当前的DOM。
  3. 根据DOM里的参数与data里的属性,通过defineProperty绑定。
  4. 更新data数据,然后DOM自动更新了。
<!DOCTYPE html>
<html>

<head>
    <title>ideal</title>
    <meta charset="utf-8">
</head>

<body>
    <div id="test">
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{msg}}</p>
        <p>{{what}}</p>
        <p>{{hey}}</p>
    </div>
    <script>
        var bindingMark = 'data-element-binding'

        function Element(id, initData) {
            var el = document.getElementById(id)
            var bindings = {} //内部暂存绑定数据及dom
            var data = {} //存储bingding数据并实现监控
            var content = el.innerHTML.replace(/\{\{(.*)\}\}/g, markToken) //让{{msg}} 换成 <span data-element-binding="msg"></span>
            el.innerHTML = content //复制回去

            for (var variable in bindings) {
                bind(variable); //将每个数据的名称比如'msg'绑定到data
            }
            if (initData) {
                for (var variable in initData) {
                    data[variable] = initData[variable]
                }
            }

            function markToken(match, variable) { //遍历  match {{msg}}  variable 'msg'
                bindings[variable] = {} //bindings里存储了数据来源的字段比如bindings['msg']
                return '<span ' + bindingMark + '="' + variable + '"></span>'
            }

            function bind(variable) {
                bindings[variable].els = el.querySelectorAll('[' + bindingMark + '="' + variable + '"]'); //bindings里再存储msg绑定的元素

                [].forEach.call(bindings[variable].els, function(e) { //删除data-element-binding属性
                    e.removeAttribute(bindingMark);
                })

                Object.defineProperty(data, variable, { //es5观察属性
                    set: function(newVal) {
                        console.log(variable);
                        [].forEach.call(bindings[variable].els, function(e) {
                            bindings[variable].value = newVal; //=>这里才是实现的绑定,更新内部暂存数据, 为了以后取
                            e.textContent = newVal; //更新数据到dom
                        })
                    },
                    get: function() {
                        return bindings[variable].value; //取数据仅仅是内部暂存的数据
                    }
                })
            }
        }

        var app = new Element('test', {
            msg: 'hello',
            what: 'hi'
        })
    </script>
</body>

</html>


个人博客: www.liangtongzhuo.com

JavaScrpit
Web note ad 1