bonTemplate

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

安装和启动

git clone https://github.com/bonjs/bonTemplate.git
cd bonTemplate
npm install
node app

访问http://127.0.0.1:3000

npm安装

npm install bon-template --save

模板

<script id=tpl type="html">
	<div>{name}</div>
	<div>{sex}</div>
	<div>{email}</div>
</script>

数据

var data = {
	name	: 'bonTemplate',
	sex		: 'm',
	email	: '[email protected]'
}

调用方式

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

可嵌套的循环标签

<each userList=u>
	<div>{u.name}</div>
	<div>{u.sex}</div>
	<div>{u.email}</div>
	<each u.hobbys=h>
		<label>{h}</label>
	</each>
</each>

{
	userList: [
		{
			name	: 'bonTemplate',
			sex		: 'm',
			email	: '[email protected]',
			hobbys: [
				'吃', '喝', '玩', '乐'
			]
		}, {
			name	: 'bonjs',
			sex		: 'm',
			email	: '[email protected]',
			hobbys: [
				'吃饭', '睡觉', '打豆豆'
			]
		}
	]
}

条件标签

<div>
	<div>{name}</div>
	<div>{sex}</div>
	<div>{email}</div>
	<if sex == 'm'>
		爱好数码
	</if>
</div>

{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: '[email protected]'
}

表达式

<div>
	<div>{name}</div>
	<div>{sex == 'm' ? '男' : '女'}</div>
	<div>{email}</div>
</div>

{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: '[email protected]'
}

自定义格式化函数

bon.addFun({
	myFun : function(v) {
		return v == 'm' ? '男' : '女';	
	}
});

<div>
	<div>{name}</div>
	<div>{sex:myFun}</div>
	<div>{email}</div>
</div>

{
	name	: 'bonTemplate',
	sex		: 'm',
	email	: '[email protected]'
}

全家桶

bon.addFun({
	formateEmail: function(email) {
		return 'Email: ' + email;
	}	
})

<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>

{
	userList: [
		{
			name	: 'bonTemplate',
			sex		: 'm',
			email	: '[email protected]',
			hobbys: [
				'吃',　'喝',　'玩',　'乐'
			]
		}, {
			name	: 'bonjs',
			sex		: 'm',
			email	: '[email protected]',
			hobbys: [
				'吃饭', '睡觉', '打豆豆'
			]
		}
	]
}