js模版引擎介绍
JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法,但通常是非常简单的,一个要注意的有趣的点是,替换标记通常是由双花括号({ {……} })表示,这也是 Mustache 和 Handlebars 名字的来源。
什么时候使用JavaScript模板?
一旦我们发现自己在 JavaScript 字符串内包含 HTML,就应该开始考虑 JavaScript 模板可能给我们带来的好处。当建立一个可维护的代码库,关注点分离是至关重要的,所以任何可以帮助我们实现这一目标的手段都应该探索。
在前端 web 开发,将 HTML 从 JavaScript 分离显得很重要(这是双向的,我们也不应该在 HTML 中内联 JavaScript)
概述
模板引擎大都由 5 部分组成:语法、解析、编译、缓存、渲染。
-
语法,定义模板书写方式
- Embedded JavaScript Templates,意思是说你可以将js直接写在模板里面,从而实现一些复杂的渲染逻辑。基于原生 JS语法,解析简单、渲染性能接近极限;书写略烦,容易导致模板中出现过多的业务代码而失控。
- Logic-less Templates,这种模板引擎的哲学是模板应当同逻辑尽可能的分离, 因此,你不能在模板中随意加入js代码,而只能利用模板引擎本身提供的机制来实现一些简单的功能。基于自定义语法,解析复杂、渲染性能不一
-
解析,包括词法分析(lexical analysis、scanning)和语义分析(syntax analysis、parsing)两步。
- 手写解析器,基于正则的字符串解析、转义
- 基于解析器生成器自动生成
- 基于 DOM 结构存储模板,解析存储在 data- 的配置
-
编译,模板为直接可直接运行的函数
- 及时编译
- 预编译
- 延迟编译
-
缓存,用于提升性能
- 缓存编译结果(函数)
- 缓存渲染过程中涉及的数据(查找结果,字符串)
- 不缓存,由用户缓存
-
渲染,执行编译结果,生成 HTML
- 优先从缓存中读取
各种模板引擎主要是解析方式的不同,语法、编译、缓存、渲染则各有权衡。
几种常见模版引擎的介绍:
)
-
mustache.js (Github地址)
mustache是logic-less的,所以其一大特点是模板中没有任何if,for结构, 而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰,易于维护。关键点
- 文件9kb大小(很小)
- 简单
- 无依赖
- 无逻辑
- 非预编译模板
- 编程语言无关
模板:
-
<h1>{{header}}</h1>
-
{{#bug}}
-
{{/bug}}
-
-
{{#items}}
-
{{#first}}
-
<li><strong>{{name}}</strong></li>
-
{{/first}}
-
{{#link}}
-
<li><a href="{{url}}">{{name}}</a></li>
-
{{/link}}
-
{{/items}}
-
-
{{#empty}}
-
<p>The list is empty.</p>
-
{{/empty}}
数据:
-
{
-
"header": "Colors",
-
"items": [
-
{"name": "red", "first": true, "url": "#Red"},
-
{"name": "green", "link": true, "url": "#Green"},
-
{"name": "blue", "link": true, "url": "#Blue"}
-
],
-
"empty": false
-
}
渲染结果:
-
<h1>Colors</h1>
-
<li><strong>red</strong></li>
-
<li><a href="#Green">green</a></li>
-
<li><a href="#Blue">blue</a></li>
-
handlebars.js (Github地址)
采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板关键点
- 86kb文件大小(大),或者使用预编译模板是18kb
- 块表达式(helpers)
- 预编译模板
- 无依赖
-
{{#if list}}
-
<ul id="list">
-
{{#each list}}
-
<li>{{this}}</li>
-
{{/each}}
-
</ul>
-
{{else}}
-
<p>{{error}}</p>
-
{{/if}}
对应适用json数据
-
var data = {
-
info:['HTML5','CSS3',"WebGL"],
-
"error":"数据取出错误"
-
}
这里{{#if}}判断是否存在list数组,如果存在则遍历list,如果不存在输出错误信息
-
Embedded JS Teamplates(EJS) Github地址
来源于ERB模板,且与ERB有很多相似之处。它有着与ERB相同的Tag,且包含很多相同的功能。EJS的特别之处在于,你需要把模板存于单独文件中,并将文件名传递给EJS。它会加载该文件,并返回HTML。
EJS的特别之处在于,你需要把模板存于单独文件中,并将文件名传递给EJS。它会加载该文件,并返回HTML。-
// in template.ejs
-
Hello, <%= name %>
-
-
// in JS file
-
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
-
// 返回: Hello, Jack
注意,你可以加载文本模板:
-
new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack"});
下面将介绍如何进行循环,以数组“People”为例,并在网站上链接到他们的个人页面:
-
// template.ejs
-
<ul>
-
<% for(var i = 0; i < people.length; i++) { %>
-
<li><%= link_to(people[i], "/profiles/" + people[i]) %></li>
-
<% } %>
-
</ul>
-
-
// in JS file
-
new EJS({ url: "template.ejs" }).render({ people: [ "Jack","Fred" ] })
-
-
// Each rendered <li> will look like:
-
<li><a href="/profiles/Jack">Jack</a></li>
这与Underscore 有些相似,但要注意“link_to”的使用。它是EJS定义的一个Helper,以便链接更容易使用。
-
-
art-template(Github地址)
artTemplate 是新一代 javascript 模板引擎,它在 v8 中的渲染效率可接近 javascript 性能极限,在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。引擎支持调试。若渲染中遇到错误,调试器可精确定位到产生异常的模板语句,解决前端模板难以调试的问题。
独有模板编译工具,它能把前端模板编译成不依赖模板引擎运行的JS文件,让前端模板可以突破浏览器的限制,实现像后端模板一样按文件与目录的方式组织、按需加载、include嵌套等。这一切都在 2.7kb(gzip) 中实现!1.引用js文件:
-
<script src="js/arttmpl.js"></script>
2.页面中,使用一个type="text/template"的script标签存放模板:
-
<script id='doctor-template' type="text/template">
-
<% for(var i in data){ var item=data[i]; %>
-
<li class="mui-table-view-cell mui-media ">
-
<a href="javascript:;" class="mui-navigate-right">
-
<div class="mui-media-object mui-pull-left">
-
<img src="<%=(item.photo)%>" width="100%">
-
<span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>
-
</div>
-
<div class="mui-media-body">
-
<%=(item.name)%> <span class="mui-badge mui-badge-warning"><%=(item.position)%></span>
-
<p class="mui-ellipsis"><%=(item.hospital)%></p>
-
<p class="mui-ellipsis"><%=(item.desc)%></p>
-
</div>
-
</a>
-
</li>
-
<% } %>
-
</script>
模板逻辑语法开始与结束的界定符号为<% 与 %>,若<%后面紧跟=号则输出变量内容。
3.渲染模板
-
template.render(id, data);
继续上面的例子:
-
var fragment = template('doctor-template', {
-
"data":[
-
{
-
name:"王静",
-
score:4.5,
-
photo:'images/logo.png',
-
hospital:"江苏省中医院",
-
desc:'妇科、不孕不育症、月经病等',
-
position:'副医师'
-
},
-
{
-
name:"啦啦",
-
score:4.9,
-
photo:'images/logo.png',
-
hospital:"鼓楼医院",
-
desc:'儿童呼吸系统疾病的诊治,对于儿童疾病',
-
position:'主治医师'
-
}
-
]
-
});
-
-
Juicer (Github地址)
当前最新版本: 0.6.14
Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外,它还可以在 Node.js 环境中运行。使用方法
-
编译模板并根据所给的数据立即渲染出结果.
-
juicer(tpl, data);
-
-
仅编译模版暂不渲染,它会返回一个可重用的编译后的函数.
-
var compiled_tpl = juicer(tpl);
-
-
根据给定的数据,对之前编译好的模板进行数据渲染.
-
var compiled_tpl = juicer(tpl);
-
var html = compiled_tpl.render(data);
-
-