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	: '[e-mail]'
}

调用方式

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	: '[e-mail]',
            hobbys: [
                '吃', '喝', '玩', '乐'
            ]
        }, {
            name	: 'bonjs',
            sex		: 'm',
            email	: '[e-mail]',
            hobbys: [
                '吃饭', '睡觉', '打豆豆'
            ]
        }
    ]
}

条件标签

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

{
    name	: 'bonTemplate',
    sex		: 'm',
    email	: '[e-mail]'
}

表达式

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

{
    name	: 'bonTemplate',
    sex		: 'm',
    email	: '[e-mail]'
}

自定义格式化函数

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	: '[e-mail]'
}

全家桶

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	: '[e-mail]',
            hobbys: [
                '吃',　'喝',　'玩',　'乐'
            ]
        }, {
            name	: 'bonjs',
            sex		: 'm',
            email	: '[e-mail]',
            hobbys: [
                '吃饭', '睡觉', '打豆豆'
            ]
        }
    ]
}