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

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

源码请戳
原文请戳

什么是模版渲染引擎

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

First name:

Last name:

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。


将我们要渲染的Html包裹在