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

最新推荐文章于 2023-04-25 22:11:22 发布
最新推荐文章于 2023-04-25 22:11:22 发布
阅读量1.7k 收藏 3
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35355153/article/details/89187570
版权

1、特性

（1）性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍（性能测试）

（2）支持运行时调试，可精确定位异常模板所在语句（演示）

（3）对 NodeJS Express 友好支持

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

（5）支持include语句

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

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

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

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

2、语法

（1）使用

A.推荐使用npm安装和更新  $ npm install template_js

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

（2）表达式

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

（3）输出表达式

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

（4)  条件表达式

（5）遍历表达式

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

亦可以被简写：

（6）模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}  

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

（7）辅助方法

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

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

e.g

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"> //提前将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); //需要渲染页面时，在js里这样调用

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

<!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

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

 

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

<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

 */

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>

 

rm_ing
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript模板引擎Template.js基本使用详解
slongzhang的博客
05-10 2630
template.js是一款JavaScript模板引擎，提供一套模板语法，简单好用，开发者可以写一个模板区块，每次传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。先使用jquery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。2.第二种使用方法（引用模板）
标题：template.js：打造高效且灵活的JavaScript模板引擎
最新发布
gitblog_00032的博客
05-14 312
标题：template.js：打造高效且灵活的JavaScript模板引擎 项目地址:https://gitcode.com/yanhaijing/template.js 1、项目介绍 template.js是一个轻量级的JavaScript模板引擎，设计简洁易用，专为处理HTML字符串模板而生。它支持所有浏览器和Node.js环境，并兼容众多流行的前端构建工具，如Webpack、Rollup、V...
templatejs使用总结
TXW6666的博客
11-24 3220
templatejs使用总结 概述 template.js是一个基于 jquery 的前端 javascript 模板，插件主要解决数据渲染时的繁琐的数据处理。模板解决了html片段连接效率低下和繁琐的问题。看了很多相关的博客，博客内容几乎一样，很多知识点并没有详细的说明，对此经过两天的实验研究，把研究的结果记录下来。 模板标签 1.{{each}}:双标签，用于遍历对象，数组或者 json 对象。 2.{{if}}:双标签，用于数据类型的判断，条件可以是表达式。 3.{{else}}:单标签，配合 {{i
使用JS的Template模板加载复杂HTML和使用Ajax提交复杂对象
cm777的博客
11-20 1000
在为HTML添加动态布局的时候,比如需要动态添加一个div的数量或者input， 通常的做法都是写一个function函数，然后把想要动态添加的div或者nput的HTML文本放在一个var变量中，之后使用click点击事件或者使用$.each/for循环进行批量添加。 这是一个解决方案，可是一旦需要添加的HTML文本多了起来，那么这种方式看起来就显得过于沉重，所以我们可以使用另一种方式。 我们日常写javaScript代码的时候使用的标签是这样的 <script type="text/ja
JavaScript模板引擎详解
m0_75198698的博客
04-25 1392
JavaScript模板引擎是一种用于生成HTML、XML和其他文本格式的工具，它将特定的模板语法转换为相应的文本输出，通常用于前端开发中动态生成页面内容。Handlebars支持条件语句、循环语句、分部模板等功能，具有易用性和扩展性，是最受欢迎的JavaScript模板引擎之一。Mustache是一个轻量级的JavaScript模板引擎，它具有良好的可读性和可扩展性，支持逻辑语句、部分模板和自定义分隔符等功能。其中，templateString表示模板文件的字符串内容，data是一个包含模板数据的对象。
详解Javascript模板引擎mustache.js
10-22
Mustache.js 是一个轻量级且功能强大的JavaScript模板引擎，它遵循无逻辑模板语言（Logic-less templates）的设计原则，这意味着模板引擎本身不包含任何条件判断或循环控制，这些逻辑由数据提供者负责处理。...
高性能JavaScript模板引擎实现原理详解
10-24
《高性能JavaScript模板引擎实现原理详解》 JavaScript模板引擎在Web开发中的地位日益凸显，尤其是在JavaScript MVC架构中扮演着关键角色。模板引擎允许开发者将数据和视图逻辑分离，提高代码的可读性和复用性。...
template.js的使用案例
qq_41932661的博客
04-13 896
template.js是一款开源的JavaScript模板引擎，用来渲染页面的 第一步：首页页面引用 <script type="text/javascript" src="js/template.js"></script> 第二步：模板创建 <!-- 模版 --> <script type="text/html" id="templet"&g...
快速入门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&
【无标题】
qq_43492297的博客
01-19 262
Dockerfile基础详解 一、前言 笔记配套视频效果更佳哦，视频地址：https://edu.51cto.com/lecturer/14390454.html ​ 对于docker，我们都有了一定的了解，我们知道docker hub上面，能够搜索到各种有用的资源镜像等等，运行起来也比较方便，但是，如果我们有定制的需要的话，则需要做一些调整；以PHP举例，PHP官方提供了很多扩展，但是并不是全部的扩展，如果我们要针对PHP的镜像，进行增加扩展怎么办？ ​ 还有种情况，例如我们想
template.js的使用
kgcwuli的博客
09-21 820
一.介绍 1.作用 template.js 一款javascript模板引擎，简单，好用。 提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。 2.特性： 模版编译，渲染 支持所有主流浏览器及Node（UMD） JavaScript原生语法 丰富的自定义配置 支持数据过滤 异常捕获功能 功能专一，简单好用 二.基本使用 1.页面中引入 &...
template.js的使用心得
u012746918的博客
02-17 1457
template.js是一款JavaScript模板引擎，用来渲染页面的。 原理：提前将Html代码放进编写模板 <script id="tpl" type="text/html"></script> 中，当需要渲染页面时，在js里这样调用： ?1var tpl = document.getElementById('tpl').innerHTML; temp...
【JS】积累与发现
dominic_z的博客
03-20 401
js
2021-4-12 工作记录--template.js模板引擎-{{ each }}遍历方法
weixin_48850734的博客
11-20 1915
template.js模板引擎-{{ each }}遍历方法
Alpine.js 基本使用 快来0成本get新技能
weixin_44028979的博客
07-07 1252
x-data
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、付费专栏及课程。

余额充值