layui源码详细分析系列之模板引擎

前言

所谓的模板引擎，其实最早接触该形式的应该是jsp，在html代码中嵌套java代码，使用形式与模板很相似，实际上jsp就是一种模板语言，对于模板语言我的了解并不多，此处就不再详细的描述了。

当我看见layui内置的模板引擎模块laytpl.js时，我首先想起的是Vue中{{}}模板的使用，但是Vue中还有双向绑定的概念（你可已使用get/set方法来实现），laytpl.js中提供的模板类型有两种，一种是单纯的变量解析的形式，形如：

<h3>{{title}}</h3>

还有一种是表达式的解析处理，形如：

{{# 表达式}}

自实现简单模板解析以及指令

自己实现的部分非常简单，实际上就是操作DOM获取指定的结构，替换{{变量}}的值而已，以后会研究Vue相关的源码，到时看看Vue中关于模板处理的处理实现，HTML结构以及实现效果图如下所示：

我实现的模板只是{{}}的形式，不支持表达式的处理，同时实现了v-if、v-text的指令（Vue中相应的指令），实现思路很简单，具体如下：

• 对于指令获取节点元素的相应属性，判断属性值对应的变量是否存在，存在就执行相应操作，最后清除掉对应的指令属性，v-if支持单目运算符！
• 对于{{}}，查找nodeType为3的文本节点，匹配相应的正则表达式，执行对应变量值内容填充

在上面的实现中使用递归函数，遍历body下所有的节点，区分元素节点以及文本节点做不同的处理。

下面说说laytpl.js模块的处理方式，laytpl的使用形式如下：

laytpl(模板).render(data, function(html) {    // html：模板解析后的形式});

layuitpl.js内置模块中的组织结构图如下所示：

可以看出代码组织简洁清晰，主要的方法时render、parsey以及laytpl函数，
这几个函数的具体功能在上图中有了较为详细的描述，该内置模块中是如何实现变量填充的呢？
实际上，在该内置模块内部，是将模板构建成js代码的形式，并将其构建成函数，从而完成变量的填充，例如：

var data = {'city': 'shanghai'}layTpl('欢迎来到{{city}}').render(data, fucntion(html) {})

在内部实际上构建成了:

tpl = '欢迎来到' + (d.city);tpl = '"use strict; var view = "' + tpl +'; return view;'var tpl = new Function(d, _escape_, tpl);

最后执行tpl方法填充变量，实际上还可以使用ES6中字符串模板来实现，当然方法很多种，但殊途同归。

该内置模块详细的代码注释以及自实现demo会上传到我的GitHub上，每天得要接触新的内容，这样自己才会一点点成长。

致远行的你我