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);