高效，轻量，易用的模板引擎~~

bonTemplate Build Status

  • 高效(100条数据执行10000次一共耗时50多ms，我本机上的测试结果，视电脑配置)
  • 轻量(压缩前也才3K多)
  • 支持循环
  • 支持条件判断
  • 支持嵌套
  • 支持表达式
  • 支持自定义格式化函数
  • 使用简单，易懂

https://github.com/bonjs/bonTemplate

安装和启动

1
2
3
git clone https://github.com/bonjs/bonTemplate.git
npm install
node app

或者

1
2
npm install bonTemplate --save-dev
node app

或者

1
2
npm install bon-template --save-dev
node app

访问http://127.0.0.1:3000

模板

1
2
3
4
5
<script id=tpl type="html">
	<div>{name}</div>
	<div>{sex}</div>
	<div>{email}</div>
</script>

数据

1
2
3
4
5
var data = {
	name	: 'bonTemplate',
	sex		: 'm',
	email	: 'ske@163.com'
}

调用方式

1
2
3
var html = document.getElementById('tpl').innerHTML
var str = bon.render(html, data);
a.innerHTML = str;

可嵌套的循环标签

1
2
3
4
5
6
7
8
<each userList=u>
	<div>{u.name}</div>
	<div>{u.sex}</div>
	<div>{u.email}</div>
	<each u.hobbys=h>
		<label>{h}</label>
	</each>
</each>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
	userList: [
		{
			name	: 'bonTemplate',
			sex		: 'm',
			email	: 'ske@163.com',
			hobbys: [
				'吃',　'喝',　'玩',　'乐'
			]
		}, {
			name	: 'bonTemplate',
			sex		: 'm',
			email	: 'ske@163.com'，
			hobbys: [
				'吃',　'喝',　'玩',　'乐'
			]
		}
	]
}

条件标签

1
2
3
4
5
6
7
8
<div>
	<div>{name}</div>
	<div>{sex}</div>
	<div>{email}</div>
	<if sex == 'm'>
		爱好数码
	</if>
</div>
1
2
3
4
5
{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: 'ske@163.com'
}

表达式

1
2
3
4
5
<div>
	<div>{name}</div>
	<div>{sex == 'm' ? '男' : '女'}</div>
	<div>{email}</div>
</div>
1
2
3
4
5
{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: 'ske@163.com'
}

自定义格式化函数

1
2
3
4
5
bon.addFun({
	myFun : function(v) {
		return v == 'm' ? '男' : '女';	
	}
});
1
2
3
4
5
<div>
	<div>{name}</div>
	<div>{sex:myFun}</div>
	<div>{email}</div>
</div>
1
2
3
4
5
{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: 'ske@163.com'
}

全家桶

1
2
3
4
5
bon.addFun({
	formateEmail: function(email) {
		return 'Email: ' + email;
	}	
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<each userList=u>
	<div>{u.name}</div>
	<div>{u.sex == 'm' ? '男' : '女'}</div>
	<div>{u.email:formateEmail}</div>
	<each u.hobbys=h>
		<label>{h}</label>
	</each>
	<if u.sex == 'm'>
		爱好数码
	</if>
	<if u.sex == 'f'>
		爱好买衣服
	</if>
</each>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
	userList: [
		{
			name	: 'bonTemplate',
			sex		: 'm',
			email	: 'ske@163.com',
			hobbys: [
				'吃',　'喝',　'玩',　'乐'
			]
		}, {
			name	: 'she',
			sex		: 'f',
			email	: 'fdsafs@163.com'，
			hobbys: [
				'吃',　'喝',　'玩',　'乐'
			]
		}
	]
}