实现Vue的双向绑定

一、概述

之前有讲到过vue实现整体的整体流程，讲到过数据的响应式，是通过Object.defineProperity来实现的，当时只是举了一个小小的例子，那么再真正的vue框架里是如何实现数据的双向绑定呢？是如何将vm.data中的属性通过“v-model”和“{{}}”绑定到页面上的呢？下面我们先抛弃vue中DOM渲染的机制，自己来动手实现一双向绑定的demo。

二、实现步骤

1、html部分

根据Vue的语法，定义html需要绑定的DOM，如下代码

2、js部分

由于直接操作DOM是非常损耗性能的，所以这里我们使用DocumentFragment（以下简称为文档片段），由于createDocumentFragment是在内存中创建的一个虚拟节点对象，所以往文档片段里添加DOM节点是不太消耗性能的；此处我们将app下面的节点都劫持到文档片段中，在文档片段中对DOM进行一些操作，然后将文档片段总体重新插入app容器里面去，而且此处插入到app中的节点都是属于文档片段的子孙节点。代码如下：

 // 劫持DOM节点到DocumentFragment中

 function nodeToFragment(node) {

     var flag = document.createDocumentFragment();

     while(node.firstChild) {

         flag.appendChild(node.firstChild) // 劫持节点到文档片段中，在此之前对节点进行一些操作； 劫持到一个，对应的DOM容器里会删除掉一个节点

     }

     return flag

 };

 var dom = nodeToFragment(document.getElementById('app'))

 document.getElementById('app').apendChild(dom) // 将文档片段重新放入app中

对于双向绑定的实现，首先我们来创建vue的实例

 // 创建Vue对象

 function Vue(data) {

     var id = data.el;

     var ele = document.getElementById(id);

     this.data = data.data;

     obersve(this.data, this)    // 将vm.data指向vm

     var dom = nodeToFragment(ele, this);   // 通过上面的函数劫持DOM节点

     ele.appendChild(dom);     // 将文档片段重新放入容器

 };

 // 实例化Vue对象

 var vm = new Vue({

     el: 'app',

     data: {

         text: 'hello world'

     }

 })

通过以上代码我们可以看到，实例化Vue对象的时候先是将vm.data指向到了vm，而后是对html节点进行的数据绑定，此处分两步，我们先来看对vm的数据源绑定：

 function definevm(vm, key, value) {

     Object.defineProperty(vm, key, {

         get: function() {

             return value

         },

         set: function(newval) {

             value = newval

             console.log(value)

         }

     })

 };

 // 指定data到vm

 function obersve(data, vm) {

     for(var key in data) {

         definevm(vm, key, data[key]);

     }

 }

 vm.text = 'MrGao';

 console.log(vm.text);  // MrGao

此处将vm.data的属性指定到vm上，并且实现了对vm的监听，一旦vm的属性发生变化，便会触发其set方法；接下来我们来看下对DOM节点的数据绑定：

 // 绑定数据

 function compile(node, vm) {

     // console.log(node.nodeName)

     var reg = /\{\{(.*)\}\}/;    // 匹配{{}}里的内容

     if (node.nodeType === 1) {   // 普通DOM节点nodeType为1

         var attr = node.attributes  遍历节点属性

         for(var i = 0; i < attr.length; i++) {

             if (attr[i].nodeName === 'v-model') {

                 var name = attr[i].nodeValue;     // 获取绑定的值

                 node.addEventListener('keyup', function(e) {

                     // console.log(e.target.value)

                     vm[name] = e.target.value    //监听input值的变化，重新给vm.text赋值

                 })

                 node.value = vm[name];

                 node.removeAttribute('v-model');

             };

         };

     };

     if (node.nodeType === 3) {

         if (reg.test(node.nodeValue)) {

             var name = RegExp.$1;

             name = name.trim();

             node.nodeValue = vm[name];          // 将vm.text的值赋给文本节点

         }

     }

 }

 // 劫持DOM节点到DocumentFragment中

 function nodeToFragment(node, vm) {

     var flag = document.createDocumentFragment();

     while(node.firstChild) {

         compile(node.firstChild, vm)；          // 进行数据绑定

         flag.appendChild(node.firstChild)；     // 劫持节点到文档片段中

     }

     return flag；

 };

这样一来，我们就可以通过compile方法将vm.text绑定到input节点和下面的文本节点上，并且监听input节点的keyup事件，当input的value发生改变是，将input的值赋给vm.text，如此vm.text的值也改变了，同时会触发对vm的ste函数；但是vm.text的值是改变了，我们应该如何让文本节点的值同样跟随者vm.text的值改变呢？此时我们就可以使用订阅模式（观察者模式）来实现这一功能；那什么是订阅模式呢？

订阅模式就是好比有一家报社，他每天都要对新的世界大事进行发布，然后报社通知送报员去把发布的新的报纸推送给订阅者，订阅这在拿到报纸后可以获取到新的消息；反映到代码里可以这样理解；当vm.text改变时，触发set方法，然后发布变化的消息，在数据绑定的那里定义订阅者，在定义一个连接两者的“送报员”，每当发布者发布新的消息，订阅者都可以拿到新的消息，代码如下：

 // 定义发布订阅

 function Dep() {

     this.subs = []

 }

 Dep.prototype = {

     addSub: function(sub) {

         this.subs.push(sub);

     },

     notify: function() {

         this.subs.forEach(function(sub) {

             sub.update();

         })

     }

 };

 //  定义观察者

 function Watcher (vm, node, name) {

     Dep.target = this;   // 发布者和订阅者的桥梁（送报员）

     this.name = name;

     this.node = node;

     this.vm = vm;

     this.update();

     Dep.target = null;

 };

 Watcher.prototype = {

     update: function() {

         this.get();

         // console.log(this.node.nodeName)

         if (this.node.nodeName === 'INPUT') {

             this.node.value = this.value;

         } else {

             this.node.nodeValue = this.value;

         }

     },

     get: function() {

         this.value = this.vm[this.name];

     }

 }

