Vue源码分析-模板解析

朱雀 2022-12-05 00:44 214阅读 0赞

# 模板解析 #

### 模板解析流程: ###

1.  将el的所有节点取出,放在文档碎片fragment对象中
2.  将fragment对象的所有子节点进行递归解析处理
3.

插值语法解析

1.  1.  对插值语法(表达式)进行解析(与v-text指令解析一致),使用compileText方法
        
        1.  根据正则对象获取匹配到的表达式字符串
        2.  从vm实例上找到表达式对应的值
        3.  将属性值设置为文本节点的textContent

指令解析

1.  1.  一般指令解析
        
        1.  从标签节点中获取到指令名和表达式
        2.  从vm实例上拿到表达式的对应的值
        3.  根据指令操作标签节点的属性

v-text----textContent属性

v-html----innerHtml属性

v-class----className属性

v-model----value属性

1.  1.  1.  将表达式的值设置到对应的属性上
        2.  指令解析后,移除元素此属性
    2.  事件指令解析
        
        1.  从标签节点找到获取到对应的事件名和表达式
        2.  根据表达式从vm实例methods中获取到函数
        3.  给当前元素节点绑定指定的事件名和回调函数
        4.  指令解析后,移除元素此属性
2.  将解析后的文档对象fragment添加到el中显示

### 相关代码 ###

mvvm.js

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> //编译模板 this.$compile = new Compile(options.el || document.body, this); </td> 
 </tr> 
 </tbody> 
</table>

