javascript模板系统 ejs v3

本版本增添了局部模板功能，并且允许主模板调用局部模板，局部模块调用局部模块，并去掉onsite变量，不再提供解析成毕的文档碎片给使用者。它使用双重缓存，一是缓存那些通过同步请求得到的文本而成的数组，一是整体解析完毕得到的模板函数。模板函数是通过数组元素拼凑动成解析而成的，这是大大提高了效率。不过由于新功能的加入，虽然动用了新的构筑算法也比不上v2的构筑速度了……

有人说不要使用<%与%>做界定符，这个问题我在v1版本已经提出过了，这些都是可以自定义的。本文的例子将演示一下如何使用Django的{{与}}风格。

最后隆重推介一下本版本的新功能。不过由于条件有限，无法演示。现在模板不单单是内嵌于页面的script标签之内，也可以放置在一个独立的文件之内，如html,ejs,text，随你起什么后缀名。这个文件将会用同步请求回来用于构筑模板函数。我们可以用使用url属性，或在模板中使用<%: /template/partail.ejs >实现。一般而言，url是用于主模板，而<%: url %>是用于局部模板。如果我们在配置对象中同时使用selector与url，selector的优先级是高于url的。

   var data = dom.ejs({
                    selector:"tmpl",
                    url:"/template/aaa.html",
                    left:"{{",
                    right:"}}",
                    json: {
                        name:"司徒正美",
                        blog:"ruby louvre"
                        address:"异次元"
                    }
     });

源码：

//司徒正美 javascript template - http://www.cnblogs.com/rubylouvre/ - MIT Licensed

            (function () {

                if(!String.prototype.trim){
                    String.prototype.trim = function(){
                        return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
                    }
                }
                var dom = {
                    quote: function (str) {
                        str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
                            var special = metaObject[chr];
                            return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4)
                        });
                        return '"' + str.replace(/"/g, '\\"') + '"';
                    }
                },
                metaObject = {
                    '\b': '\\b',
                    '\t': '\\t',
                    '\n': '\\n',
                    '\f': '\\f',
                    '\r': '\\r',
                    '\\': '\\\\'
                },
                startOfHTML = "\t__views.push(",
                endOfHTML = ");\n";
                (function(){
                    //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
                    var s = ["XMLHttpRequest",
                        "ActiveXObject('Msxml2.XMLHTTP.6.0')",
                        "ActiveXObject('Msxml2.XMLHTTP.3.0')",
                        "ActiveXObject('Msxml2.XMLHTTP')",
                        "ActiveXObject('Microsoft.XMLHTTP')"];
                    if( eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1 === 5.7 && location.protocol === "file:"){
                        s.shift();
                    }
                    for(var i = 0 ,el;el=s[i++];){
                        try{
                            if(eval("new "+el)){
                                dom.xhr = new Function( "return new "+el)
                                break;
                            }
                        }catch(e){}
                    }
                })();

                dom.partial = function(url){
                    var xhr = dom.xhr();
                    xhr.open("GET",url,false);
                    xhr.setRequestHeader("If-Modified-Since","0");
                    xhr.send(null);
                    return xhr.responseText|| ""
                }

                dom.tmpl = function(str,rLeft,rRight,sRight){
                    var arr = str.trim().split(rLeft),self = arguments.callee,buff = [],url,els,el,i = 0, n= arr.length;
                    while (i<n) {
                        els = arr[i++]; el = els.split(rRight);
                        if(els.indexOf(sRight) !== -1){//这里不使用els.length === 2是为了避开IE的split bug
                            switch (el[0].charAt(0)) {
                                case "#"://处理注释
                                    break;
                                case "="://处理后台返回的变量（输出到页面的);
                                    buff.push(startOfHTML, el[0].substring(1), endOfHTML)
                                    break;
                                case ":"://处理局部模板
                                    url = el[0].substring(1).trim();
                                    //缓存构筑函数的数组
                                    self[url] = self[url] || self.call(null,dom.partial(url),rLeft,rRight,sRight);
                                    buff = buff.concat(dom.tmpl[url] );
                                    break;
                                default:
                                    buff.push(el[0], "\n");
                            };
                            el[1] &&  buff.push(startOfHTML, dom.quote.call(null,el[1]), endOfHTML);
                        }else{
                            buff.push(startOfHTML, dom.quote.call(null,el[0]), endOfHTML);
                        }
                    }
                    return buff;
                }

                dom.ejs = function (obj) {
                    var sLeft = obj.left || "%>",
                    sRight = obj.right || "<%",
                    rLeft = new RegExp("\\s*"+sLeft+"\\s*"),
                    rRight = new RegExp("\\s*"+sRight+"\\s*"),
                    buff = ["var __views = [];\n"],
                    key = obj.selector || obj.url,str;
                    if(obj.selector){
                        var el = document.getElementById(key);
                        if (!el) throw "找不到目标元素";
                        str = el.text;
                    }else{
                        str =  dom.partial(key);
                        if(!str) throw "目标文件不存在";
                    }
                    if(!dom.tmpl[key]){//缓存模板函数
                        buff = buff.concat(dom.tmpl.call(null,str,rLeft,rRight,sRight));
                        dom.tmpl[key] = new Function("json", "with(json){"+buff.join("") + '\t};return __views.join("");');
                    }
                    return dom.tmpl[key](obj.json || {});
                };
                window.dom = dom;

            })();

