river、的博客

记录自己

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

简单好用的纯前端模板引擎,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);
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39759115/article/details/79971321
个人分类: 模板引擎
想对作者说点什么? 我来说一句

C# 数独解题算法 简单明了

2011年07月13日 28KB 下载

编译原理课程的语法分析器

2010年06月06日 122KB 下载

python版naive bayes代码

2013年11月09日 2KB 下载

超级简单的程序锁.........

2010年02月05日 22KB 下载

for循环冒泡排序(C++)

2009年03月28日 344B 下载

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