template.js文档
参见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文档的更多相关文章
- gulpfile.js文档
gulp watch 实现监听不仅需要package.json文档,还需要gulpfile.js文档.否则无法实现. 1.gulp的安装 1.1 首先必须先安装node.js.这个可以参考之前的博客& ...
- 使用node.js 文档里的方法写一个web服务器
刚刚看了node.js文档里的一个小例子,就是用 node.js 写一个web服务器的小例子 上代码 (*^▽^*) //helloworld.js// 使用node.js写一个服务器 const h ...
- js文档系统-jsdoc-docdash
一.参考文档 模版:https://github.com/clenemt/docdash 例子:http://clenemt.github.io/docdash/index.html jsdoc:ht ...
- JS文档生成工具:JSDoc 介绍
JSDoc是一个根据javascript文件中注释的信息,生成API文档的工具.生成的文档是html文件.类似JavaDoc和PHPDoc. 用法 /** 一坨注释之类的 */JSDoc会从/**开头 ...
- JS文档和Demo自动化生成工具 - SmartDoc发布
曾几何时,当你码神附体,一路披荆斩棘的完成代码后,带着“一码在手,天下我有”的傲然环顾之时,却发现单元测试.API文档.Demo实例陆续向你砸来,顿时有木有一种冰水挑战后的感觉.而这时你应该:哟哟,快 ...
- 使用YUIDoc生成JS文档
其实YUIDoc主页已经写的比较清晰了,但有一些概念和细节再点出一些注意的地方. 目前最新的YUIDoc使用nodejs进行开发安装和使用都非常的方便. 我们只需要将我们的代码加上必要的注释,便可以很 ...
- Flv.js文档使用随记
关键字:Flv.js | Flv js | Flv-js | HTML5 FLV Player | 0x001: 前言以下涉及到 flv.js 所有内容均是V1.5.0版本内的,如方法.属性.常量.监 ...
- tweenmax.js 文档
TweenMax 参考http://bbs.9ria.com/thread-214959-1-1.html TweenMax 可能是很多人都用的,包括我 但 是最近发现大量的运用就总会产生这样或那样的 ...
- js文档视口高度函数
objwin=window;objBody=document.body;objDel=document.documentElement; 关于弹窗时候用到 function getPageHeig ...
随机推荐
- C 语言实现 php base64_encode
这是在网上找到的一段代码,因为需求不同,稍微做了下修改,有需要的朋友可以直接复制使用. unsigned char *base64_encode(const unsigned char *str, s ...
- inux监控平台搭建-监控项
linux监控平台搭建-监控项 本人运维某生态互联网监控平台服务.过程中遇见了很多问题.目前互联网有很多的开源监控工具:nagios.zabbix.falcon.cacti...各有优点.这里不讲解监 ...
- 解决IIS无法访问远程映射目录
由于影像系统(PACS)需要存储大量影像文件动辄几十T,所以经常会用到远程影像的独立文件盘, 挂载了远程映射盘后,本机可以直接访问 IIS中就直接报错了 . A机器:IIS WEB服务器 B机器:文件 ...
- rsync Linux系统下的数据镜像备份工具
rsync是Linux系统下的数据镜像备份工具,从软件的命名上就可以看出来了——remote sync.rsync支持大多数的类Unix系统,无论是Linux.Solaris还是BSD上都经过了良好的 ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---50
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- vim 搜尋取代功能
VI 的搜尋取代語法格式大致如下 :[範圍]s/[比對字串]/[取代字串]/[g,c,i] 範圍部分: 範圍表示法為開頭 , 結束 假如我要從第 1 行到第 150 行,可以這樣下: 1, 150 假 ...
- selenium入门教程c#
一. 简述 1. 介绍 Selenium是ThoughtWorks专门为Web应用程序编写的一个验收测试工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE. ...
- git的使用学习(八)自定义git
在安装Git一节中,我们已经配置了user.name和user.email,实际上,Git还有很多可配置项. 比如,让Git显示颜色,会让命令输出看起来更醒目: $ git config --glob ...
- hdu 2824(欧拉函数)
The Euler function Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- 点击添加按钮,使用ajax动态添加一行和移除一行,并且序号重新排序和数据不重复操作判断
<div class="control-group " style="top: -20px;position: relative;"> <la ...