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

浅浅的花香味﹌ 2022-07-24 09:23 176阅读 0赞

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

[源码请戳][Link 1]  
[原文请戳][Link 2]

## 什么是模版渲染引擎 ##

还是先来看一下上一篇有关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。

<template id="test">
 First name: 
 Last name: 
 </template>

将我们要渲染的Html包裹在中，加上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][Link 1]里去查看）

### 4.渲染完成 ###

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

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

#### 5.总结 ####

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

[源码请戳][Link 1]  
[原文请戳][Link 2]

[Link 1]: https://github.com/kkkkkxiaofei/Dig-Knockout
[Link 2]: https://kkkkkxiaofei.github.io/jekyll/update/2015/12/20/mvvm%282%29.html