# wu.tmpl.js
**Repository Path**: mirrors_singod/wu.tmpl.js
## Basic Information
- **Project Name**: wu.tmpl.js
- **Description**: 高性能模板引擎 (js template)
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-26
- **Last Updated**: 2026-03-08
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# wu.tmpl.js
极简高性能模板引擎
[性能测试](https://wusfen.github.io/wu.tmpl.js/test/template_test.html)
------------------------------------------
## 特性
* 简单高效
* 支持初始自动渲染
* 支持简洁语法({{ }})和原生语法(<% %>)，可同时使用
* 模板可直接写在目标位置，无需 script 标签或字符串保存模板。也支持这两种方式
* 支持传参，模板内支持访问全局变量
* 有进行缓存、传参转为内部变量（不用 with）、过滤频繁更新dom的中间状态等方式优化性能
* 体积小， 仅 2k 多
* 支持 node.js, require.js, sea.js
------------------------------------------
## 如何使用
1 . 引入 ``。 下载压缩版 [wu.tmpl.min.js](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/wu.tmpl.min.js)
```html
```
2 . 声明模板 `wu-tmpl="options"`
`options.render` 是否在页面准备完成时 **自动渲染**
```html
hello world
hello {{ 'world' }} !
```
`options.name` 模板名
```html
<% var d = new Date %>
{{ d.getHours() }}:{{ d.getMinutes() }}:{{ d.getSeconds() }}
{{ ('00'+d.getMilliseconds()).slice(-3) }}
```
`options.data` 模板数据
```html
{{each list item i}}
-
{{ item.name }}
{{/each}}
```
3 . 更新视图 `wu.tmpl.render(name, data)`
```javascript
@param {Undefined|String|Object|Element} name -
Undefined:不传则更新所有模板；
String:则为模板名；
Object:模板的参数对象；
Element:模板元素
@param {Undefined|Object} data - 模板的参数
```
```javascript
wu.tmpl.render('list')
// or
wu.tmpl.render(data)
// or
wu.tmpl.render('list', newData)
// or
var tpl = document.getElementById('tplId')
wu.tmpl.render(tpl)
```
------------------------------------------
## 手动编译模板
`wu.tmpl(tpl, data)`
```javascript
@param {String} tpl template string
@param {Object | --} data template arguments
@return {String | Function} data? 'renderResult' : renderFunction
```
```javascript
var render = wu.tmpl('hello {{ "world" }} !')
// => render function
render()
// => hello world !
```
```javascript
wu.tmpl('hello {{ name||"world" }} !', {name:'tom'})
// => hello tom !
```
------------------------------------------
## 模板语法
### 简洁语法
* if, else, else if
```javascript
{{if 条件1}}
...
{{else if 条件2}}
...
{{else}}
...
{{/if}}
```
* each
```javascript
{{each array item index}}
...
{{/each}}
```
* {{ 表达式 }}
```javascript
{{ value }}
```
### 原生语法
* `<% ... %>` 可以写任何原生 js，如：
```html
<% for(var i = 0; i < 100; i++){ %>
- ...
-
<% } %>
```
* `<%= ... %>` 插入表达式，如：
```html
hello <%= 'world' %> !
```
------------------------------------------
## 例子
查看源代码，看怎么使用
* [hello world](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/helloWorld.html) | [源码](examples/helloWorld.html)
* [时钟](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/time.html) | [源码](examples/time.html)
* [动画](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/animate.html) | [源码](examples/animate.html)
* [ajax](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/ajax.html) | [源码](examples/ajax.html)
* [list](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/list.html) | [源码](examples/list.html)
* [原生语法](https://cdn.rawgit.com/wusfen/wu.tmpl.js/master/examples/raw.html) | [源码](examples/raw.html)