js中定义标签是为了啥目

ziluopao 发布于 2016/06/07 19:02
阅读 349
收藏 0

先说说前提,这是php一个手机端的页面,其中里面用到了很多js,并且此页面主要是接收ajax来的数据

并且这种html静态页中大量用了如下的写法



<script type="text/html" id="category-one">
   
	
	<%if(store_list.length>0){%>
	
        <% for (var k in store_list) { var v = store_list[k]; %>
        <li id="favitem_<%=v.store_id %>">
            <a href="tmpl/store.html?store_id=<%=v.store_id %>">
                <div class="store-avatar"><img src="../data/upload/shop/store/<%=v.store_avatar %>"/></div>
                <dl class="store-info">
                    <dt class="store-name"><%=v.store_name %></dt>
                    <dd><span>粉丝:<em><%=v.store_collect %></em>人</span></dd>
                </dl>
            </a>
        </li>
        <%}%>
    <%}else{%>
	<style type="text/css">.pagination{ display: none;}</style>
    <div class="nctouch-norecord favorite-store">
        <div class="norecord-ico"><i></i></div>
        <dl>
            <dt>没有店铺</dt>
            <dd>可以去看看其它的吧</dd>
        </dl>
        <a href="<%=WapSiteUrl%>" class="btn">随便逛逛</a>
    </div>
    <%}%>
    
</script>



类似这种百分号的标签<% %>用了很多起初我以为这是php文件定义的标签,后来一查竟然是在js文件中定义的标签

代码如下


