javascript 模板系統 ejs v7

文章目錄

• javascript模板系統 ejs 第七版！
• 更新日誌
• 多重參數變形化，四種傳參方式

javascript模板系統 ejs 第七版！

本版本只要是對其易用性進一些修改，去掉兩個冗餘的功能。

我發現我的模組系統天生就能實現模組套嵌，因此有關子模板匯入的兩個操作符去掉。

對參數進行多態化，可簡單地傳入一個字串來指定目標元素的選取器或目標檔案的URL（通過url(http://)來區分）與一個參數對象，也可以像EXT那樣傳入一個雜湊。

      //dom.ejs v7 by 司徒正美      //http://www.cnblogs.com/rubylouvre/archive/2010/10/04/1841933.html      ;      (function(){        this.dom = {          quote : String.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, '\\"') + '"';          },          mix : function(target, source ,override) {            var i, ride = (override === void 0) || override;            for (i in source) {              if (ride || !(i in target)) {                target[i] = source[i];              }            }            return target;          }        }        if(!String.prototype.trim){          String.prototype.trim = function(){            return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');          }        }        ;        (function(w,s){          //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx          s = ["XMLHttpRequest",            "ActiveXObject('Msxml2.XMLHTTP.6.0')",            "ActiveXObject('Msxml2.XMLHTTP.3.0')",            "ActiveXObject('Msxml2.XMLHTTP')",            "ActiveXObject('Microsoft.XMLHTTP')"];          //IE專有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。          if( !-[1,] && w.ScriptEngineMinorVersion() === 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){}          }        })(window);        var        metaObject = {          '\b': '\\b',          '\t': '\\t',          '\n': '\\n',          '\f': '\\f',          '\r': '\\r',          '\\': '\\\\'        },        _startOfHTML = "\t__views.push(",        _endOfHTML = ");\n",        _rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g,        _partial = function(url){          var xhr = dom.xhr();          xhr.open("GET",url,false);          xhr.setRequestHeader("If-Modified-Since","0");          xhr.send(null);          return xhr.responseText|| ""        },        defaults = {          left: "<&",          right: "&>"        }        var ejs = dom.ejs = function(obj,data){          if(typeof obj === "string"){            if(obj.indexOf("url(") === 0){              obj = {                url : obj.slice(4,-1),                data: data              }            }else{              obj = {                selector:obj,                data :data              }            }          }          dom.mix(obj, defaults,false);          if(!obj.rLeft){            obj.rLeft = new RegExp("\\s*"+obj.left+"\\s*")            obj.rRight = new RegExp("\\s*"+ obj.right+"\\s*");          }          var key = obj.selector || obj.url;           if(!ejs[key]){            var  rAt = _rAt, startOfHTML = _startOfHTML, endOfHTML = _endOfHTML,partial = _partial,            buff = ["var __views = [];\n"],str , logic;            if(obj.selector){              var el = document.getElementById(key);              if (!el) throw "can not find the target element";              str = el.text;            }else {              str = partial(obj.url);              if (!str) throw "the target file does not exist";            }            var arr = str.trim().split(obj.rLeft),temp = [],i = 0,n = arr.length,els,segment;            while(i < n){              segment = arr[i++];              els = segment.split(obj.rRight);              if(segment.indexOf(obj.right) !== -1){//這裡不使用el.length === 2是為了避開IE的split bug                switch (els[0].charAt(0)) {                  case "="://處理後台返回的變數（輸出到頁面的);                    logic = els[0].substring(1);                    if(logic.indexOf("@")!==-1){                      temp.push(startOfHTML, logic.replace(rAt,"$1data."), endOfHTML);                    }else{                      temp.push(startOfHTML, logic, endOfHTML);                    }                    break;                  case "#"://處理注釋                    break;                  default://處理邏輯                    logic = els[0];                    if(logic.indexOf("@")!==-1){                      temp.push(logic.replace(rAt,"$1data."), "\n");                    }else{                      temp.push(logic, "\n");                    }                }                //處理靜態HTML片斷                els[1] &&  temp.push(startOfHTML, dom.quote.call(null,els[1]), endOfHTML)              }else{                //處理靜態HTML片斷                temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML)              }            }            ejs[key] = new Function("data",buff.concat(temp).join("")+';return __views.join("");');          }          return  ejs[key](obj.data || {});        }      })();

使用方法見如下例子：

<br /><!doctype html><br /><html lang="en"><br /> <head><br /> <meta charset="utf-8" /><br /> <meta content="IE=8" http-equiv="X-UA-Compatible"/><br /> <title>javascript 模板系統 ejs v6 by 司徒正美</title><br /> <style type="text/css"><br /> table {<br /> border:1px solid #a9ea00;<br /> border-collapse:collapse;<br /> width:80%;<br /> }<br /> td{<br /> border:1px solid #a9ea00;<br /> padding:0;<br /> text-align:center;<br /> }<br /> </style><br /> <script><br /> //dom.ejs v7 by 司徒正美<br /> //http://www.cnblogs.com/rubylouvre/archive/2010/10/04/1841933.html<br /> ;<br /> (function(){<br /> this.dom = {<br /> quote : String.quote || function (str) {<br /> str = str.replace(/[\x00-\x1f\\]/g, function (chr) {<br /> var special = metaObject[chr];<br /> return special ? special : '\\u' + ('0000'+chr.charCodeAt(0).toString(16)).slice(-4);<br /> });<br /> return '"' + str.replace(/"/g, '\\"') + '"';<br /> },<br /> mix : function(target, source ,override) {<br /> var i, ride = (override === void 0) || override;<br /> for (i in source) {<br /> if (ride || !(i in target)) {<br /> target[i] = source[i];<br /> }<br /> }<br /> return target;<br /> }<br /> }</p><p> if(!String.prototype.trim){<br /> String.prototype.trim = function(){<br /> return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');<br /> }<br /> }<br /> ;<br /> (function(w,s){<br /> //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx<br /> s = ["XMLHttpRequest",<br /> "ActiveXObject('Msxml2.XMLHTTP.6.0')",<br /> "ActiveXObject('Msxml2.XMLHTTP.3.0')",<br /> "ActiveXObject('Msxml2.XMLHTTP')",<br /> "ActiveXObject('Microsoft.XMLHTTP')"];<br /> //IE專有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。<br /> if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){<br /> s.shift();<br /> }<br /> for(var i = 0 ,el;el=s[i++];){<br /> try{<br /> if(eval("new "+el)){<br /> dom.xhr = new Function( "return new "+el);<br /> break;<br /> }<br /> }catch(e){}<br /> }<br /> })(window);</p><p> var<br /> metaObject = {<br /> '\b': '\\b',<br /> '\t': '\\t',<br /> '\n': '\\n',<br /> '\f': '\\f',<br /> '\r': '\\r',<br /> '\\': '\\\\'<br /> },<br /> _startOfHTML = "\t__views.push(",<br /> _endOfHTML = ");\n",<br /> _rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g,<br /> _partial = function(url){<br /> var xhr = dom.xhr();<br /> xhr.open("GET",url,false);<br /> xhr.setRequestHeader("If-Modified-Since","0");<br /> xhr.send(null);<br /> return xhr.responseText|| ""<br /> },<br /> defaults = {<br /> left: "<&",<br /> right: "&>"<br /> }<br /> var ejs = dom.ejs = function(obj,data){<br /> if(typeof obj === "string"){<br /> if(obj.indexOf("url(") === 0){<br /> obj = {<br /> url : obj.slice(4,-1),<br /> data: data<br /> }<br /> }else{<br /> obj = {<br /> selector:obj,<br /> data :data<br /> }<br /> }<br /> }<br /> dom.mix(obj, defaults,false);<br /> if(!obj.rLeft){<br /> obj.rLeft = new RegExp("\\s*"+obj.left+"\\s*")<br /> obj.rRight = new RegExp("\\s*"+ obj.right+"\\s*");<br /> }<br /> var key = obj.selector || obj.url;</p><p> if(!ejs[key]){<br /> var rAt = _rAt, startOfHTML = _startOfHTML, endOfHTML = _endOfHTML,partial = _partial,<br /> buff = ["var __views = [];\n"],str , logic;<br /> if(obj.selector){<br /> var el = document.getElementById(key);<br /> if (!el) throw "can not find the target element";<br /> str = el.text;<br /> }else {<br /> str = partial(obj.url);<br /> if (!str) throw "the target file does not exist";<br /> }<br /> var arr = str.trim().split(obj.rLeft),temp = [],i = 0,n = arr.length,els,segment;<br /> while(i < n){<br /> segment = arr[i++];<br /> els = segment.split(obj.rRight);<br /> if(segment.indexOf(obj.right) !== -1){//這裡不使用el.length === 2是為了避開IE的split bug<br /> switch (els[0].charAt(0)) {<br /> case "="://處理後台返回的變數（輸出到頁面的);<br /> logic = els[0].substring(1);<br /> if(logic.indexOf("@")!==-1){<br /> temp.push(startOfHTML, logic.replace(rAt,"$1data."), endOfHTML);<br /> }else{<br /> temp.push(startOfHTML, logic, endOfHTML);<br /> }<br /> break;<br /> case "#"://處理注釋<br /> break;<br /> default://處理邏輯<br /> logic = els[0];<br /> if(logic.indexOf("@")!==-1){<br /> temp.push(logic.replace(rAt,"$1data."), "\n");<br /> }else{<br /> temp.push(logic, "\n");<br /> }<br /> }<br /> //處理靜態HTML片斷<br /> els[1] && temp.push(startOfHTML, dom.quote.call(null,els[1]), endOfHTML)<br /> }else{<br /> //處理靜態HTML片斷<br /> temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML)<br /> }<br /> }<br /> ejs[key] = new Function("data",buff.concat(temp).join("")+';return __views.join("");');<br /> }<br /> return ejs[key](obj.data || {});<br /> }<br /> })();</p><p> </script><br /> <script><br /> window.onload = function(){<br /> var trs = [<br /> {name:"隱形殺手",age:29,sex:"男"},<br /> {name:"索拉",age:22,sex:"男"},<br /> {name:"fesyo",age:23,sex:"女"},<br /> {name:"戀妖壺",age:18,sex:"男"},<br /> {name:"竜崎",age:25,sex:"男"},<br /> {name:"你不懂的",age:30,sex:"女"}<br /> ]<br /> var lis = {<br /> aaa:"AAA",<br /> bbb:"BBB",<br /> ccc:"CCC"<br /> }</p><p> var tmpl = dom.ejs("js_table_tmpl",{<br /> title:"dom.ejs v7 ",<br /> name:"司徒正美",<br /> trs:trs,<br /> lis:lis,<br /> href:"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_type4.jpg"<br /> });<br /> document.getElementById("js_table_tc").innerHTML = tmpl;<br /> }<br /> </script><br /> </head><br /> <body></p><p> <script type="tmpl" id="js_table_tmpl"><br /> <h2><&= @title &> by <&= @name &></h2><br /> <table><br /> <& for(var i=0,tl = @trs.length,tr;i < tl;i++){ &><br /> <& tr = @trs[i]; &><br /> <tr><br /> <td><&= tr.name &></td> <td><&= tr.age &></td> <td><&= tr.sex || "男" &></td><br /> <&= dom.ejs("js_tds_tmpl",{}) &><br /> </tr><br /> <& } &><br /> </table><br /> < 怎麼可能不支援圖片 &><br /> <img src="<&= @href &>"><br /> <ol><&= dom.ejs("js_lis_tmpl",@lis) &></ol><br /> </script><br /> <script type="tmpl" id="js_lis_tmpl"><br /> <li><&= @aaa &></li><br /> <li><&= @bbb &></li><br /> <li><&= @ccc &></li><br /> </script><br /> <script type="tmpl" id="js_tds_tmpl"><br /> <td>靜態表格</d> <td>靜態表格</d> <td>靜態表格</d><br /> </script><br /> <div id="js_table_tc"></p><p> </div><br /> </body><br /></html><br />

運行代碼

更新日誌

v1預設界定符為，當然也可以自訂界定符，只支援當前頁面的script元素做模板http://www.cnblogs.com/rubylouvre/archive/2010/08/10/1796383.htmlv2改進演算法提速，比John Resig的 Micro-Templating模板更能應對複雜的模板http://www.cnblogs.com/rubylouvre/archive/2010/08/22/1805914.htmlv3http://www.cnblogs.com/rubylouvre/archive/2010/08/25/1807789.html增添了局部模板功能v4http://www.cnblogs.com/rubylouvre/archive/2010/08/31/1813122.html對v3的結構進行最佳化，支援遠端獨立檔案做模板v5http://www.cnblogs.com/rubylouvre/archive/2010/08/31/1813122.html嘗試新的演算法v6http://www.cnblogs.com/rubylouvre/archive/2010/10/05/1841933.html更新預設界定符為，添加新的操作符多重參數變形化，四種傳參方式
//方式1dom.ejs("id",{aa:"aaa",bb:"bbb"})//方式2dom.ejs("url(http://aaa/tmpl.html)",{aa:"aaa",bb:"bbb"})//方式3dom.ejs({ selector:"id", data    : {aa:"aaa",bb:"bbb"} });//方式4dom.ejs({ url:"http://aaa/tmpl.html", data    : {aa:"aaa",bb:"bbb"} })