js模版引擎介绍

js模版引擎介绍

JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法，但通常是非常简单的，一个要注意的有趣的点是，替换标记通常是由双花括号({ {……} })表示，这也是 Mustache 和 Handlebars 名字的来源。

什么时候使用JavaScript模板？

一旦我们发现自己在 JavaScript 字符串内包含 HTML，就应该开始考虑 JavaScript 模板可能给我们带来的好处。当建立一个可维护的代码库，关注点分离是至关重要的，所以任何可以帮助我们实现这一目标的手段都应该探索。 
在前端 web 开发，将 HTML 从 JavaScript 分离显得很重要（这是双向的，我们也不应该在 HTML 中内联 JavaScript）

概述

模板引擎大都由 5 部分组成：语法、解析、编译、缓存、渲染。

1. 语法，定义模板书写方式

   • Embedded JavaScript Templates，意思是说你可以将js直接写在模板里面，从而实现一些复杂的渲染逻辑。基于原生 JS语法，解析简单、渲染性能接近极限；书写略烦，容易导致模板中出现过多的业务代码而失控。
   • Logic-less Templates，这种模板引擎的哲学是模板应当同逻辑尽可能的分离， 因此，你不能在模板中随意加入js代码，而只能利用模板引擎本身提供的机制来实现一些简单的功能。基于自定义语法，解析复杂、渲染性能不一

2. 解析，包括词法分析（lexical analysis、scanning）和语义分析（syntax analysis、parsing）两步。

   • 手写解析器，基于正则的字符串解析、转义
   • 基于解析器生成器自动生成
   • 基于 DOM 结构存储模板，解析存储在 data- 的配置

3. 编译，模板为直接可直接运行的函数

   • 及时编译
   • 预编译
   • 延迟编译

4. 缓存，用于提升性能

   • 缓存编译结果（函数）
   • 缓存渲染过程中涉及的数据（查找结果，字符串）
   • 不缓存，由用户缓存

5. 渲染，执行编译结果，生成 HTML

   • 优先从缓存中读取

各种模板引擎主要是解析方式的不同，语法、编译、缓存、渲染则各有权衡。

几种常见模版引擎的介绍：

)

