bon

bonTemplate

高效,轻量,优雅的模板引擎

Showing:

Popularity

Downloads/wk

3

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.9KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

bonTemplate Build Status

  • 高效(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   : 'ske@163.com'
}

调用方式

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

条件标签

<div>
    <div>{name}</div>
    <div>{sex}</div>
    <div>{email}</div>
    <if sex == 'm'>
        爱好数码
    </if>
</div>
{
    name    : 'bonTemplate',
    sex     : 'm',
    email   : 'ske@163.com'
}

表达式

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

自定义格式化函数

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   : 'ske@163.com'
}

全家桶

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100