JavaScript模板引擎Template.js使用详解

最新推荐文章于 2023-04-25 22:11:22 发布
最新推荐文章于 2023-04-25 22:11:22 发布
阅读量3.4k 收藏 6
点赞数
文章标签： javascript html5 html
原文链接：https://blog.csdn.net/pupilxiaoming/article/details/77118855
版权
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate

1、特性

（1）、性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）（2）、支持运行时调试，可精确定位异常模板所在语句（演示）

（3）、对 NodeJS Express 友好支持（4）、安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）

（5）、支持include语句

（6）、可在浏览器端实现按路径加载模板（详情）

（7）、支持预编译，可将模板转换成为非常精简的 js 文件

（8）、模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选

（9）、支持所有流行的浏览器

2、语法

（1）、使用

引用简洁语法的引擎版本，例如： <script src="dist/template.js"></script> 

（2）、表达式

{ { 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

（3）、输出表达式

对内容编码输出： { {content}} 
不编码输出： { {#content}} 
编码可以防止数据中含有 HTML 字符串，避免引起 XSS 攻击。

（4）、条件表达式

?
1
2
3
4
5
6
7
{ {if admin}}
  < p >admin</ p >
{ {else if code > 0}}
  < p >master</ p >
{ {else}}
  < p >error!</ p >
{ {/if}}

（5）、遍历表达式

无论数组或者对象都可以用 each 进行遍历。

?
1
2
3
{ {each list as value index}}
  < li >{ {index}} - { {value.user}}</ li >
{ {/each}}

亦可以被简写：

?
1
2
3
{ {each list}}
  < li >{ {$index}} - { {$value.user}}</ li >
{ {/each}}

（6）、模板包含表达式

用于嵌入子模板。

{ {include 'template_name'}} 

子模板默认共享当前数据，亦可以指定数据：{ {include 'template_name' news_list}} 

（7）、辅助方法

使用template.helper(name, callback)注册公用辅助方法：

?
1
2
3
4
template.helper('dateFormat', function (date, format) {
  // ..
  return value;
});

模板中使用的方式： { {time | dateFormat:'yyyy-MM-dd hh:mm:ss'}} 
支持传入参数与嵌套使用： { {time | say:'cd' | ubb | link}} 

3、实例

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >basic-demo</ title >
< script src = "../dist/template.js" ></ script >
</ head >
< body >
< div id = "content" ></ div >
< script id = "test" type = "text/html" >
{ {if isAdmin}}
< h1 >{ {title}}</ h1 >
< ul >
  { {each list as value i}}
   < li >索引 { {i + 1}} ：{ {value}}</ li >
  { {/each}}
</ ul >
{ {/if}}
</ script >
< script >
var data = {
  title: '基本例子',
  isAdmin: true,
  list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</ script >
</ body >
</ html >

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >no escape-demo</ title >
< script src = "../dist/template.js" ></ script >
</ head >
  
< body >
  < h1 >不转义HTML</ h1 >
  < div id = "content" ></ div >
  < script id = "test" type = "text/html" >
  < p >不转义：{ {#value}}</ p >
  < p >默认转义： { {value}}</ p >
  </ script >
  
  < script >
  var data = {
   value: '< span style = "color:#F00" >hello world!</ span >'
  };
  var html = template('test', data);
  document.getElementById('content').innerHTML = html;
  </ script >
</ body >
</ html >

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >include-demo</ title >
< script src = "../dist/template.js" ></ script >
</ head >
  
< body >
< div id = "content" ></ div >
< script id = "test" type = "text/html" >
< h1 >{ {title}}</ h1 >
{ {include 'list'}}
</ script >
< script id = "list" type = "text/html" >
< ul >
  { {each list as value i}}
   < li >索引 { {i + 1}} ：{ {value}}</ li >
  { {/each}}
</ ul >
</ script >
  
< script >
var data = {
  title: '嵌入子模板',
  list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</ script >
</ body >
</ html >

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE HTML>
< html >
< head >
< meta charset = "UTF-8" >
< title >helper-demo</ title >
< script src = "../dist/template.js" ></ script >
</ head >
  
< body >
< h1 >辅助方法</ h1 >
< div id = "content" ></ div >
< script id = "test" type = "text/html" >
{ {time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</ script >
  
< script >
/**
  * 对日期进行格式化，
  * @param date 要格式化的日期
  * @param format 进行格式化的模式字符串
  *  支持的模式字母有：
  *  y:年,
  *  M:年中的月份(1-12),
  *  d:月份中的天(1-31),
  *  h:小时(0-23),
  *  m:分(0-59),
  *  s:秒(0-59),
  *  S:毫秒(0-999),
  *  q:季度(1-4)
  * @return String
  * @author yanis.wang
  * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/
  */
template.helper('dateFormat', function (date, format) {
  
  if (typeof date === "string") {
   var mts = date.match(/(\/Date(\d+)\/)/);
   if (mts && mts.length >= 3) {
    date = parseInt(mts[2]);
   }
  }
  date = new Date(date);
  if (!date || date.toUTCString() == "Invalid Date") {
   return "";
  }
  
  var map = {
   "M": date.getMonth() + 1, //月份
   "d": date.getDate(), //日
   "h": date.getHours(), //小时
   "m": date.getMinutes(), //分
   "s": date.getSeconds(), //秒
   "q": Math.floor((date.getMonth() + 3) / 3), //季度
   "S": date.getMilliseconds() //毫秒
  };
   
  
  format = format.replace(/([yMdhmsqS])+/g, function(all, t){
   var v = map[t];
   if(v !== undefined){
    if(all.length > 1){
     v = '0' + v;
     v = v.substr(v.length-2);
    }
    return v;
   }
   else if(t === 'y'){
    return (date.getFullYear() + '').substr(4 - all.length);
   }
   return all;
  });
  return format;
});
  
// --------
  
var data = {
  time: 1408536771253,
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</ script >
</ body >
</ html >


以上就是本文的全部内容，希望对大家的学习有所帮助
底层初学者
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript模板引擎Template.js基本使用详解
slongzhang的博客
05-10 2253
template.js是一款JavaScript模板引擎，提供一套模板语法，简单好用，开发者可以写一个模板区块，每次传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。先使用jquery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。2.第二种使用方法（引用模板）
templatejs使用总结
TXW6666的博客
11-24 3149
templatejs使用总结 概述 template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很多相关的博客，博客内容几乎一样，很多知识点并没有详细的说明，对此经过两天的实验研究，把研究的结果记录下来。 模板标签 1.{{each}}:双标签，用于遍历对象，数组或者 json 对象。 2.{{if}}:双标签，用于数据类型的判断，条件可以是表达式。 3.{{else}}:单标签，配合 {{i
模板引擎template.js
GuardianMANGO的博客
04-09 1109
模板引擎 什么是模板引擎 可以根据程序员指定的模板结构和数据，自动生成一个完整的html即为模板引擎 模板引擎的好处 减少字符串的拼接操作 使代码更加清晰 使代码更易于阅读与维护 art-template 使用步骤 导入 art-template 定义数据 定义模板 调用template函数 渲染html结构 <body> <div id="container"></div> <script src="./js/template-web.
template.js的使用案例
qq_41932661的博客
04-13 872
template.js是一款开源的JavaScript模板引擎，用来渲染页面的 第一步：首页页面引用 <script type="text/javascript" src="js/template.js"></script> 第二步：模板创建 <!-- 模版 --> <script type="text/html" id="templet"&g...
高性能JavaScript模板引擎实现原理详解
10-24
主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25、32 倍,需要的朋友可以参考下
详解js模板引擎art template数组渲染的方法
12-10
JavaScript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，模板引擎种类也是五花八门，我就说几个安全性高、错误处理调试优，执行速度快的有artTemplate(腾讯 14k)、juicer(国外 12k)这俩个，...
template.js的使用心得
u012746918的博客
02-17 1441
template.js是一款JavaScript模板引擎，用来渲染页面的。 原理：提前将Html代码放进编写模板 <script id="tpl" type="text/html"></script> 中，当需要渲染页面时，在js里这样调用： ?1var tpl = document.getElementById('tpl').innerHTML; temp...
template.js源码下载
10-14
轻松使用js拼接html， jsTemplate帮助你轻松搞定，不用再为js拼接html字符串苦恼了。
template.js 用法
H291850336的专栏
12-21 1万+
html 模板 artTemplate.js 一、官网 (artTemplate){https://aui.github.io/art-template/} (artTemplate 简洁语法版){https://github.com/aui/art-template/wiki/syntax:simple} 二、特别好的博客地址 (artTemplate教程){http://
template.js的日常用法
随身笔记
01-04 6761
1.遍历     &lt;div id="newInfo"&gt;        &lt;script type="text/html" id="informationDetails"&gt;         &lt;div class="info"&gt;                 &lt;p&gt;{{list.title}}&lt;/p&amp
template.js的使用
kgcwuli的博客
09-21 796
一.介绍 1.作用 template.js 一款javascript模板引擎，简单，好用。 提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。 2.特性： 模版编译，渲染 支持所有主流浏览器及Node（UMD） JavaScript原生语法 丰富的自定义配置 支持数据过滤 异常捕获功能 功能专一，简单好用 二.基本使用 1.页面中引入 &...
使用JS的Template模板加载复杂HTML和使用Ajax提交复杂对象
cm777的博客
11-20 901
在为HTML添加动态布局的时候,比如需要动态添加一个div的数量或者input， 通常的做法都是写一个function函数，然后把想要动态添加的div或者nput的HTML文本放在一个var变量中，之后使用click点击事件或者使用$.each/for循环进行批量添加。 这是一个解决方案，可是一旦需要添加的HTML文本多了起来，那么这种方式看起来就显得过于沉重，所以我们可以使用另一种方式。 我们日常写javaScript代码的时候使用的标签是这样的 <script type="text/ja
JavaScript模板引擎Template.js使用
m0_47191887的博客
05-30 583
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法。template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。 特性 1.性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍 2.支持运行时调试，可精确定位异常模板所在语句。 3.对 NodeJS Express 友好支持。 4.、支持预编译，可将模板转换成为非常精简的 js 文件。
快速入门template.js
热门推荐
Tina的博客
01-05 1万+
template.js是javascript模板引擎，很多时候在ajax请求数据渲染页面，个人感觉用了这个非常方便 首先得引入template.js &lt;div id="box"&gt;&lt;/div&gt; &lt;script src="template.js"&gt;&lt;/script&gt; 定义一个模板 &lt;script type="template&
JavaScript模板引擎详解
m0_75198698的博客
04-25 1323
JavaScript模板引擎是一种用于生成HTML、XML和其他文本格式的工具，它将特定的模板语法转换为相应的文本输出，通常用于前端开发中动态生成页面内容。Handlebars支持条件语句、循环语句、分部模板等功能，具有易用性和扩展性，是最受欢迎的JavaScript模板引擎之一。Mustache是一个轻量级的JavaScript模板引擎，它具有良好的可读性和可扩展性，支持逻辑语句、部分模板和自定义分隔符等功能。其中，templateString表示模板文件的字符串内容，data是一个包含模板数据的对象。
JavaScript中的template模板引擎的使用
FreeSpider
07-27 526
关于模板引擎不在此做过多介绍，只将项目代码分享一下： 前端html代码 前端html中需要引用template.js 文件，这个自己可以去百度寻找。这个引入要放在jQuery后面，因为它里面会使用到jQuery。 &lt;div class="form-group"&gt; &lt;label for="area-id"...
template.js
最新发布
07-28
template.js是一款JavaScript模板引擎，它提供了一套模板语法，用户可以根据传入的数据生成对应的HTML片段，从而实现不同的渲染效果。它具有以下特性：模板编译和渲染、支持所有主流浏览器和Node（UMD）、使用JavaScript原生语法、丰富的自定义配置、支持数据过滤和异常捕获功能。\[2\]在使用上，可以通过在页面中引入template.js的脚本文件，并在模板区块中编写模板代码，然后根据传入的数据生成对应的HTML片段。\[2\]可以通过给模板区块添加id，并使用template函数来渲染模板并将结果插入到指定的元素中。\[3\] #### 引用[.reference_title] - *1* [JavaScript模板引擎Template.js使用详解](https://blog.csdn.net/weixin_44231106/article/details/120595914)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [template.js的使用](https://blog.csdn.net/kgcwuli/article/details/101108804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值