资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/js模版引擎介绍

js模版引擎介绍

duan199226 / 352人阅读

摘要：使用方法编译模板并根据所给的数据立即渲染出结果仅编译模版暂不渲染，它会返回一个可重用的编译后的函数根据给定的数据，对之前编译好的模板进行数据渲染参考资料模板引擎概述

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大小（很小）

简单

无依赖

无逻辑

非预编译模板

编程语言无关

模板：

{{header}}

{{#bug}}
{{/bug}}
{{#items}}
{{#first}}

  • {{name}}
    • 
{{/first}}
{{#link}}

  • {{name}}
    • 
{{/link}}
{{/items}}
{{#empty}}

    The list is empty.
    
{{/empty}}

    数据：

    {
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}

    渲染结果：

    Colors
    

  • red
    • 

  • green
    • 

  • blue
    • handlebars.js (Github地址)

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

    关键点

    86kb文件大小（大），或者使用预编译模板是18kb

    块表达式（helpers）

    预编译模板

    无依赖

    {{#if list}}

      
{{#each list}}

    • {{this}}
      • 
{{/each}}

    
{{else}}

    {{error}}
    
{{/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

      
<% for(var i = 0; i < people.length; i++) { %>

    • <%= link_to(people[i], "/profiles/" + people[i]) %>
      • 
<% } %>

    
// in JS file
new EJS({ url: "template.ejs" }).render({ people: [ "Jack", "Fred" ] })
// Each rendered 
  •  will look like:

  • Jack

    • 这与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文件：

    2.页面中，使用一个type="text/template"的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);
    参考资料

    artTemplate-3.0
    JavaScript 模板引擎概述

    云服务器 GPU云服务器 模版介绍 模版引擎 smarty模版引擎 js数据赋值到模版

    文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

    转载请注明本文地址：https://www.ucloud.cn/yun/79941.html

    相关文章

    • velocity的基本使用 && 实例讲解

      摘要：的简介是一个基于的模板引擎。使用，也可以写成。所以，应该使用规范的格式书写现在知道变量是而不是。如当页面中包含，如果对象有值，将显示的值，如果不存在对象同，则在页面中将显示字符。 velocity的简介 Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象，...

      zhunjiee 评论0 收藏0

    • velocity的基本使用 && 实例讲解

      摘要：的简介是一个基于的模板引擎。使用，也可以写成。所以，应该使用规范的格式书写现在知道变量是而不是。如当页面中包含，如果对象有值，将显示的值，如果不存在对象同，则在页面中将显示字符。 velocity的简介 Velocity是一个基于java的模板引擎（template engine）。它允许任何人仅仅简单的使用模板语言（template language）来引用由java代码定义的对象，...

      scq000 评论0 收藏0

    • Express 实战（七）：视图与模板：Pug 和 EJS

      摘要：而框架中最常用的两个视图引擎是和。实际上这些上下文对象就是会在视图中使用到的变量。其实视图缓存并不是缓存视图实际上它缓存的视图路径。根据默认视图引擎将缺少拓展名的视图文件补充完整。实际上存在由不同组织维护的两个不同版本的。 showImg(https://segmentfault.com/img/remote/1460000010821004);前面的内容大都是关于 Express 框...

      wmui 评论0 收藏0

    • Vue.js新手入门指南[转载]

      摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。 最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

      MartinHan 评论0 收藏0

    • 构建一个使用 Virtual-DOM 的前端模版引擎

      摘要：目录前言问题的提出模板引擎和结合的实现编译原理相关模版引擎的词法分析语法分析与抽象语法树代码生成完整的结语前言本文尝试构建一个前端模板引擎，并且把这个引擎和进行结合。于是就构思了一个方案，在前端模板引擎上做手脚。 作者：戴嘉华 转载请注明出处并保留原文链接（ https://github.com/livoras/blog/issues/14 ）和作者信息。 目录 前言 问题的提出...

      imccl 评论0 收藏0

    发表评论

    登陆后可评论

    0条评论

    duan199226

    男|高级讲师
    我要私信

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <