js之：模板引擎

//引擎js文件

(function(){
    var r = {
                open: "{{",
                close: "}}"
            },
        c = {
            exp: function(e) {
                return new RegExp(e, "g")
            },
            query: function(e, c, t) {
                var o = ["#([\\s\\S])+?", "([^{#}])*?"][e || 0];
                return n((c || "") + r.open + o + r.close + (t || ""))
            },
            escape: function(e) {
                return String(e || "").replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/'/g, "&#39;").replace(/"/g, "&quot;")
            },
            error: function(e, r) {
                var c = "Laytpl Error：";
                return "object" == typeof console && console.error(c + e + "\n" + (r || "")), c + e
            }
        },
        n = c.exp,
        tpl = function(e) {
            this.tpl = e
        };
        tpl.pt = tpl.prototype, window.errors = 0, tpl.pt.parse = function(e, t) {
            var o = this,
                p = e,
                a = n("^" + r.open + "#", ""),
                l = n(r.close + "$", "");
            e = e.replace(/\s+|\r|\t|\n/g, " ").replace(n(r.open + "#"), r.open + "# ").replace(n(r.close + "}"), "} " + r.close).replace(/\\/g, "\\\\").replace(n(r.open + "!(.+?)!" + r.close), function(e) {
                return e = e.replace(n("^" + r.open + "!"), "").replace(n("!" + r.close), "").replace(n(r.open + "|" + r.close), function(e) {
                    return e.replace(/(.)/g, "\\$1")
                })
            }).replace(/(?="|')/g, "\\").replace(c.query(), function(e) {
                return e = e.replace(a, "").replace(l, ""), '";' + e.replace(/\\/g, "") + ';view+="'
            }).replace(c.query(1), function(e) {
                var c = '"+(';
                return e.replace(/\s/g, "") === r.open + r.close ? "" : (e = e.replace(n(r.open + "|" + r.close), ""), /^=/.test(e) && (e = e.replace(/^=/, ""), c = '"+_escape_('), c + e.replace(/\\/g, "") + ')+"')
            }), e = '"use strict";var view = "' + e + '";return view;';
            try {
                return this.cache = e = new Function("d, _escape_", e), e(t, c.escape)
            } catch (u) {
                return delete this.cache, c.error(u, p)
            }
        }, tpl.pt.render = function(e, r) {
            var n;
            return e ? (n = this.cache ? this.cache(e, c.escape) : this.parse(this.tpl, e), r ? void r(n) : n) : c.error("no data")
        };
        var o = function(e) {
            return "string" != typeof e ? c.error("Template not found") : new tpl(e)
        };
        o.config = function(e) {
            e = e || {};
            for (var c in e) r[c] = e[c]
        }
        tplEngine = o
}())

//页面调用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="tpls.js"></script>
</head>
<body>
    <script type="text/html" id="demo">
        <h3>{{ d[0].title }}</h3>
        <ul>
        {{#  for(var i=0,item;item=d[0].list[i];i++){ }}
          <li>
            <span>{{ item.modname }}</span>
            <span>{{ item.alias }}：</span>
            <span>{{ item.site || '' }}</span>
          </li>
        {{#  }; }}
        {{#  if(d[0].list.length === 0){ }}
          无数据
        {{#  } }} 
        
        </ul>
        <div> 
            {{# for(var i=0,item;item=d[1][i];i++){ }} 
            <div>{{item}}</div>
            {{# } }}
        </div>
    </script>
       
      <div id="view"></div>
    <script type="text/javascript">
        var data = { //数据
          "title":"常用模块"
          ,"list":[{"modname":"弹层","alias":"21321321","site":"www.baidu.com"},{"modname":"表单","alias":"form"}]
        }
        var test = [1,2,3];
        var getTpl = demo.innerHTML
        ,view = document.getElementById('view');
        tplEngine(getTpl).render([data,test], function(html){
          view.innerHTML = html;
        });
    </script>
</body>
</html>

 

posted @ 2018-07-24 10:04  二月花开  阅读(129)  评论(0)  编辑  收藏  举报