!
function(e) {
    "use strict";
    var n = function(e, r) {
        return n["string" == typeof r ? "compile": "render"].apply(n, arguments)
    };
    n.version = "2.0.3",
    n.openTag = "<%",
    n.closeTag = "%>",
    n.isEscape = !0,
    n.isCompress = !1,
    n.parser = null,
    n.render = function(e, r) {
        var t = n.get(e) || i({
            id: e,
            name: "Render Error",
            message: "No Template"
        });
        return t(r)
    },
    n.compile = function(e, t) {
        function a(r) {
            try {
                return new s(r, e) + ""
            } catch(o) {
                return u ? i(o)() : n.compile(e, t, !0)(r)
            }
        }
        var c = arguments,
        u = c[2],
        l = "anonymous";
        "string" != typeof t && (u = c[1], t = c[0], e = l);
        try {
            var s = o(e, t, u)
        } catch(p) {
            return p.id = e || t,
            p.name = "Syntax Error",
            i(p)
        }
        return a.prototype = s.prototype,
        a.toString = function() {
            return s.toString()
        },
        e !== l && (r[e] = a),
        a
    };
    var r = n.cache = {},
    t = n.helpers = function() {
        var e = function(n, r) {
            return "string" != typeof n && (r = typeof n, "number" === r ? n += "": n = "function" === r ? e(n.call(n)) : ""),
            n
        },
        r = {
            "<": "&#60;",
            ">": "&#62;",
            '"': "&#34;",
            "'": "&#39;",
            "&": "&#38;"
        },
        t = function(n) {
            return e(n).replace(/&(?![\w#]+;)|[<>"']/g,
            function(e) {
                return r[e]
            })
        },
        i = Array.isArray ||
        function(e) {
            return "[object Array]" === {}.toString.call(e)
        },
        o = function(e, n) {
            if (i(e)) for (var r = 0,
            t = e.length; t > r; r++) n.call(e, e[r], r, e);
            else for (r in e) n.call(e, e[r], r)
        };
        return {
            $include: n.render,
            $string: e,
            $escape: t,
            $each: o
        }
    } ();
    n.helper = function(e, n) {
        t[e] = n
    },
    n.onerror = function(n) {
        var r = "Template Error\n\n";
        for (var t in n) r += "<" + t + ">\n" + n[t] + "\n\n";
        e.console && console.error(r)
    },
    n.get = function(t) {
        var i;
        if (r.hasOwnProperty(t)) i = r[t];
        else if ("document" in e) {
            var o = document.getElementById(t);
            if (o) {
                var a = o.value || o.innerHTML;
                i = n.compile(t, a.replace(/^\s*|\s*$/g, ""))
            }
        }
        return i
    };
    var i = function(e) {
        return n.onerror(e),
        function() {
            return "{、、。。Template Error}"
        }
    },
    o = function() {
        var e = t.$each,
        r = "break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",
        i = /\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|[\s\t\n]*\.[\s\t\n]*[$\w\.]+/g,
        o = /[^\w$]+/g,
        a = new RegExp(["\\b" + r.replace(/,/g, "\\b|\\b") + "\\b"].join("|"), "g"),
        c = /^\d[^,]*|,\d[^,]*/g,
        u = /^,+|,+$/g,
        l = function(e) {
            return e.replace(i, "").replace(o, ",").replace(a, "").replace(c, "").replace(u, "").split(/^$|,+/)
        };
        return function(r, i, o) {
            function a(e) {
                return m += e.split(/\n/).length - 1,
                n.isCompress && (e = e.replace(/[\n\r\t\s]+/g, " ").replace(/<!--.*?-->/g, "")),
                e && (e = x[1] + p(e) + x[2] + "\n"),
                e
            }
            function c(e) {
                var r = m;
                if ($ ? e = $(e) : o && (e = e.replace(/\n/g,
                function() {
                    return m++,
                    "$line=" + m + ";"
                })), 0 === e.indexOf("=")) {
                    var i = !/^=[=#]/.test(e);
                    if (e = e.replace(/^=[=#]?|[\s;]*$/g, ""), i && n.isEscape) {
                        var a = e.replace(/\s*\([^\)]+\)/, "");
                        t.hasOwnProperty(a) || /^(include|print)$/.test(a) || (e = "$escape(" + e + ")")
                    } else e = "$string(" + e + ")";
                    e = x[1] + e + x[2]
                }
                return o && (e = "$line=" + r + ";" + e),
                u(e),
                e + "\n"
            }
            function u(n) {
                n = l(n),
                e(n,
                function(e) {
                    y.hasOwnProperty(e) || (s(e), y[e] = !0)
                })
            }
            function s(e) {
                var n;
                "print" === e ? n = T: "include" === e ? (v.$include = t.$include, n = O) : (n = "$data." + e, t.hasOwnProperty(e) && (v[e] = t[e], n = 0 === e.indexOf("$") ? "$helpers." + e: n + "===undefined?$helpers." + e + ":" + n)),
                w += e + "=" + n + ","
            }
            function p(e) {
                return "'" + e.replace(/('|\\)/g, "\\$1").replace(/\r/g, "\\r").replace(/\n/g, "\\n") + "'"
            }
            var f = n.openTag,
            d = n.closeTag,
            $ = n.parser,
            g = i,
            h = "",
            m = 1,
            y = {
                $data: 1,
                $id: 1,
                $helpers: 1,
                $out: 1,
                $line: 1
            },
            v = {},
            w = "var $helpers=this," + (o ? "$line=0,": ""),
            b = "".trim,
            x = b ? ["$out='';", "$out+=", ";", "$out"] : ["$out=[];", "$out.push(", ");", "$out.join('')"],
            E = b ? "$out+=$text;return $text;": "$out.push($text);",
            T = "function($text){" + E + "}",
            O = "function(id,data){data=data||$data;var $text=$helpers.$include(id,data,$id);" + E + "}";
            e(g.split(f),
            function(e) {
                e = e.split(d);
                var n = e[0],
                r = e[1];
                1 === e.length ? h += a(n) : (h += c(n), r && (h += a(r)))
            }),
            g = h,
            o && (g = "try{" + g + "}catch(e){" + "throw {" + "id:$id," + "name:'Render Error'," + "message:e.message," + "line:$line," + "source:" + p(i) + ".split(/\\n/)[$line-1].replace(/^[\\s\\t]+/,'')" + "};" + "}"),
            g = w + x[0] + g + "return new String(" + x[3] + ");";
            try {
                var S = new Function("$data", "$id", g);
                return S.prototype = v,
                S
            } catch(P) {
                throw P.temp = "function anonymous($data,$id) {" + g + "}",
                P
            }
        }
    } ();
    "function" == typeof define ? define(function() {
        return n
    }) : "undefined" != typeof exports && (module.exports = n),
    e.template = n
} (this);



那么此时问题来了,这样做的目的是啥呢,它有啥好处?

我的理解是:反正是静态页写入ajax传来的值,直接用js写不就得了,还定义一个标签,是不是有点多余呢?

加载中
0
蓝水晶飞机
蓝水晶飞机
JS模板引擎,建议去了解下前端的MVVM吧。
0
梵蒂冈驻开源中国大使
梵蒂冈驻开源中国大使
梵蒂冈驻开源中国大使
回复 @ziluopao : 好处可以易于维护,反正你用过就感受到好处了
ziluopao
ziluopao
这种引擎有啥用啊?直接写不是更好
0
ziluopao
ziluopao
这个商城没用类似smarty那种php模板,反而在js中搞了个模板,这个让俺迷惑
0
分流砥柱
分流砥柱
前端为了优雅一点,不再是使用节点拼接,而是使用模版引擎,各种框架都会有模版引擎的.
0
公孙二狗
公孙二狗

看的头晕,模版我一般都是使用 HTML 的代码片段,隐藏起来,例如给加一个 template 的 class,jQuery 启动后把他们从 DOM 里删除并保存到变量里,使用的时候 clone(),这样可以明确的看到最终生成的 HTML 代码是什么样的,jQuery 操作的时候也方便

返回顶部
顶部