一、模版解析的分析 模版解析:对模版进行拆解分析。模版解析的实现过程: 将 el 的所有子节点取出, 添加到一个新建的文档 fragment 对象中对 fragment 中的所有层次子节点递归进行编译解析处理 对大括号表达式文本节点进行解析对元素节点的指令属性进行解析 事件指令解析一般指令解析 将解析后的 fragment 添加到 el 中显示 模版解析的关键过程: function Compile(el, vm) { // 保存vm this.$vm = vm; // 保存el元素 this.$el = this.isElementNode(el) ? el : document.querySelector(el); // 如果el元素存在 if (this.$el) { // 1. 取出el中所有子节点, 封装在一个framgment对象中 this.$fragment = this.node2Fragment(this.$el); // 2. 编译fragment中所有层次子节点 this.init(); // 3. 将fragment添加到el中 this.$el.appendChild(this.$fragment); } } 模版解析在挂载原型prototype上,通过document.createDocumentFragment()创建fragment对象,核心代码如下: node2Fragment: function (el) { var fragment = document.createDocumentFragment(), child; // 将原生节点拷贝到fragment while (child = el.firstChild) { fragment.appendChild(child); } return fragment; }