小巧的html模板引擎

小巧的html模板引擎

小巧的html模板引擎

今天看coco大神的github，看到了他写的html模板引擎，默默地记录下来，其实，模板引擎我自己也写过一个，不过总觉得大神写的一定比我的好，点击这是我写的
先贴出代码

/**
 * coTemplate
 *  
 */
(function(name, definition) {
    if (typeof define === 'function') {
        define(definition);
    } else {
        this[name] = definition();
    }
})('cotemplate', function() {
    var tplReg = /\$\{\s*([^\{\}\s]+)\s*\}/g;
    var jsReg = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;

    var code = 'var r=[];\n';
    var match = 'undefined';
    var pointer = 0;

    /**
     * 添加单行逻辑
     * @param {*} line 
     */
    function lineAdd(line) {
        code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
    }

    /**
     * 模板拼接
     * @param {String} tpl 模板字符串 
     * @param {Objcet} data 模板内替换对象
     */
    function cotemplate(tpl, data) {
        while (match = tplReg.exec(tpl)) {
            // 添加非逻辑部分
            lineAdd(tpl.slice(pointer, match.index)); 

            // 添加逻辑部分 "${" + match[1] + "}";
            code += ('r.push(String(this.' + match[1] + '));');

            pointer = match.index + match[0].length;
        }

        // 添加代码的最后一截
        lineAdd(tpl.substr(pointer, tpl.length - pointer)); 

        // 返回结果，在这里我们就拿到了装入数组后的代码
        code += 'return r.join("");'; 

        console.log(code);

        return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
    }

    /**
     * export
     */
    return cotemplate;
});

用法Demo

<script src="../js/cotemplate.js"></script>
<script>
var data = {
    name: 'Coco',
    info: {
        age: 18
    },
    bar: {
        foo: {
            else: 'co-template'
        }
    }
}

var tpl = `
            <p>name:${coco}</p>
            <p>Age:${info.age}</p>
            <div>${bar.foo.else}</div>
          `;

cotemplate(tpl, data);
// <p>Name:Coco</p>        
// <p>Age:18</p>        
// <div>HTML-template:co-template</div>
    
</script>