compile.js

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> function Compile(el, vm) { &nbsp; // 保存vm &nbsp; this.$vm = vm;&nbsp; //为了能在其他函数内部获取到vm实例身上的数据 &nbsp; // 获取dom元素保存起来 &nbsp; this.$el = this.isElementNode(el) ? el : document.querySelector(el); &nbsp; &nbsp; if (this.$el) { &nbsp; &nbsp; // 1. 将元素所有子节点添加到新的创建文档碎片节点中 &nbsp; &nbsp; this.$fragment = this.node2Fragment(this.$el); &nbsp; &nbsp; // 2. 递归编译文档碎片节点所有子节点 &nbsp; &nbsp; this.init(); &nbsp; &nbsp; // 3. 将编译好文档碎片节点添加到页面中生效 &nbsp; &nbsp; this.$el.appendChild(this.$fragment); &nbsp; } } node2Fragment—得到文档随便对象 &nbsp; node2Fragment: function (el) { &nbsp; &nbsp; // 创建文档碎片节点 &nbsp; &nbsp; var fragment = document.createDocumentFragment(), &nbsp; &nbsp; &nbsp; child; &nbsp; &nbsp; // 将原生节点拷贝到fragment &nbsp; &nbsp; while ((child = el.firstChild)) { &nbsp; &nbsp; &nbsp; fragment.appendChild(child); &nbsp; &nbsp; } &nbsp; &nbsp; return fragment; &nbsp; }, Init—开始编译 &nbsp; init: function () { &nbsp; &nbsp; // 递归编译所有子节点方法 &nbsp; &nbsp; this.compileElement(this.$fragment); &nbsp; }, compileElement—接收文档碎片进行编译 &nbsp; compileElement: function (el) { &nbsp; &nbsp; // 取出当前元素所有子节点 &nbsp; &nbsp; var childNodes = el.childNodes, &nbsp; &nbsp; &nbsp; me = this; &nbsp; &nbsp; // 转换成数组进行遍历 &nbsp; &nbsp; [].slice.call(childNodes).forEach(function (node) { &nbsp; &nbsp; &nbsp; // 获取节点的文本内容 &nbsp; &nbsp; &nbsp; var text = node.textContent; &nbsp; &nbsp; &nbsp; // 定义一个用于匹配插值语法的正则 &nbsp; &nbsp; &nbsp; var reg = /\{\{(.*)\}\}/; &nbsp; &nbsp; &nbsp; &nbsp; // 判断当前元素是否是元素节点 &nbsp; &nbsp; &nbsp; if (me.isElementNode(node)) { &nbsp; &nbsp; &nbsp; &nbsp; // 编译指令语法 &nbsp; &nbsp; &nbsp; &nbsp; me.compile(node); &nbsp; &nbsp; &nbsp; &nbsp; // 判断当前元素是否文本节点 &nbsp; &nbsp; &nbsp; &nbsp; // 并且里面是否有插值语法 &nbsp; &nbsp; &nbsp; } else if (me.isTextNode(node) &amp;&amp; reg.test(text)) { &nbsp; &nbsp; &nbsp; &nbsp; // 编译插值语法 &nbsp; &nbsp; &nbsp; &nbsp; // RegExp.$1.trim() 取出插值语法中的表达式 &nbsp; &nbsp; &nbsp; &nbsp; me.compileText(node, RegExp.$1.trim()); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; // 判断当前节点是否还有子节点 &nbsp; &nbsp; &nbsp; if (node.childNodes &amp;&amp; node.childNodes.length) { &nbsp; &nbsp; &nbsp; &nbsp; // 递归编译子节点 &nbsp; &nbsp; &nbsp; &nbsp; me.compileElement(node); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }); &nbsp; }, &nbsp; compile—解析标签节点 &nbsp; compile: function (node) { &nbsp; &nbsp; // 获取当前元素所有属性 &nbsp; &nbsp; var nodeAttrs = node.attributes, &nbsp; &nbsp; &nbsp; me = this; &nbsp; &nbsp; &nbsp; [].slice.call(nodeAttrs).forEach(function (attr) { &nbsp; &nbsp; &nbsp; // 获取当个属性名 v-on:click &nbsp; &nbsp; &nbsp; var attrName = attr.name; &nbsp; &nbsp; &nbsp; // 判断属性是否是指令属性 &nbsp; &nbsp; &nbsp; if (me.isDirective(attrName)) { &nbsp; &nbsp; &nbsp; &nbsp; // 获取指令属性对应表达式 &nbsp; &nbsp; &nbsp; &nbsp; var exp = attr.value; &nbsp; &nbsp; &nbsp; &nbsp; // 截取指令属性 on:click &nbsp; &nbsp; &nbsp; &nbsp; var dir = attrName.substring(2); &nbsp; &nbsp; &nbsp; &nbsp; // 事件指令 &nbsp; &nbsp; &nbsp; &nbsp; if (me.isEventDirective(dir)) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 给元素绑定事件 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; compileUtil.eventHandler(node, me.$vm, exp, dir); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 普通指令 &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; compileUtil[dir] &amp;&amp; compileUtil[dir](node, me.$vm, exp); &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 将编译好的属性给删除掉 &nbsp; &nbsp; &nbsp; &nbsp; // 只会删除指令属性，其他属性进不来 &nbsp; &nbsp; &nbsp; &nbsp; node.removeAttribute(attrName); &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }); &nbsp; }, &nbsp; compileText—解析文件节点插值语法 &nbsp; compileText: function (node, exp) { //node节点 &nbsp;&nbsp;exp插值语法:例如:name &nbsp; &nbsp; compileUtil.text(node, this.$vm, exp); &nbsp; }, &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> // CompileUtil指令处理集合 &nbsp;this指向compileUtile对象 compileUtil = { &nbsp; text: function (node, vm, exp) { &nbsp; &nbsp; this.bind(node, vm, exp, "text"); &nbsp; }, &nbsp; &nbsp; html: function (node, vm, exp) { &nbsp; &nbsp; this.bind(node, vm, exp, "html"); &nbsp; }, &nbsp; &nbsp; model: function (node, vm, exp) { &nbsp; &nbsp; // 给数据进行初始化显示 &nbsp; &nbsp; // node.value = xxx &nbsp; &nbsp; this.bind(node, vm, exp, "model"); &nbsp; &nbsp; &nbsp; var me = this, &nbsp; &nbsp; &nbsp; // 读取当前属性的值&nbsp; &nbsp; &nbsp; &nbsp; val = this._getVMVal(vm, exp); &nbsp; &nbsp; // 绑定input事件，监听元素的value的变化 &nbsp; &nbsp; node.addEventListener("input", function (e) { &nbsp; &nbsp; &nbsp; // 获取当前元素最新的值 &nbsp; &nbsp; &nbsp; var newValue = e.target.value; &nbsp; &nbsp; &nbsp; // 如果相等就不更新 &nbsp; &nbsp; &nbsp; if (val === newValue) { &nbsp; &nbsp; &nbsp; &nbsp; return; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; &nbsp; // 更新data数据 --&gt; 触发setter方法，从而更新用户界面 &nbsp; &nbsp; &nbsp; me._setVMVal(vm, exp, newValue); &nbsp; &nbsp; &nbsp; // 将当前值存起来，方便进行下一次比较~ &nbsp; &nbsp; &nbsp; val = newValue; &nbsp; &nbsp; }); &nbsp; }, &nbsp; &nbsp; class: function (node, vm, exp) { &nbsp; &nbsp; this.bind(node, vm, exp, "class"); &nbsp; }, &nbsp; &nbsp; /** &nbsp; &nbsp;* &nbsp; &nbsp;* @param {*} node 节点 &nbsp; &nbsp;* @param {*} vm 实例对象 &nbsp; &nbsp;* @param {*} exp expression表达式 'wife.name' &nbsp; &nbsp;* @param {*} dir directive指令 'text' &nbsp; &nbsp;*/ &nbsp; bind: function (node, vm, exp, dir) { &nbsp; &nbsp; // 取出要处理的函数 textUpdater &nbsp; &nbsp; var updaterFn = updater[dir + "Updater"]; &nbsp; &nbsp; // 判断函数是否存在并调用 &nbsp; &nbsp; // this._getVMVal(vm, exp) --&gt; 用来通过vm找到表达式(属性名)对应的值 &nbsp; &nbsp; updaterFn &amp;&amp; updaterFn(node, this._getVMVal(vm, exp));//给节点设置渲染的值 &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; /* &nbsp; &nbsp; &nbsp; 凡是 普通指令语法和插值语法 的元素会有watcher &nbsp; &nbsp; &nbsp; watcher都会有一个更新用户界面回调函数 &nbsp; &nbsp; */ &nbsp; &nbsp; new Watcher(vm, exp, function (value, oldValue) { &nbsp; &nbsp; &nbsp; updaterFn &amp;&amp; updaterFn(node, value, oldValue); &nbsp; &nbsp; }); &nbsp; }, &nbsp; &nbsp; /** &nbsp; &nbsp;* 事件处理 &nbsp; &nbsp;* @param {*} node 元素节点 &nbsp; &nbsp;* @param {*} vm 实例对象 &nbsp; &nbsp;* @param {*} exp 指令表达式 show &nbsp; &nbsp;* @param {*} dir 指令 on:click &nbsp; &nbsp;*/ &nbsp; eventHandler: function (node, vm, exp, dir) { &nbsp; &nbsp; // 获取事件类型 ['on', 'click'] &nbsp; &nbsp; var eventType = dir.split(":")[1], &nbsp; &nbsp; &nbsp; // 获取事件回调函数 &nbsp; &nbsp; &nbsp; fn = vm.$options.methods &amp;&amp; vm.$options.methods[exp]; &nbsp; &nbsp; &nbsp; if (eventType &amp;&amp; fn) { &nbsp; &nbsp; &nbsp; // 绑定事件监听 &nbsp; &nbsp; &nbsp; // 改变事件回调函数的this为vm fn.bind(vm) &nbsp; &nbsp; &nbsp; node.addEventListener(eventType, fn.bind(vm), false); &nbsp; &nbsp; } &nbsp; }, &nbsp; &nbsp; /** &nbsp; &nbsp;* 获取vm上对应表达式的值 &nbsp; &nbsp;* @param {*} vm &nbsp; &nbsp;* @param {*} exp 表达式 'wife.name' &nbsp; &nbsp;*/ &nbsp; _getVMVal: function (vm, exp) { &nbsp; &nbsp; var val = vm; exp = exp.split("."); // ['wife', 'name'] //表达式可能是xxx.xxx.xxx &nbsp; &nbsp; // 第一次遍历 val = vm['wife'] = {xxx} &nbsp; &nbsp; // 第二次遍历 val = {xxx}['name'] = 'rose' &nbsp; &nbsp; exp.forEach(function (k) { &nbsp; &nbsp; &nbsp; val = val[k]; &nbsp; &nbsp; }); &nbsp; &nbsp; return val; // 'rose' &nbsp; }, &nbsp; &nbsp; // 设置vm上对应表达式的值 &nbsp; _setVMVal: function (vm, exp, value) { &nbsp; &nbsp; var val = vm; &nbsp; &nbsp; exp = exp.split("."); &nbsp; &nbsp; exp.forEach(function (k, i) { &nbsp; &nbsp; &nbsp; // 非最后一个key，更新val的值 &nbsp; &nbsp; &nbsp; if (i &lt; exp.length - 1) { &nbsp; &nbsp; &nbsp; &nbsp; val = val[k]; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; val[k] = value; &nbsp; &nbsp; &nbsp; } &nbsp; &nbsp; }); &nbsp; }, }; &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> var updater = { &nbsp; textUpdater: function (node, value) { &nbsp; &nbsp; // 给node节点设置文本内容 &nbsp; &nbsp; node.textContent = typeof value == "undefined" ? "" : value; &nbsp; }, &nbsp; &nbsp; htmlUpdater: function (node, value) { &nbsp; &nbsp; // 给node节点设置html内容 &nbsp; &nbsp; node.innerHTML = typeof value == "undefined" ? "" : value; &nbsp; }, &nbsp; /** &nbsp; &nbsp;* 处理class方法 &nbsp; &nbsp;* @param {*} node &nbsp; &nbsp;* @param {*} value 表达式的值。font &nbsp; &nbsp;*/ &nbsp; classUpdater: function (node, value) { &nbsp; &nbsp; // 获取元素上的class属性的值 red &nbsp; &nbsp; var className = node.className; &nbsp; &nbsp; // 给元素设置新的className &nbsp; &nbsp; // 新的className=原来的class + ' ' + v-class设置的class &nbsp; &nbsp; node.className = className + " " + value; &nbsp; }, &nbsp; &nbsp; modelUpdater: function (node, value, oldValue) { &nbsp; &nbsp; node.value = typeof value == "undefined" ? "" : value; &nbsp; }, }; &nbsp; </td> 
 </tr> 
 </tbody> 
</table>