示例：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta content="IE=8" http-equiv="X-UA-Compatible"/>
        <meta name="keywords" content="javascript模板 by 司徒正美" />
        <meta name="description" content="javascript模板 by 司徒正美" />
        <title>javascript模板 by 司徒正美</title>
    </head>
    <body>
        <h1>javascript模板 by 司徒正美</h1>
        <div id="tmplTC">这是容器</div>
        <script id="tmpl" type="tmpl">
                <h2>{{=  name }}{{= name }}</h2>
                {{# 这是注释!!!!!!!!! }}
                <ul>
                {{ for(var i=0; i< uls.length; i++){ }}
                    <li>{{=  uls[i] }}的名字是{{= name }}</li>
                    {{  }  }}
                </ul>
                {{ var color = "color:red;" }}
                <p style="text-indent:2em;{{= color }} ">{{= address }}</p>
           
        </script>
       <script src="dom/ejs.js"></script>
        <script>
            window.onload = function(){
                var els = [];
                for(var i=0;i<1000;i++){
                    els.push("第"+i+"个元素")
                }
                var a = new Date
                var data = dom.ejs({
                    selector:"tmpl",
                    left:"{{",
                    right:"}}",
                    json: {
                        name:"司徒正美",
                        uls:els,
                        address:"异次元"
                    }
                });
                document.getElementById("tmplTC").innerHTML = data;
                alert( new Date-a)
            }
        </script>
    </body>
</html>

<!doctype html> <html> <head> <meta charset="utf-8"/> <meta content="IE=8" http-equiv="X-UA-Compatible"/> <meta name="keywords" content="javascript模板 by 司徒正美" /> <meta name="description" content="javascript模板 by 司徒正美" /> <title>javascript模板 by 司徒正美</title> </head> <body> <h1>javascript模板 by 司徒正美</h1> <div id="tmplTC">这是容器</div> <script id="tmpl" type="tmpl"> <h2>{{= name }}{{= name }}</h2> {{# 这是注释!!!!!!!!! }} <ul> {{ for(var i=0; i< uls.length; i++){ }} <li>{{= uls[i] }}的名字是{{= name }}</li> {{ } }} </ul> {{ var color = "color:red;" }} <p style="text-indent:2em;{{= color }} ">{{= address }}</p> </script> <script> (function () { if(!String.prototype.trim){ String.prototype.trim = function(str){ return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, ''); } } var dom = { quote: function (str) { str = str.replace(/[\x00-\x1f\\]/g, function (chr) { var special = metaObject[chr]; return special ? special : '\\u' + ('0000' + chr.charCodeAt(0).toString(16)).slice(-4) }); return '"' + str.replace(/"/g, '\\"') + '"'; } }, metaObject = { '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '\\': '\\\\' }, startOfHTML = "\t__views.push(", endOfHTML = ");\n"; (function(){ //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx var s = ["XMLHttpRequest", "ActiveXObject('Msxml2.XMLHTTP.6.0')", "ActiveXObject('Msxml2.XMLHTTP.3.0')", "ActiveXObject('Msxml2.XMLHTTP')", "ActiveXObject('Microsoft.XMLHTTP')"]; if( eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1 === 5.7 && location.protocol === "file:"){ s.shift(); } for(var i = 0 ,el;el=s[i++];){ try{ if(eval("new "+el)){ dom.xhr = new Function( "return new "+el) break; } }catch(e){} } })(); dom.partial = function(url){ var xhr = dom.xhr(); xhr.open("GET",url,false); xhr.setRequestHeader("If-Modified-Since","0"); xhr.send(null); return xhr.responseText|| "" } dom.tmpl = function(str,rLeft,rRight,sRight){ var arr = str.trim().split(rLeft),self = arguments.callee,buff = [],url,els,el,i = 0, n= arr.length; while (i<n) { els = arr[i++]; el = els.split(rRight); if(els.indexOf(sRight) !== -1){//这里不使用els.length === 2是为了避开IE的split bug switch (el[0].charAt(0)) { case "#"://处理注释 break; case "="://处理后台返回的变量（输出到页面的); buff.push(startOfHTML, el[0].substring(1), endOfHTML) break; case ":"://处理局部模板 url = el[0].substring(1).trim(); self[url] = self[url] || self.call(null,dom.partial(url),rLeft,rRight,sRight); buff = buff.concat(dom.tmpl[url] ); break; default: buff.push(el[0], "\n"); }; el[1] && buff.push(startOfHTML, dom.quote.call(null,el[1]), endOfHTML); }else{ buff.push(startOfHTML, dom.quote.call(null,el[0]), endOfHTML); } } return buff; } dom.ejs = function (obj) { var sLeft = obj.left || "%>", sRight = obj.right || "<%", rLeft = new RegExp("\\s*"+sLeft+"\\s*"), rRight = new RegExp("\\s*"+sRight+"\\s*"), buff = ["var __views = [];\n"], key = obj.selector || obj.url,str; if(obj.selector){ var el = document.getElementById(key); if (!el) throw "找不到目标元素"; str = el.text; }else{ str = dom.partial(key); if(!str) throw "目标文件不存在"; } if(!dom.tmpl[key]){//以选择器-->解析函数的形式缓存到dom.tmpl函数中 buff = buff.concat(dom.tmpl.call(null,str,rLeft,rRight,sRight)); dom.tmpl[key] = new Function("json", "with(json){"+buff.join("") + '\t};return __views.join("");'); } return dom.tmpl[key](obj.json || {}); }; window.dom = dom; })(); window.onload = function(){ var els = []; for(var i=0;i<1000;i++){ els.push("第"+i+"个元素") } var a = new Date var data = dom.ejs({ selector:"tmpl", left:"{{", right:"}}", json: { name:"司徒正美", uls:els, address:"异次元" } }); document.getElementById("tmplTC").innerHTML = data; alert( new Date-a) } </script> </body> </html>

运行代码

现在我有一个考量，就是随着模板规模的膨胀，里面可能夹杂着越来越多变量，我们就很难分辨得清那些后台传过的东西，那些是本地的临时变量，后台的需求一变更，后台的json数据也就要改动。这维护起来非常困难。因此我非常欣赏ruby的变量书写风格，从变量名就知它是实例变量，类变量，普通变量与常量，它还有符号这东西呢，我会v4版本加入重新加入@标识符的。