bonTemplate

    1.0.7 • Public • Published

    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: [
                    '吃饭', '睡觉', '打豆豆'
                ]
            }
        ]
    }

    Install

    npm i bonTemplate

    DownloadsWeekly Downloads

    1

    Version

    1.0.7

    License

    ISC

    Unpacked Size

    21.5 kB

    Total Files

    15

    Last publish

    Collaborators

    • bonjs