最近工作上有個項目遇到一個問題，就是頁面的內容都是從后台給的接口中讀取的，在js代碼中就將html代碼與讀取的內容拼接，然后插到html中，如下：
這種方法也常見，但架不住多呀，頁面上所有的內容都是這樣的話，那js里面的html代碼就不是一般的多了，不僅破壞了頁面邏輯，也不方便維護。那么這么多的內容需要填充到頁面中，用什么辦法呢，對，完全可以學習后台的程序那樣，例如：{{voild.filed1}} ,{vo:field.body/},{$v[title]}等等多種形式的，無一不是“模版”，那么我們也可以用js來完成這樣的實現。
從網上搜索代碼，不是看不懂，就是需要引入一個模版的js，難道就沒有我想要的，既簡單又能看的懂，拿過來就能用的，那么答案是肯定的。
先看看某些人的代碼：
1 String.prototype.temp = function(obj) { 2 return this.replace(/\$\w+\$/gi, function(matchs) { 3 var returns = obj[matchs.replace(/\$/g, "")]; 4 return (returns + "") == "undefined" ? "" : returns; 5 }); 6 }
原來是把html內需要添加字段的地方用特殊的符號（$）包起來，然后對應json數據中對應的屬性，取其值，然后拼接字符串，再插入到頁面中。大概就這樣了，可是現在需求變了，需要取json數據中某一屬性值的屬性值，也是就是取某一屬性的子集，那么上述的方法就不夠用了，只有再改變。
1 String.prototype.temp = function(reg, obj) { 2 return this.replace(reg, function(matchs) { 3 var returns = '', 4 getStr = matchs.replace(/\$/g, ""), 5 subArr = getStr.split('.'); 6 len = subArr.length; 7 if(len == 1){ 8 returns = obj[getStr]; 9 }else if(len > 1){ 10 returns = obj[subArr[0]]; 11 for(var i=1; i<len; i++){ 12 returns = returns[subArr[i]]; 13 } 14 } 15 return (returns + "") == "undefined"? "": returns; 16 }); 17 };
例子中是用$（$name$）把屬性名包起來，這個可以根據個人愛好，我就是喜歡錢，尤其是美元的，哈哈，所以就用$，也可以用別的符號，但注意在代碼中修改相應內容。
同樣，如果還有下一子集的需求，同樣也可以通過修改代碼，比如修改正則，修改判斷截取字符長短的代碼。
在上述代碼中根據正則的判斷，可以查詢多級的子集，但一般用到的也就1-2層。
哇，終於完成了，不着急，最后需要加入調用方法，並將返回值插入到頁面中，才算大功告成，不羅嗦了，直接代碼貼之。。。
1 domRander = function(tpl, ele, reg){ //tpl是調用的模版，ele是需要插入代碼的地方，reg當然是正則了 2 var showTpl = tpl.html(), 3 showHtml = ''; 4 for(var i=0,len = JSON.length,jsonList=null; i<len; i++){ 5 jsonList = JSON[i] || {}; 6 showHtml += showTpl.temp(reg, jsonList); 7 } 8 $('tbody',ele).html(showHtml); 9 };
這次總算是完成了，歡迎拍磚，如果需要查看實例代碼，那就來這里下載吧 demo地址：https://github.com/wyh909/js-workdemo/tree/js-demo/html-tpl-js