参见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. 刷题总结——Collecting Bugs(poj2096)

    题目: Description Ivan is fond of collecting. Unlike other people who collect post stamps, coins or ot ...

  2. Linux调用fork()编程

    本文出自:svitter's blog #include <iostream> #include <cstdio> #include <unistd.h> usin ...

  3. cf 341D lahub and xors

    题目大意 给定初始值为\(0\)的\(n*n\)矩阵 两种操作 矩形内异或一个值 求矩阵内异或和 \(n\le 1000\) 分析 二维线段树标记不下传貌似直接可做 有没有更简便的方法? 考虑异或的特 ...

  4. pat 甲级 Public Bike Management

    Public Bike Management (30) 题目描述 There is a public bike service in Hangzhou City which provides grea ...

  5. 线程间操作无效: 从不是创建控件“textBox4”的线程访问它

    原文发布时间为:2009-03-30 -- 来源于本人的百度文章 [由搬家工具导入] public long str1, str2, str3, str4, str5, sum=0,sum1=0; p ...

  6. Atcoder CODE FESTIVAL 2017 qual C C - Inserting 'x' 回文串

    题目链接 题意 给定字符串\(s\),可以在其中任意位置插入字符\(x\). 问能否得到一个回文串,若能,需插入多少个\(x\). 思路 首先统计出现次数为奇数的字符\(cnt\). \(cnt\ge ...

  7. check source code after macro expand

    Some time I'd like check source code after macro expand. We can use -E option to stop after the prep ...

  8. Spring Boot学习——Spring Boot配置文件application

    Spring Boot配置文件有两种格式: application.properties 和 application.yml.两种配置文件只需要使用一个. 这两种配置文件的语法有些区别,如下 1. a ...

  9. C结构体struct用法小结

    结构体和int,float等类型一样是一种常用的类型,它是由各种基本数据类型构成,通常包含有struct关键字,结构体名,结构体成员,结构体变量. 一.结构体定义 通常有3种定义方式,以例子方式表示: ...

  10. K皇后问题递归解法

      #include<iostream> #include<cmath> #include<ctime> using namespace std; bool che ...