打造属于自己的MVVM框架: 2.模版渲染引擎

上一篇介绍了 MVVM 的基本知识，本篇讲针对 MVVM 的模版渲染引擎进行介绍，不但从原理上对模版引擎的渲染原理进行剖析，而且有会相应的实现代码。

什么是模版渲染引擎

还是先来看一下上一篇有关 knockoutjs 的 Demo:

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

var viewModel = {
  firstName: 'Bert',
  lastName: 'Bertington',
}
ko.applyBindings(viewModel)

页面效果：

First name: Bert

Last name: Bertington

在 HTML 里，我们用data-bind: "text: firstName"作为 Binding Instruction,而在 JS 里的 viewModel 相当于一个$scope,当 Dom 加载时，首先会检查 HTML 标签，发现有 Binding Instruction 后会对 DOM 进行解析，此时根据具体的指令在 viewModel 中进行解析，将解析后的值渲染到已经生成的 DOM 树上，就完成了整个指令渲染工作，而这个流程，就是前端模版渲染引擎的主要任务。

怎么做一个简单的渲染引擎

其实称为引擎还真有点夸张，充其量它只不过是一个解析的逻辑流程，在整个过程中有三个部分：

模版，即 Html
渲染源，即 viewModel
所谓的引擎，一段解析流程的，由 knockoutjs 负责

现在我们来自己试着实现一下这个模版引擎。

1.模版

为了在渲染是保留原模版，我采用 template 标签去画 Html 模版，因为：

template 标签可以放在任意位置
template 标签默认 display: none

基于以上优点，个人觉得 template 标签太适合做模版了，难怪会称为 template。

<template id="test">
  <p>First name: <strong data-bind="text: firstName"></strong></p>
  <p>Last name: <strong data-bind="text: lastName"></strong></p>
</template>

将我们要渲染的 Html 包裹在<template>中，加上 id 是为了能够确保唯一。

2.解析 template

利用 id 我们可以唯一找到 template，首先将 template 里的内容取出来，

var clone = document.importNode(document.querySelector('#' + id).content, true)

分离子节点

var fragmentContent = splitSubRealDoms(clone)
function splitSubRealDoms(fatherDom) {
  var subRealDoms = []
  while (fatherDom.firstElementChild) {
    var firstElementChild = fatherDom.removeChild(fatherDom.firstElementChild)
    subRealDoms.push(firstElementChild)
  }
  return subRealDoms
}

3.根据父节点的 Binding Instruction 去渲染子节点

for (var i = 0; i < fragmentContent.length; i++) {
  var result = renderTemplate(fragmentContent[i], viewModel)
}

renderTemplate 的方法较为复杂，首先会渲染父节点，然后将所有的子节点当作父节点再次递归，直到没有子节点为止。递归后的子节点集合渲染完后，需要加入到重新加入到父节点中。递归中途需要对data-bind = instruction: value进行解析，将得到的 value 值在 viewModel 的$scope 中，利用 eval 进行解析后绑定到 DOM 上。（详细代码略长，就不在这里贴了，可以去我的repo里去查看）

4.渲染完成

渲染完成后，将最终的结果插入到 body 上。

$('body').append($(result))

5.总结

这一节主要介绍了前端模版引擎的工作原理，同时也分享了我自己的代码。但模版引擎仅仅只起到了单向绑定的效果（即 viewModl->view），要想体现 MVVM 的优势，那就必须得实现双向绑定，那就必须的介绍 MVVM 中的核心对象 observable 了，下一篇会介绍如何实现 observable。

源码请戳这里