这篇文章主要为大家详细介绍了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）、条件表达式

 {{if admin}}

  <p>admin</p>

 {{else if code > 0}}

  <p>master</p>

 {{else}}

  <p>error!</p>

 {{/if}}

5）、遍历表达式

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

 {{each list as value index}}

  <li>{{index}} - {{value.user}}</li>

 {{/each}}

亦可以被简写：

 {{each list}}

  <li>{{$index}} - {{$value.user}}</li>

 {{/each}}

6）、模板包含表达式

用于嵌入子模板。

{{include 'template_name'}}

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

（7）、辅助方法

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

 template.helper('dateFormat', function (date, format) {

  // ..

  return value;

 });

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

3、实例

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

JavaScript模板引擎Template.js使用详解的更多相关文章

  1. 模板引擎doT.js用法详解

    作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div i ...

  2. javascript模板引擎template.js使用

    到GitHub上下载template.js库.引入到页面 以type="text/html" 这样指定javascript类型的是一种javascript模板渲染方法,在实际项目中 ...

  3. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  4. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  5. JavaScript模板引擎artTemplate.js——为什么使用模板引擎？

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  6. JavaScript模板引擎artTemplate.js——template.compile()方法

    template.compile(source, options) source:必传,渲染模板的内容. options:可选,通常不传.(其实是我还没研究明白) return:一个渲染函数. 示例如 ...

  7. JavaScript模板引擎artTemplate.js——template()方法

    template(id, data)方法: id:必传,渲染模板的id. data:可选,一个Object对象. return:传data—>渲染完成html代码:不传data—>一个渲染 ...

  8. JavaScript模板引擎artTemplate.js——template.helper()方法

    上一篇文章我们已经讲到了helper()方法,但是上面的例子只是一个参数的写法,如果是多个参数,写法就另有区别了. <div id="user_info"></d ...

  9. JavaScript模板引擎artTemplate.js——如何引入模板引擎？

    artTeamplate.js在github上的地址:artTemplate性能卓越的js模板引擎 引入模板引擎,就是引入外部javascript啦,并且artTemplate.js不依赖其他第三方库 ...

随机推荐

  1. centos installation of matlab R2015b

    the source of installation is in the website: http://blog.csdn.net/hejunqing14/article/details/50265 ...

  2. 数位DP详解

    算法使用范围 在一个区间里面求有多少个满足题目所给的约束条件的数,约束条件必须与数自身的属性有关 下面用kuangbin数位dp的题来介绍 例题  不要62 题意:在一个区间里面求出有多少个不含4和6 ...

  3. TensorFlow随机值函数：tf.random_uniform

    tf.random_uniform 函数 random_uniform( shape, minval=0, maxval=None, dtype=tf.float32, seed=None, name ...

  4. Day29作业及默写

    作业: 1\ 默写 黏包协议 2\ 上传大文件(文件\视频\图片) 3\ 和你的同桌调通 从你的计算机上传一个视频到你同桌的电脑上 4\ 进阶 : 带上登录 Server #Server #!/usr ...

  5. JFrame,JPanel,JLabel详解

    JFrame是一个顶层的框架类,好比一个窗户的框子.也是一个容器类.这个框子可以嵌入几个玻璃窗. JPanel是一个容器类,相当于一大玻璃窗. JLabel等是一些基础组件,它必须置于某个容器里,类似 ...

  6. 2--Python入门--Python数据集合类型--列表

    在基础数据类型的基础上,Python有6中数据集合的类型: 列表list,最常用的数据类型,以[]为标识 元组tuple,和list很相似,但是不能二次赋值,用()标识 集合set,和list类似,但 ...

  7. 【Think in java 读书笔记】多态

    在面向对象的程序设计语言中,多态是继数据抽象和继承之后的第三种基本特征.

  8. HTTP Methods 和 RESTful Service API 设计

    含义: HTTP Methods:也叫 HTTP Verbs,HTTP Methods 可以翻译成 HTTP 方法.它们是 HTTP 协议的一部分,主要规定了 HTTP 如何请求和操作服务器上的资源, ...

  9. Java中的国际化

    一.什么是国际化? 国际化是指应用程序运行时,可根据客户端请求来自的国家/地区.语言的不同而显示不同的界面. 二.Java如何实现国际化? Java程序的国际化思路是将程序中的标签.提示等信息放在资源 ...

  10. 软件工程 week 01

    一.安装与使用Git First项目地址: https://git.coding.net/kefei101/First.git 二.针对以下三个问题,作为大三新生,谈谈我的感想 问题1:你为什么选择计 ...