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

前言

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

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

{{title}}

还有一种是表达式的解析处理,形如:

{{# 表达式}}

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

自己实现的部分非常简单,实际上就是操作DOM获取指定的结构,替换{{变量}}的值而已,以后会研究Vue相关的源码,到时看看Vue中关于模板处理的处理实现,HTML结构以及实现效果图如下所示:
layui源码详细分析系列之模板引擎_第1张图片
layui源码详细分析系列之模板引擎_第2张图片

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

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

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

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

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

layuitpl.js内置模块中的组织结构图如下所示:
layui源码详细分析系列之模板引擎_第3张图片

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

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

在内部实际上构建成了:

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

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

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

致远行的你我

你可能感兴趣的:(layui源码分析)