On the javascript customization template_javascript skills

This article briefly introduces two methods for customizing templates in javascript, which are illustrated in great detail. We recommend them to our partners here.

/*** Created by Administrator on 15-1-19. */function functionUtil () {} functionUtil = {// whether a DOM node has an attribute hasAttr: function (el, name) {var attr = el. getAttributeNode & el. getAttributeNode (name); return attr? Attr. specified: false}, // getByClass: function (sClass, oParent) {oParent = oParent | document; if (! OParent. getElementsByClassName) {return oParent. getElementsByClassName (sClass);} var arr = []; var aEle = oParent. getElementsByTagName ('*'); var reg = new RegExp ('(^ | \ s)' + sClass + '(\ s | $ )'); // var reg = new RegExp ('(^ | [\ x20 \ t \ r \ n \ f]) '+ sClass +' ([\ x20 \ t \ r \ n \ f] | $) '); for (var I = 0; I <aEle. length; I ++) {if (reg. test (aEle [I]. className) {arr. push (aEle [I]) ;}} return arr ;}, // dynamic AddSheetFile: function (path) {var fileref = document. createElement ("link") fileref. rel = "stylesheet"; fileref. type = "text/css"; fileref. href = path; fileref. media = "screen"; var headobj = document. getElementsByTagName ('head') [0]; headobj. appendChild (fileref) ;}, // bind the json data LoadJsonData: function (sParent, oJson) {var oParent = document. getElementById (sParent); if (oJso N instanceof Array) {var str = oParent. innerHTML; for (var I = 0; I <oJson. length-1; I ++) {oParent. innerHTML + = str;} for (var d in oJson) {oParent. children [d]. innerHTML = oParent. children [d]. innerHTML. replace (/\ $ \ {(\ w +) \}/g, function (str, $1) {return oJson [d] [$1]? OJson [d] [$1]: '';}) ;}} else {oParent. innerHTML = oParent. innerHTML. replace (/\ $ \ {(\ w +) \}/g, function (str, $1) {return oJson [$1]? OJson [$1]: '';}}}, // according to the specified format, as shown in <% ...... %> Bind the json data TemplateEngine: function (html, options) {html = html. replace (/(>) | (<)/g, function (str, $1, $2) {switch (str) {case $1: return '> '; case $2: return '<' ;}}); var re =/<% ([^ %>] + )? %>/G, reExp =/(^ ()? (If | for | else | switch | case | break | {| }))(.*)? /G, code = 'var r = []; \ n', cursor = 0; var add = function (line, js) {js? (Code + = line. match (reExp )? Line + '\ N': 'R. push (' + line + '); \ n'): (code + = line! = ''? 'R. push ("'+ line. replace (/"/g, '\"') + '"); \ N':''); return add;} while (match = re.exe c (html )) {add (html. slice (cursor, match. index) (match [1], true); cursor = match. index + match [0]. length;} add (html. substr (cursor, html. length-cursor); code + = 'Return r. join (""); '; return new Function (code. replace (/[\ r \ t \ n]/g ,'')). apply (options );}}

1. Method 1: $ {key}

FunctionUtil. LoadJsonData (element, data );

"Html" code:

  
Name: $ {name}
Age: $ {age}
Occupation: $ {job}

  

Javascript code:

Var data = [{name: 'xu Lei ', age: 24, job: 'it'}, {name: 'lilei', age: 23, job: 'translation'}]; functionUtil. loadJsonData ('data', data );

Execution result:

2. method 2 <% code %>

FunctionUtil. TemplateEngine (string, Object );

"Html" code:

<% If (this. isShow) {for (var I in this. data) {%>
Name: <% this. data [I]. name %>
    
Age: <% this. data [I]. age %>
    
Job: <% this. data [I]. job %>
    
<% }}%>

Javascript code:

Var person = {data: [{name: 'xu Lei ', age: 24, job: 'it'}, {name: 'lilei', age: 23, job: 'translation'}], isShow: true} document. getElementById ("test3 "). innerHTML = functionUtil. templateEngine (document. getElementById ("test3 "). innerHTML, person );

Result:

The above is all the content in this article. After reading this article, do you have a new understanding of the javascript template? I hope you will like it.