javascript ejs v4与v5

zoukankan html css js c++ java

javascript ejs v4与v5

没有加入新功能，只是提高了性能。

v2:之前最快的版本。
<!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> <div id="TC">javascript模板ejs v2 by 司徒正美</div> <script id="tmpl" type="text/html"> <h2><%= name %><%= name %></h2> <%# 这是注释!!!!!!!!! %> <ul> <% for(var i=0; i< supplies.length; i++){ %> <li><%= supplies[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', '\\': '\\\\' }, parser = document.createElement("div"), startOfHTML = "\t__views.push(", endOfHTML = ");\n"; //onsite，可选，Boolean，是否就地替换掉模板容器，默认true，如果为false，则返回一个文档碎片，交由用户自己插入到需要的地方 dom.ejs = function (obj) { var onsite = obj.onsite === void 0 , left = obj.left || "<%", right =obj.right || "%>", selector = obj.selector, isLeft = true, buff = ["var __views = [];\n"], fragment = document.createDocumentFragment(), el = document.getElementById(selector), ejs = dom.ejs; if (!el) throw "找不到目标元素"; var str = el.text.trim(); if(!ejs[selector]){ while(str.length){ var condition = isLeft ? left :right; var index = str.indexOf(condition); if(index !== -1){//取左边 var text = str.slice(0,index); if(isLeft){ buff.push(startOfHTML, dom.quote(text.trim()), endOfHTML); }else{ switch (text.charAt(0)) { case "#"://处理注释 break; case "="://处理后台返回的变量（输出到页面的); buff.push(startOfHTML, text.slice(1), endOfHTML) break; default: buff.push(text, "\n") }; } }else{ if(isLeft){ buff.push(startOfHTML, dom.quote(str), endOfHTML); break; }else{ throw "在字符串{{ "+dom.quote(str)+" }}中找不到右界定符"+right } } str = str.slice(index+2).trim(); isLeft = !isLeft; } ejs[selector] = new Function("json", "with(json){"+buff.join("") + '};return __views.join("");') } return ejs[selector](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", json: { name:"司徒正美", supplies:els, address:"异次元"} }); document.getElementById("TC").innerHTML = data alert( new Date-a) } </script> </body> </html>

v4:v3的去函数递归版本
<!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.ejs = function (obj) { if(!arguments[1]){ obj.left = obj.left || "%>"; obj.right = obj.right || "<%"; obj.rLeft = new RegExp("\\s*"+obj.left+"\\s*"); obj.rRight = new RegExp("\\s*"+obj.right+"\\s*"); } var buff = ["var __views = [];\n"], self = arguments.callee, 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(!self[key]){//缓存模板函数 var arr = str.trim().split(obj.rLeft),temp = [],segment,els,url,i = 0, n= arr.length; while (i<n) { segment = arr[i++]; els = segment.split(obj.rRight); if(segment.indexOf(obj.right) !== -1){//这里不使用els.length === 2是为了避开IE的split bug switch (els[0].charAt(0)) { case "#"://处理注释 break; case "="://处理后台返回的变量（输出到页面的); temp.push(startOfHTML, els[0].substring(1), endOfHTML) break; case ":"://处理局部模板 delete obj.selector; url = obj.url = els[0].substring(1).trim(); //缓存构筑函数的数组 self[url] = self[url] || self(obj,true); temp = temp.concat( self[url]); break; default: temp.push(els[0], "\n"); }; els[1] && temp.push(startOfHTML, dom.quote.call(null,els[1]), endOfHTML); }else{ temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML); } } if(arguments[1]){ return (self[key] = temp); }else{ buff = buff.concat(temp); self[key] = new Function("json", "with(json){"+buff.join("") + '\t};return __views.join("");'); } } return self[key](obj.json || {}); }; window.dom = dom; })(); </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>

v5:新的算法
<!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.ejs = function (obj) { if(!arguments[1]){ obj.left = obj.left || "%>"; obj.right = obj.right || "<%"; obj.reg = new RegExp('([\\s\\S]*?)(?:'+obj.left+')((.)([\\s\\S]*?))(?:'+obj.right+')','g'); } var buff = ["var __views = [];\n"], self = arguments.callee, 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(!self[key]){//缓存模板函数 var temp = []; str = str.replace(obj.reg,function($,outer,inner,symbol,logic){ outer && temp.push(startOfHTML, dom.quote.call(null,outer.trim()), endOfHTML); switch (symbol) { case "#"://处理注释 break; case "="://处理后台返回的变量（输出到页面的); temp.push(startOfHTML, logic, endOfHTML) break; case ":"://处理局部模板 delete obj.selector; var url = obj.url = logic.trim(); //缓存构筑函数的数组 self[url] = self[url] || self(obj,true); temp = temp.concat( self[url] ); break; default: temp.push(inner, "\n"); } return "" }); str && temp.push(startOfHTML, dom.quote.call(null,str.trim()), endOfHTML); } if(arguments[1]){ return (self[key] = temp); }else{ buff = buff.concat(temp); self[key] = new Function("json", "with(json){"+buff.join("") + '\t};return __views.join("");'); } return self[key](obj.json || {}); }; window.dom = dom; })(); </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 声明
 怎样理解 Vue 组件中 data 必须为函数 ?
怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
怎样在 Vue 的 component 组件中使用 props ?
怎样创建并使用 vue 组件 (component) ?
怎样在 Vue 中使用 v-model 处理表单?
怎样理解 MVVM ( Model-View-ViewModel ) ?
怎样在 Vue 中使用事件修饰符 ?
怎样在 Vue 里面绑定样式属性 ?
怎样使用 Vue 的监听属性 watch ?

原文地址：https://www.cnblogs.com/rubylouvre/p/1813122.html