runxinzhi.com
首页
百度搜索
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>
运行代码
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
相关阅读:
网络对抗实验一
计蒜课--顺序表查找、删除、遍历操作的复习
实验六
实验五
实验四
实验三
python补码转源码
教学设计的方法
十、python进程和线程
九、文件和异常
原文地址:https://www.cnblogs.com/rubylouvre/p/1813122.html
最新文章
larval 5.5 安装笔记
树莓派
swoole_server
安装 composer
appstore不能登陆
xxx.app已损坏,打不开.你应该将它移到废纸篓 macOS 10.12 Sierra
Ubuntu下使用SVN
JAVA项目上线发布步骤流程
Spring boot如何修改默认tomcat服务器端口8030
The superclass "javax.servlet.http.HttpServlet" was not found on the Java Bu
热门文章
Cannot read property 'replace' of undefined
源码不生效的修改
Http通讯
抽取父类
mysql中执行sql脚本语句
安装Selenium IDE
Lucene倒排索引工作原理
网络对抗实验四 恶意软件
网络对抗实验三
网络对抗实验二 网络嗅探与欺骗
Copyright © 2020-2023
润新知