超简单的纯前端模板引擎，只有几十行。

简单好用的纯前端模板引擎，AJAX的好搭档！
github地址：https://github.com/shalldie/mini-tpl

引擎源码

/**
 * 简易模板 语法与ejs一样
 */
    (function(root, factory) {
        if (typeof define === "function" && define.amd) {
            define(factory);
        } else if (typeof exports === "object") {
            var mo = factory();
            mo.__esModule = true;
            mo["default"] = mo;
            module.exports = mo;
        } else {
            root.miniTpl = factory();
        }
    })(this, function() {
        function render(content, data) {
            data = data || {};
            var list = [ 'var tpl = "";' ];
            var codeArr = transform(content);
            for (var i = 0, len = codeArr.length; i < len; i++) {
                var item = codeArr[i];
                if (item.type == 1) {
                    list.push(item.txt);
                } else if (item.type == 2) {
                    var txt = "tpl+=" + item.txt + ";";
                    list.push(txt);
                } else {
                    var txt = 'tpl+="' + item.txt.replace(/"/g, '\\"') + '";';
                    list.push(txt);
                }
            }
            list.push("return tpl;");
            return new Function("data", list.join("\n"))(data);
        }
        function transform(content) {
            var arr = [];
            var reg = /<%([\s\S]*?)%>/g;
            var match;
            var nowIndex = 0;
            while (match = reg.exec(content)) {
                appendTxt(arr, content.substring(nowIndex, match.index));
                var item = {
                    type: 1,
                    txt: match[1]
                };
                if (match[1].substr(0, 1) == "=") {
                    item.type = 2;
                    item.txt = item.txt.substr(1);
                }
                arr.push(item);
                nowIndex = match.index + match[0].length;
            }
            appendTxt(arr, content.substr(nowIndex));
            return arr;
        }
        function appendTxt(list, content) {
            content = content.replace(/\r?\n/g, "\\n");
            list.push({
                txt: content
            });
        }
        return render;
    });

使用方法

1、通过script标签定义模板

     <script id="tplContent" type="text/html">
        <% for(var i=0; i < data.length; i++){
            var item = data[i];%>
            <tr>
                <td><%=item.id%></td>
                <%if(item.status == 0){%>
                <td>在线</td>
                <%}else{%>
                <td>离线</td>
                <%}%>
                <td><%=item.name%></td>
            </tr>
        <% } %>
     </script>

2、使用模板

     var _data = [{id:1, status:0, name: "张亮"},{id:2, status:1, name: "张良"},{id:3, status:0, name: "张梁"},{id:4, status:0, name: "张靓"}];
     var myTemplate =  document.getElementById('tplContent').innerHTML; 
     var myHtml = miniTpl(myTemplate, _data);