参见GitHub:https://github.com/yanhaijing/template.js/

template.js简介:

  template.js 一款javascript模板引擎,简单,好用。

  template.js遵循简单好用的原则,所有接口都设计简单,职责单一。

 功能概述

提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。

# 特性

- 模版编译,渲染
- 支持所有主流浏览器及Node(UMD)
- JavaScript原生语法
- 丰富的自定义配置
- 支持数据过滤
- 异常捕获功能
- 功能专一,简单好用

# 兼容性

- Node 0.10+
- Safari 6+ (Mac)
- iOS 5+ Safari
- Chrome 23+ (Windows, Mac, Android, iOS, Linux, Chrome OS)
- Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
- Internet Explorer 6+ (Windows, Windows Phone)
- Opera 10+ (Windows, linux, Android)

快速上手

# 编写模版

使用一个type="text/html"的script标签存放模板,或者放到字符串中:

<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>

# 渲染模板

var tpl = document.getElementById('tpl').innerHTML;
template(tpl, {list: [{name: "yan"},{name: "haijing"}]});

输出结果:

<ul>
  <li>yan</li>
  <li>haijing</li>
</ul>

更多例子,请见[demo](demo)目录。

===============================================================================

模版语法
可在html代码中使用javascript代码。

# 表达式
开始标签和结束标签(如:<% 与 %>)包裹起来的语句则为模板的逻辑表达式。如下:

<%var a = 3%>
<%while(a--) {
  console.log(a);
}%>

上面的输出如下:

> 2
> 1
> 0

# 输出表达式

默认输出(是否转码由escape参数决定):

<%=content%>

不编码输出:

<%:=content%>

对输出内容进行HTML转义:

<%:h=content%>

对输出内容进行URL编码:

<%:u=content%>

**注:编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击。**

# 注释
可使用js注释,如下:

<%/* 这里是注释 */%>

## template

唯一入口函数,支持编译和渲染,在传统浏览器环境会占用template全局变量。

template函数会返回渲染数据的字符串,若缺省数据会返回编译后的函数,可多次调用,传入不同数据,返回不同结果,适用于多次渲染同一模版的情况,提高性能。

- tpl {string} 必须 带编译的模版字符串
- [data] {object} 可选 要渲染的数据
- return {function|string} 若缺省data返回函数,否则返回字符串

[演示](../demo/basic.html)

## template.config
配置template.js的自定义选项。

- option {Object} 配置的对象参数
- return {Object} 配置对象的镜像

### 可配置参数

- sTag {String} 开始标签 默认为 '<%'
- eTag {String} 结束标签 默认为 '%>'
- compress {Boolean} 是否压缩输出的html 默认为false
- escape {Boolean} 默认是否对输出内容进行html转义 默认为true

[演示](../demo/config.html)

## template.registerFunction
注册自定义函数功能。

- name {String} 自定义函数的名字,如果缺省会返回全部已注册的函数
- fn {Function} 自定义函数,如果缺省会返回名称为name的函数
- return {Object|Function} 对象或函数

## template.unregisterFunction
取消自定义函数功能。

- name {String} 取消自定义函数的名字
- return {Boolean} 是否成功

[演示](../demo/registerFunction.html)

## template.registerModifier
注册自定义修复器功能。

- name {String} 自定义修复器的名字,如果缺省会返回全部已注册的修复器
- fn {Function} 自定义修复器,如果缺省会返回名称为name的修复器
- return {Object|Function} 对象或函数

## template.unregisterModifier
取消自定义修复器功能。

- name {String} 取消自定义修饰器的名字
- return {Boolean} 是否成功

[演示](../demo/registerModifier.html)

## template.noConflict+
在以原始方式使用template.js时会存在改函数(在模块化开发环境中不会存在),用来释放template.js占用的全局变量template。同时会返回template。

- return {Function} template

template.js文档的更多相关文章

  1. gulpfile.js文档

    gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...

  2. 使用node.js 文档里的方法写一个web服务器

    刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...

  3. js文档系统-jsdoc-docdash

    一.参考文档 模版:https://github.com/clenemt/docdash 例子:http://clenemt.github.io/docdash/index.html jsdoc:ht ...

  4. JS文档生成工具:JSDoc 介绍

    JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...

  5. JS文档和Demo自动化生成工具 - SmartDoc发布

    曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...

  6. 使用YUIDoc生成JS文档

    其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...

  7. Flv.js文档使用随记

    关键字:Flv.js | Flv js | Flv-js | HTML5 FLV Player | 0x001: 前言以下涉及到 flv.js 所有内容均是V1.5.0版本内的,如方法.属性.常量.监 ...

  8. tweenmax.js 文档

    TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...

  9. js文档视口高度函数

    objwin=window;objBody=document.body;objDel=document.documentElement;   关于弹窗时候用到 function getPageHeig ...

随机推荐

  1. http长短连接和长短轮询

    http长连接 http长连接是指http的请求头和响应头的均有connection: keep-alive的请求,也就是客户端和服务端均为keep-alive的请求. 实际上,http是请求/响应式 ...

  2. 关于微信小程序post请求数据的坑

    在post请求数据的时候,发现数据没有发送给后台,需要在请求头里加"Content-Type": "application/x-www-form-urlencoded&q ...

  3. codeforces 757F - 最短路DAG+灭绝树

    Description 给定一个n个点,m条边的带权无向图,和起点S.请你选择一个点u(u!=S),使得在图中删掉点u 后,有尽可能多的点到S的最短距离改变. Solution 先建出最短路DAG,在 ...

  4. 如何在Linux的桌面上创建快捷方式或启动器

    如果在Linux桌面系统中你经常使用一个程序,你可能想去创建一个“桌面快捷方式”,以便于你在桌面只要点击一下快捷方式就可以启动它.虽然不少带有图形界面的程序会在安装时自动在桌面上创建快捷方式,还有一些 ...

  5. CentOS下Yum使用

    1. 介绍 Yum,即Yellow dog Updater Modified,是一个基于 RPM 包管理的字符前端软件包管理器:能够从指定的服务器自动下载 RPM 包并且安装,可以处理依赖性关系,并且 ...

  6. (6)centos安装和解压

    一.rpm包安装方式步骤:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录:2.打开一个终端,su -成root用户:3.cd soft.version.rpm所在的目录 ...

  7. 洛谷 P1464 Function【动态规划(递推)/记忆化搜索(递归)】

    题目描述 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回值1. 如果a>20 or b>20 or c>20就返回w(20,2 ...

  8. iOS9.0 友盟分享详细过程

    一: 申请友盟的AppKey(友盟的Key是根据应用的名称生成的!) 在友盟注册了你自己的开发者账号后就可以申请AppKey了.然后在这个方法里面设置Key - (BOOL)application:( ...

  9. 【IntelliJ IDEA】spring boot项目在idea实现自动部署

    转载参考自:https://www.cnblogs.com/winner-0715/p/6666579.html spring-boot-devtools是一个为开发者服务的一个模块,其中最重要的功能 ...

  10. doviceone- http组件进行webservice的POST请求

    var http = mm("do_Http"); http.method = "POST"; // GET | POST http.timeout = 100 ...