javascript——浅谈javascript模版（自定义）

 /**
  * Created by Administrator on 15-1-19.
  */
 function functionUtil() {

 }

 functionUtil = {
     //某个DOM节点是否有某个属性
     hasAttr: function (el, name) {
         var attr = el.getAttributeNode && el.getAttributeNode(name);
         return attr ? attr.specified : false
     },
     //根据class获取元素
     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;
     },
     //动态添加样式表
     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);
     },
     //根据指定格式如 ${name} 绑定json数据
     LoadJsonData: function (sParent, oJson) {
         var oParent = document.getElementById(sParent);
         if (oJson 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] : '';
             });
         }
     },
     //根据指定格式如<%……%>绑定json数据
     TemplateEngine: function (html, options) {
         html = html.replace(/(&gt;)|(&lt;)/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.exec(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、第一种方式:${key}

functionUtil.LoadJsonData(element, data);

”html“代码：

 <div id="data">
     <div class="item">
         姓名：${name}<br/>
         年龄：${age}<br/>
         职业：${job}<br/><br/>
     </div>
 </div>

javascript代码:

 var data = [
            {
                     name: '徐磊',
                     age: 24,
                     job: 'IT'
                 },
                 {
                     name: '李磊',
                     age: 23,
                     job: '翻译'
                 }
     ];

 functionUtil.LoadJsonData('data', data);    

执行结果:

aaarticlea/png;base64,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" alt="" />

2、第二种方式<% 代码 %>

functionUtil.TemplateEngine(string,Object);

"html"代码：

 <div id="test3">
     <%if(this.isShow){
       for(var i in this.data){%>
         <p href="#">姓名：<%this.data[i].name%></p>

         <p href="#">年龄：<%this.data[i].age%></p>

         <p href="#">工作：<%this.data[i].job%></p>
         <br/>
     <%}}%>
 </div>

javascript代码：

 var person = {
                 data: [
                     {
                         name: '徐磊',
                         age: 24,
                         job: 'IT'
                     },
                     {
                         name: '李磊',
                         age: 23,
                         job: '翻译'
                     }
                 ],
                 isShow: true
             }

    document.getElementById("test3").innerHTML = functionUtil.TemplateEngine(document.getElementById("test3").innerHTML, person);

结果：

aaarticlea/png;base64,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" alt="" />