Home > Developer > JavaScript
This version mainly accelerates the original template system and removes the auxiliary functions that consume a lot. I wanted to use it to compare the speed with John resig's micro-templating, and found that the other party could not handle complicated templates.
// Situ is beautiful JavaScript template-http://www.cnblogs.com/rubylouvre/-mit licensed (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' + ('000000' + 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, optional, Boolean, whether to replace the template container locally. The default value is true. If it is false, A file fragment is returned and inserted to the required DOM by the user. ejs = func Tion (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 "the target element cannot be found"; var STR = El. Text. Trim (); If (! Ejs [selector]) {While (Str. Length) {var condition = isleft? Left: Right; var Index = Str. indexof (condition); If (index! =-1) {// obtain the left var text = Str. slice (0, index); If (isleft) {buff. push (startofhtml, Dom. quote (text. trim (), endofhtml);} else {Switch (text. charat (0) {Case "#": // process annotation break; Case "=": // process the variables returned by the background (output to the page); 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 "in string {" + DOM. quot E (STR) + "} cannot find the right defined character" + right} STR = Str. Slice (index + 2). Trim (); isleft =! Isleft;} ejs [selector] = new function ("JSON", "With (JSON) {" + buff. join ("") + '}; return _ views. join (""); ')} parser. innerhtml = ejs [selector] (obj. JSON | {}); While (parser. firstchild) {fragment. appendchild (parser. firstchild)} return onsite? El. parentnode. replaceChild (fragment, El): fragment ;}; window. DOM = Dom ;})();
JOHN resig's micro-templating (error)
<Br/> <! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "ie = 8 "http-equiv =" X-UA-compatible "/> <br/> <meta name =" keywords "content =" javascript template by situ zhengmei "/> <br /> <meta name = "Description" content = "javascript template by situ zhengmei"/> <br/> <title> JavaScript template by situ zhengmei </title> <br/> </pead> <br/> <body> <br/> <p> JOHN resig's micro-templating </p> <br/> <SCRIPT id = "tmpl" Type = "Text /Html "> <br/> <H2> <% = Name %> </H2> <br/> <ul> <br/> <% for (VAR I = 0; I <supplies. length; I ++) {%> <br/> <li> <% = supplies [I] %> is named <% = Name %> </LI> <br/> <%} %> <br/> </ul> <br/> <% var color = "color: red; "%> <br/> <P style =" text-indent: 2em; <% = color %> "> <% = address %> </P> <br/> </SCRIPT> <br/> <Div id =" Results "> </ div> <br/> <SCRIPT> </P> <p> (function () {<br/> var cache ={}; <br/> This. Tmpl = function tmpl (STR, data) {<br/> var fn =! /\ W/. Test (STR )? Cache [STR] = cache [STR] | tmpl (document. getelementbyid (STR ). innerhtml): <br/> New Function ("OBJ", "Var P = [], print = function () {P. push. apply (p, arguments) ;}; "+" with (OBJ) {P. push ('"+ Str. replace (/[\ r \ t \ n]/g ,""). split ("<% "). join ("\ t "). replace (/(^ | %>) [^ \ t] *) '/g, "$1 \ r "). replace (/\ t = (. *?) %>/G, "', $1 ,'"). split ("\ t "). join ("');"). split ("%> "). join ("P. push ('"). split ("\ r "). join ("\ '") + "');} return p. join ('');"); <br/> return data? FN (data): FN; <br/>}; <br/>}) (); </P> <p> window. onload = function () {<br/> var els = []; <br/> for (VAR I = 0; I <1000; I ++) {<br/> els. push ("Number" + I + "element") <br/>}< br/> var A = new date; <br/> var Results = document. getelementbyid ("Results"); <br/> results. innerhtml = tmpl ("tmpl", {<br/> name: "situ zhengmei", <br/> supplies: els, <br/> address: ""}); <br/> alert (new date-) <br/>}< br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
RunCode
First version:
<Br/> <! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "ie = 8 "http-equiv =" X-UA-compatible "/> <br/> <meta name =" keywords "content =" javascript template by situ zhengmei "/> <br /> <meta name = "Description" content = "javascript template by situ zhengmei"/> <br/> <title> JavaScript template by situ zhengmei </title> <br/> </pead> <br/> <body> <br/> <p> JavaScript template ejs V1 by situ zhengmei </p> <br/> <SCRIPT id = "tmpl" type = "text/h TML "> <br/> <H2> <% = Name %> </H2> <br/> <% # This is a comment !!!!! !!!! %> <Br/> <ul> <br/> <% for (VAR I = 0; I <supplies. length; I ++) {%> <br/> <li> <% = supplies [I] %> </LI> <br/> <% }%> <br/> </ul> <br/> <% var color = "color: red; "%> <br/> <P style =" text-indent: 2em; <% = color %> "> <% = address %> </P> <br/> </SCRIPT> </P> <p> <SCRIPT> </P> <p> (function () {<br/> If (! String. prototype. trim) {<br/> string. prototype. trim = function (STR) {<br/> return this. replace (/^ [\ s \ xa0] + | [\ s \ xa0] + $/g ,''); <br/>}< br/> var Dom ={< br/> quote: function (STR) {<br/> STR = Str. replace (/[\ x00-\ x1f \]/g, function (CHR) {<br/> var special = metaobject [CHR]; <br/> return special? Special: '\ U' + ('000000' + Chr. charcodeat (0 ). tostring (16 )). slice (-4) <br/>}); <br/> return '"' + Str. replace (/"/g, '\"') + '"'; <br/>}< br/> }, <br/> metaobject = {<br/> '\ B': '\ B', <br/> '\ t':' \ t ', <br/> '\ N':' \ n', <br/> '\ F':' \ F', <br/> '\ R ': '\ R', <br/>' \ ':' \ '<br/>}, <br/> parser = document. createelement ("Div"), <br/> startofhtml = "\ t _ views. push (", <br/> endofhtml ="); \ n ", <Br/> outerscan = function (STR, buff, left, right) {<br/> var Index = Str. indexof (left); <br/> If (index! =-1) {<br/> buff. push (startofhtml, Dom. quote (Str. slice (0, index), endofhtml); <br/> innerscan (Str. slice (index + 2), buff, left, right); <br/>} else {<br/> buff. push (startofhtml, Dom. quote (STR), endofhtml); <br/>}< br/>}, <br/> innerscan = function (STR, buff, left, right) {<br/> var Index = Str. indexof (right); <br/> If (index! =-1) {<br/> var text = Str. slice (0, index); <br/> switch (text. charat (0) {<br/> case "#": // handle comments <br/> break; <br/> case "= ": // process the variables returned by the background (output to the page) <br/> buff. push (startofhtml, text. slice (1), endofhtml) <br/> break; <br/> default: <br/> buff. push (text, "\ n") <br/>}< br/> outerscan (Str. slice (index + 2), buff, left, right ); <br/>}else {<br/> throw "cannot find the right defined character" + STR <br/>}</P> <p> // onsite, optional; bool EAN: whether to replace the template container in place. The default value is true. If it is false, a file fragment is returned, which is inserted to the desired place by the user. <br/> Dom. ejs = function (OBJ) {<br/> var onsite = obj. onsite = void 0, <br/> left = obj. left | "<%", <br/> right = obj. right | "%>", <br/> selector = obj. selector, <br/> buff = ["VaR _ views = []; \ n"], <br/> fragment = document. createdocumentfragment (), <br/> El = document. getelementbyid (selector), <br/> ejs = Dom. ejs; <br/> If (! El) throw "the target element cannot be found"; <br/> If (! Ejs [selector]) {<br/> outerscan (El. text. trim (), buff, left, right); <br/> ejs [selector] = new function ("JSON", "With (JSON) {" + buff. join ("") + '}; return _ views. join (""); ') <br/>}< br/> parser. innerhtml = ejs [selector] (obj. JSON | |{}); <br/> while (parser. firstchild) {<br/> fragment. appendchild (parser. firstchild) <br/>}< br/> return onsite? El. parentnode. replaceChild (fragment, El): fragment; <br/>}; <br/> window. DOM = Dom; </P> <p >}) (); </P> <p> window. onload = function () {<br/> var els = []; <br/> for (VAR I = 0; I <1000; I ++) {<br/> els. push ("Number" + I + "element") <br/>}< br/> var A = new date <br/> Dom. ejs ({<br/> selector: "tmpl", <br/> JSON: {<br/> name: "situ zhengmei", <br/> supplies: els, <br/> address: ""} <br/>}); <br/> alert (new date-) <br/>}< br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
Version 2:
<Br/> <! Doctype HTML> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "ie = 8 "http-equiv =" X-UA-compatible "/> <br/> <meta name =" keywords "content =" javascript template by situ zhengmei "/> <br /> <meta name = "Description" content = "javascript template by situ zhengmei"/> <br/> <title> JavaScript template by situ zhengmei </title> <br/> </pead> <br/> <body> <br/> <p> JavaScript template ejs V2 by situ zhengmei </p> <br/> <SCRIPT id = "tmpl" type = "text/h TML "> <br/> <H2> <% = Name %> </H2> <br/> <% # This is a comment !!!!! !!!! %> <Br/> <ul> <br/> <% for (VAR I = 0; I <supplies. length; I ++) {%> <br/> <li> <% = supplies [I] %> is named <% = Name %> </LI> <br/> <%} %> <br/> </ul> <br/> <% var color = "color: red; "%> <br/> <P style =" text-indent: 2em; <% = color %> "> <% = address %> </P> <br/> </SCRIPT> </P> <p> <SCRIPT> </P> <p> (function () {<br/> If (! String. prototype. trim) {<br/> string. prototype. trim = function (STR) {<br/> return this. replace (/^ [\ s \ xa0] + | [\ s \ xa0] + $/g ,''); <br/>}< br/> var Dom ={< br/> quote: function (STR) {<br/> STR = Str. replace (/[\ x00-\ x1f \]/g, function (CHR) {<br/> var special = metaobject [CHR]; <br/> return special? Special: '\ U' + ('000000' + Chr. charcodeat (0 ). tostring (16 )). slice (-4) <br/>}); <br/> return '"' + Str. replace (/"/g, '\"') + '"'; <br/>}< br/> }, <br/> metaobject = {<br/> '\ B': '\ B', <br/> '\ t':' \ t ', <br/> '\ N':' \ n', <br/> '\ F':' \ F', <br/> '\ R ': '\ R', <br/>' \ ':' \ '<br/>}, <br/> parser = document. createelement ("Div"), <br/> startofhtml = "\ t _ views. push (", <br/> endofhtml ="); \ n "; </P> <p> // onsite, optional, Boolean, whether to replace the template container locally. The default value is true. If it is false, a file fragment is returned, insert it to the desired location by the user <br/> Dom. ejs = function (OBJ) {<br/> var onsite = obj. onsite = void 0, <br/> left = obj. left | "<%", <br/> right = obj. right | "%>", <br/> selector = obj. selector, <br/> isleft = true, <br/> buff = ["VaR _ views = []; \ n"], <br/> fragment = document. createdocumentfragment (), <br/> El = document. getelementbyid (S Elector), <br/> ejs = Dom. ejs; <br/> If (! El) throw "the target element cannot be found"; <br/> var STR = El. Text. Trim (); <br/> If (! Ejs [selector]) {<br/> while (Str. Length) {<br/> var condition = isleft? Left: Right; <br/> var Index = Str. indexof (condition); <br/> If (index! =-1) {// obtain the left <br/> var text = Str. slice (0, index); <br/> If (isleft) {<br/> buff. push (startofhtml, Dom. quote (text. trim (), endofhtml); <br/>}else {<br/> switch (text. charat (0) {<br/> case "#": // handle comments <br/> break; <br/> case "= ": // process the variables returned by the background (output to the page); <br/> buff. push (startofhtml, text. slice (1), endofhtml) <br/> break; <br/> default: <br/> buff. push (text, "\ n") <br/>}; <br/>}< br/>} else {<br/> If (is Left) {<br/> buff. push (startofhtml, Dom. quote (STR), endofhtml); <br/> break; <br/>}else {<br/> throw "in string {" + DOM. right definer "+ right <br/>}< br/> STR = Str. slice (index + 2 ). trim (); <br/> isleft =! Isleft; <br/>}< br/> ejs [selector] = new function ("JSON", "With (JSON) {" + buff. join ("") + '}; return _ views. join (""); ') <br/>}< br/> parser. innerhtml = ejs [selector] (obj. JSON | |{}); <br/> while (parser. firstchild) {<br/> fragment. appendchild (parser. firstchild) <br/>}< br/> return onsite? El. parentnode. replaceChild (fragment, El): fragment; <br/>}; <br/> window. DOM = Dom; </P> <p >}) (); </P> <p> window. onload = function () {<br/> var els = []; <br/> for (VAR I = 0; I <1000; I ++) {<br/> els. push ("Number" + I + "element") <br/>}< br/> var A = new date <br/> Dom. ejs ({<br/> selector: "tmpl", <br/> JSON: {<br/> name: "situ zhengmei", <br/> supplies: els, <br/> address: ""} <br/>}); <br/> alert (new date-) <br/>}< br/> </SCRIPT> <br/> </body> <br/> </ptml> <br/>
Run code
In the next version, a local template and the Helper method will be added.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
