Javascript template system ejs V7

ArticleDirectory

• Javascript template system ejs version 7!
• Update log
• Parameter polymorphism: four parameter passing Methods

Javascript template system ejs version 7!

This version can be modified to ease of use, removing two redundant features.

I found that my module system can implement module nesting by nature, so the two operators related to sub-template import are removed.

Polymorphism of parameters. You can simply input a string to specify the selector of the target element or the URL of the target file (differentiated by URL (http: //) and a parameter object, you can also input a hash like Ext.

// Dom. ejs V7 by situ zhengmei // 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' + ('000000' + 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 ('micros' Oft. XMLHTTP ') "]; // The proprietary JScript methods of IE: scriptengine, scriptenginebuildversion, scriptenginemajorversion, scriptengineminorversion, collectgarbage, runtimeobject, and 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 \ u00 C0-\ 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) {// here El is not used. length = 2 is used to avoid the split bug switch (ELS [0] of IE. charat (0) {Case "=": // process the variables returned by the background (output to the page); 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 "#": // process annotation break; default: // process logic = els [0]; If (logic. indexof ("@")! =-1) {temp. push (logic. replace (rat, "$ 1data. ")," \ n ");} else {temp. push (logic, "\ n") ;}// process static html fragments els [1] & temp. push (startofhtml, Dom. quote. call (null, Els [1]), endofhtml)} else {// process static html fragments 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 || {});}})();

see the following example for usage:

<Br/> <! Doctype HTML> <br/> <HTML lang = "en"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 8" http-equiv = "X-UA-compatible"/> <br/> <title> JavaScript template system ejs V6 by situ zhengmei </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: Ce Nter; <br/>}< br/> </style> <br/> <SCRIPT> <br/> // Dom. ejs V7 by situ zhengmei <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' + ('000000' + 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/> return target; <br/>}</P> <p> If (! String. prototype. trim) {<br/> string. prototype. trim = function () {<br/> return this. replace (/^ [\ s \ xa0] + | [\ s \ xa0] + $/g ,''); <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/> // The proprietary JScript methods of IE: scriptengine, scriptenginebuildversion, scriptenginemajorversion, scriptengineminorversion, collectgarbage, runtimeobject, and 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) {<B R/> OBJ = {<br/> URL: obj. slice (4,-1), <br/> data: Data <br/>}< br/>} else {<br/> OBJ ={< br/> selector: OBJ, <br/> data: Data <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) {// here El is not used. length = 2 is used to avoid the split bug of IE <br/> switch (ELS [0]. charat (0) {<br/> case "=": // process the variables returned by the background (output to the page); <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 "#": // process comments <br/> break; <br/> default: // processing logic <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/> // process static html fragments <br/> els [1] & temp. push (startofhtml, Dom. quote. call (null, Els [1]), endofhtml) <br/>}else {<br/> // process static html fragments <br/> temp. push (startofhtml, Dom. quote. call (null, Els [0]), endofhtml) <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: "invisible killer", age: 29, sex: "male "}, <br/> {name: "Sola", age: 22, sex: "male" },< br/> {name: "fesyo", age: 23, sex: "female" },< br/> {name: "Love demon pot", age: 18, sex: "male" },< br/> {Name: "Miyazaki", age: 25, sex: "male" },< br/> {name: "You don't understand", age: 30, sex: "female"} <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:" situ zhengmei ", <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/> </pead> <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> <& = tr. age &> </TD> <& = tr. sex | "male" &> </TD> <br/> <& = Dom. ejs ("js_tds_tmpl ",{}) &> <br/> </tr> <br/> <& }&> <br/> </table> <br/> <How can images not be supported? &> <br/> <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> static table </D> <TD> static table </D> <br/> </SCRIPT> <br/> <Div id = "js_table_tc"> </P> <p> </div> <br/> </body> <br/> </ptml> <br/>

RunCode

Update log

 V1 is the default delimiter. You can also customize the delimiter, only the script element on the current page can be used as the template http://www.cnblogs.com/rubylouvre/archive/2010/08/10/1796383.htmlv2improved  algorithm  to speed up, it is better than John resig's micro-templating template to deal with complicated Templates using 
 // method 1dom. ejs ("ID", {AA: "AAA", BB: "BBB"}) // method 2dom. ejs ("URL (http: // AAA/tmpl.html)", {AA: "AAA", BB: "BBB"}) // method 3DOM. ejs ({selector: "ID", data: {AA: "AAA", BB: "BBB" }}); // method 4dom. ejs ({URL: "http: // AAA/tmpl.html", data: {AA: "AAA", BB: "BBB" }})