JavaScript模板引擎Template.js填充数据的用法

最新推荐文章于 2024-08-10 07:48:00 发布
最新推荐文章于 2024-08-10 07:48:00 发布
阅读量1k 收藏 1
点赞数
分类专栏： web前端 文章标签： js template.js

转载地址：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>

lei_1994
关注
专栏目录
template.js
05-05
一个简单好用的template模板，可以直接运行使用，比拼接字符串不知道快了多少倍，是一个优雅的方式，非常的使用，欢迎使用
JavaScript模板引擎Template.js使用详解
热门推荐
我竟然是凡人
08-12 11万+
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎，简单，好用。提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。https://github.com/aui/artTemplate
Templatespider: 开源网站抓取与模板转换工具
最新发布
gitblog_00842的博客
08-10 343
Templatespider: 开源网站抓取与模板转换工具 templatespider扒网站工具，看好哪个网站，指定好URL，自动扒下来做成模版。所见网站，皆可为我所用！项目地址:https://gitcode.com/gh_mirrors/te/templatespider 项目介绍 Templatespider 是一款强大的网页抓取与HTML模板自动生成工具，它采用Java语言开发，旨在帮...
template.js 页面模板
03-27
用于简化套页面时候的字符串拼接, 方便开发人员在套页面的时候，避免使用 +=‘’ 等拼接html内容
简单的template的js模板
09-21
一个简单好用的template模板，可以直接运行使用，比拼接字符串不知道快了多少倍，是一个优雅的方式，看这个demo就知道原理了
javascript-高性能javascript模版引擎-templateEngine.zip
02-10
在“javascript-高性能javascript模版引擎-templateEngine.zip”这个压缩包中，我们很显然会发现一个关于创建高效JavaScript模板引擎的资源集合。下面我们将详细探讨JavaScript模板引擎的工作原理、优点、常见实现...
JavaScript模板引擎实现原理实例详解
10-17
JavaScript模板引擎是一种允许用户将数据与HTML标记分离，然后通过特定的语法将数据动态地插入到HTML页面中去的技术。它主要解决了前端开发中动态内容更新的问题，提高了开发效率并保持了代码的可维护性。 ### 模板...
loadTemplate.js实例
07-22
在这个实例中，我们将深入探讨`loadTemplate.js`的使用方法以及它如何适应前后端分离的开发环境。 首先，`loadTemplate.js`的主要功能是加载和解析HTML模板。在前后端分离的架构中，通常会将HTML模板存储在服务器上...
深入解析轻量级前端模板引擎doT.js
"本文主要探讨前端渲染引擎doT.js，这是一种轻量级的模板引擎，适用于数据和模板简单渲染的场景。文章指出，虽然现代前端框架如React、Vue和Angular功能强大，但在某些特定需求下，它们的学习成本和资源消耗较高。...
简单的前端模板引擎能实现最基本的数据渲染
08-10
例如，Mustache和Handlebars是两个流行的JavaScript模板引擎，它们提供了丰富的语法结构，如`{{#if}}...{{/if}}`（条件判断）和`{{#each}}...{{/each}}`（循环遍历数组）。 总的来说，前端模板引擎是前端开发中不可...
template.js模板
03-04
template.js DEMO代码,下载下来多多益善。
template-web.js框架
08-07
template-web.js框架
js中的template — Jemplate
阿宝
03-25 2623
最近在调试ajax程序的时候,要格式化数据输出html,代码比较混乱,这时候就比较怀念php里可以用到的各式各样的模板.然而js毕竟是很强大的,俺找到了这个javascript写的template类 -- Jemplate,用法还算简单.首先得包含必要的文件:PLAIN TEXTHTML: language="javascript" src="./p
Dawn 开源项目使用教程
gitblog_00308的博客
08-07 395
Dawn 开源项目使用教程 dawn:sunrise: Dawn is a lightweight task management and build tool for front-end and nodejs. 项目地址:https://gitcode.com/gh_mirrors/daw/dawn 1. 项目的目录结构及介绍 Dawn 项目的目录结构如下： dawn/ ├── bin/ ├─...
template.js的使用
kgcwuli的博客
09-21 858
一.介绍 1.作用 template.js 一款javascript模板引擎，简单，好用。 提供一套模板语法，用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。 2.特性： 模版编译，渲染 支持所有主流浏览器及Node（UMD） JavaScript原生语法 丰富的自定义配置 支持数据过滤 异常捕获功能 功能专一，简单好用 二.基本使用 1.页面中引入 &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值