Published on

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

Authors
  • avatar
    Name
    Pursue
    Twitter

上一篇介绍了 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。

源码请戳这里