1. mustache.js (Github地址) 
   mustache是logic-less的，所以其一大特点是模板中没有任何if，for结构， 而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰，易于维护。

   关键点

   • 文件9kb大小（很小）
   • 简单
   • 无依赖
   • 无逻辑
   • 非预编译模板
   • 编程语言无关

   模板：

   1. <h1>{{header}}</h1>
   2. {{#bug}}
   3. {{/bug}}
   5. {{#items}}
   6. {{#first}}
   7. <li><strong>{{name}}</strong></li>
   8. {{/first}}
   9. {{#link}}
   10. <li><a href="{{url}}">{{name}}</a></li>
   11. {{/link}}
   12. {{/items}}
   14. {{#empty}}
   15. <p>The list is empty.</p>
   16. {{/empty}}

   数据：

   1. {
   2. "header": "Colors",
   3. "items": [
   4. {"name": "red", "first": true, "url": "#Red"},
   5. {"name": "green", "link": true, "url": "#Green"},
   6. {"name": "blue", "link": true, "url": "#Blue"}
   7. ],
   8. "empty": false
   9. }

   渲染结果：

   1. <h1>Colors</h1>
   2. <li><strong>red</strong></li>
   3. <li><a href="#Green">green</a></li>
   4. <li><a href="#Blue">blue</a></li>

2. handlebars.js (Github地址) 
   采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板

   关键点

   • 86kb文件大小（大），或者使用预编译模板是18kb
   • 块表达式（helpers）
   • 预编译模板
   • 无依赖
   1. {{#if list}}
   2. <ul id="list">
   3. {{#each list}}
   4. <li>{{this}}</li>
   5. {{/each}}
   6. </ul>
   7. {{else}}
   8. <p>{{error}}</p>
   9. {{/if}}

   对应适用json数据

   1. var data = {
   2. info:['HTML5','CSS3',"WebGL"],
   3. "error":"数据取出错误"
   4. }

   这里{{#if}}判断是否存在list数组，如果存在则遍历list，如果不存在输出错误信息

3. Embedded JS Teamplates（EJS） Github地址

   来源于ERB模板，且与ERB有很多相似之处。它有着与ERB相同的Tag，且包含很多相同的功能。EJS的特别之处在于，你需要把模板存于单独文件中，并将文件名传递给EJS。它会加载该文件，并返回HTML。 
   EJS的特别之处在于，你需要把模板存于单独文件中，并将文件名传递给EJS。它会加载该文件，并返回HTML。

   1. // in template.ejs
   2. Hello, <%= name %>
   4. // in JS file
   5. new EJS({ url: "template.ejs" }).render({ name: "Jack" });
   6. // 返回： Hello, Jack

   注意，你可以加载文本模板：

   1. new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack"});

   下面将介绍如何进行循环，以数组“People”为例，并在网站上链接到他们的个人页面：

   1. // template.ejs
   2. <ul>
   3. <% for(var i = 0; i < people.length; i++) { %>
   4. <li><%= link_to(people[i], "/profiles/" + people[i]) %></li>
   5. <% } %>
   6. </ul>
   8. // in JS file
   9. new EJS({ url: "template.ejs" }).render({ people: [ "Jack","Fred" ] })
   11. // Each rendered <li> will look like:
   12. <li><a href="/profiles/Jack">Jack</a></li>

   这与Underscore 有些相似，但要注意“link_to”的使用。它是EJS定义的一个Helper，以便链接更容易使用。

4. art-template(Github地址)

   artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题。 
   独有模板编译工具，它能把前端模板编译成不依赖模板引擎运行的JS文件，让前端模板可以突破浏览器的限制，实现像后端模板一样按文件与目录的方式组织、按需加载、include嵌套等。这一切都在 2.7kb(gzip) 中实现！

   1.引用js文件：

   1. <script src="js/arttmpl.js"></script>

   2.页面中，使用一个type="text/template"的script标签存放模板：

   1. <script id='doctor-template' type="text/template">
   2. <% for(var i in data){ var item=data[i]; %>
   3. <li class="mui-table-view-cell mui-media ">
   4. <a href="javascript:;" class="mui-navigate-right">
   5. <div class="mui-media-object mui-pull-left">
   6. <img src="<%=(item.photo)%>" width="100%">
   7. <span class="mui-badge mui-badge-danger"><%=(item.score)%>分</span>
   8. </div>
   9. <div class="mui-media-body">
   10. <%=(item.name)%>&nbsp;<span class="mui-badge mui-badge-warning"><%=(item.position)%></span>
   11. <p class="mui-ellipsis"><%=(item.hospital)%></p>
   12. <p class="mui-ellipsis"><%=(item.desc)%></p>
   13. </div>
   14. </a>
   15. </li>
   16. <% } %>
   17. </script>

   模板逻辑语法开始与结束的界定符号为<% 与 %>，若<%后面紧跟=号则输出变量内容。

   3.渲染模板

   1. template.render(id, data);

   继续上面的例子：

   1. var fragment = template('doctor-template', {
   2. "data":[
   3. {
   4. name:"王静",
   5. score:4.5,
   6. photo:'images/logo.png',
   7. hospital:"江苏省中医院",
   8. desc:'妇科、不孕不育症、月经病等',
   9. position:'副医师'
   10. },
   11. {
   12. name:"啦啦",
   13. score:4.9,
   14. photo:'images/logo.png',
   15. hospital:"鼓楼医院",
   16. desc:'儿童呼吸系统疾病的诊治，对于儿童疾病',
   17. position:'主治医师'
   18. }
   19. ]
   20. });

5. Juicer (Github地址)

   当前最新版本: 0.6.14 
   Juicer 是一个高效、轻量的前端 (Javascript) 模板引擎，使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC)。除此之外，它还可以在 Node.js 环境中运行。

   使用方法

   • 编译模板并根据所给的数据立即渲染出结果.

     1. juicer(tpl, data);

   • 仅编译模版暂不渲染，它会返回一个可重用的编译后的函数.

     1. var compiled_tpl = juicer(tpl);

   • 根据给定的数据，对之前编译好的模板进行数据渲染.

     1. var compiled_tpl = juicer(tpl);
     2. var html = compiled_tpl.render(data);