此时，发布者和订阅者要分别在数据更新时和数据绑定时进行绑定

 // 绑定发布者

 function definevm(vm, key, value) {

     var dep = new Dep  // 实例化发布者

     Object.defineProperty(vm, key, {

         get: function() {

             if (Dep.target) {

                 dep.addSub(Dep.target)  // 为每个属性绑定watcher

             }

             return value

         },

         set: function(newval) {

             value = newval

             console.log(value)

             dep.notify();     // 数据改变执行发布

         }

     })

 };

 // 绑定订阅者到节点上面

 function compile(node, vm) {

     // console.log(node.nodeName)

     var reg = /\{\{(.*)\}\}/;

     if (node.nodeType === 1) {

         var attr = node.attributes

         for(var i = 0; i < attr.length; i++) {

             if (attr[i].nodeName === 'v-model') {

                 var name = attr[i].nodeValue;

                 node.addEventListener('keyup', function(e) {

                     // console.log(e.target.value)

                     vm[name] = e.target.value

                 })

                 // node.value = vm[name];

                 new Watcher(vm, node, name);   // 初始化绑定input节点

                  node.removeAttribute('v-model');

             };

         };

     };

     if (node.nodeType === 3) {

         if (reg.test(node.nodeValue)) {

             var name = RegExp.$1;

             name = name.trim();

             // node.nodeValue = vm[name];

             new Watcher(vm, node, name);   // 文本节点绑定订阅者

         }

     }

 }

到这里vue的双绑定就实现了，此文仅为实现最简单的双向绑定，一些其它复杂的条件都没有考虑在内，为理想状态下，如有纰漏还望指正，下面附上完整代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue</title>

 </head>

 <body>

     <div id="app">

         <input type="text" id="a" v-model="text">

         {{text}}

     </div>

 </body>

 <script>

     // 定义发布订阅

     function Dep() {

         this.subs = []

     }

     Dep.prototype = {

         addSub: function(sub) {

             this.subs.push(sub);

         },

         notify: function() {

             this.subs.forEach(function(sub) {

                 sub.update();

             })

         }

     };

     //  定义观察者

     function Watcher (vm, node, name) {

         Dep.target = this;

         this.name = name;

         this.node = node;

         this.vm = vm;

         this.update();

         Dep.target = null;

     };

     Watcher.prototype = {

         update: function() {

             this.get();

             // console.log(this.node.nodeName)

             if (this.node.nodeName === 'INPUT') {

                 this.node.value = this.value;

             } else {

                 this.node.nodeValue = this.value;

             }

         },

         get: function() {

             this.value = this.vm[this.name];

         }

     }

     // 绑定数据

     function compile(node, vm) {

         // console.log(node.nodeName)

         var reg = /\{\{(.*)\}\}/;

         if (node.nodeType === 1) {

             var attr = node.attributes

             for(var i = 0; i < attr.length; i++) {

                 if (attr[i].nodeName === 'v-model') {

                     var name = attr[i].nodeValue;

                     node.addEventListener('keyup', function(e) {

                         // console.log(e.target.value)

                         vm[name] = e.target.value

                     })

                     // node.value = vm[name];

                     new Watcher(vm, node, name);

                     node.removeAttribute('v-model');

                 };

             };

         };

         if (node.nodeType === 3) {

             if (reg.test(node.nodeValue)) {

                 var name = RegExp.$1;

                 name = name.trim();

                 // node.nodeValue = vm[name];

                 new Watcher(vm, node, name);

             }

         }

     }

     // 劫持DOM节点到DocumentFragment中

     function nodeToFragment(node, vm) {

         var flag = document.createDocumentFragment();

         while(node.firstChild) {

             // console.log(node.firstChild)

             compile(node.firstChild, vm)

             flag.appendChild(node.firstChild) // 劫持节点到文档片段中

         }

         return flag

     };

     function definevm(vm, key, value) {

         var dep = new Dep

         Object.defineProperty(vm, key, {

             get: function() {

                 if (Dep.target) {

                     dep.addSub(Dep.target)

                 }

                 return value

             },

             set: function(newval) {

                 value = newval

                 console.log(value)

                 dep.notify();

             }

         })

     };

     // 指定data到vm

     function obersve(data, vm) {

         for(var key in data) {

             definevm(vm, key, data[key]);

         }

     }

     // 创建Vue类

     function Vue (options) {

         this.data = options.data;

         var id = options.el;

         var ele = document.getElementById(id);

         // 将data的数据指向vm

         obersve(this.data, this);

         // 存DOM到文档片段

         var dom = nodeToFragment(ele, this);

         // 编译完成将DOM返回挂在容器中

         ele.appendChild(dom);

     };

     // 创建Vue实例

     var vm = new Vue({

         el: 'app',

         data: {

             text: 'hello world'

         }

     })

 </script>

 </html>

参考文章：https://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension

巴特西

实现Vue的双向绑定

最新文章

热门文章