by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2649
寫文章之前，我總要去網(wǎng)上搜索相關(guān)資料，避免內(nèi)容重復(fù)，順便學習。
同樣的，在這個風和日麗，陽光明媚的周三上午，我興致勃勃地打開百度，搜索：“JS 模板 數(shù)據(jù)”，然后……
我擦，怎么都是些非原創(chuàng)的，低質(zhì)量的內(nèi)容~~
谷歌之，立馬長舒一口氣：
這種感覺就像是在廁所憋氣撒尿，完事后沖出廁所終于呼吸到了一口新鮮空氣……
然而，這些文章的內(nèi)容，大部分都是介紹JS模板引擎的，而且看上去都是很高級的樣子，它們或長成這個樣子：
或長成這個樣子（Yaya Template模板引擎）：
for(var i=0;i<list.length;i++){ {$ <li>這是第 {% i %} 列：{% list[i] %}</li> $}}var list = [“紅桃”,”方塊”,”梅花”,”黑桃”];var html = YayaTemplate(templateText).render({list:list});還有類似的，這個樣子的（EasyTemplate前端模板 – 作者杜歡?）：
<#list data as list> <li>這里是第${list_index} 列：${list}</li></#list>var list = [“紅桃”,”方塊”,”梅花”,”黑桃”];var html = easyTemplate.render(templateText,list); //templateText指模板語言還有其他N多jquery template、 ace template、lite template……
我勒個去，這些亂七八糟的標記字符語句什么的只會讓我輩們產(chǎn)生兩種反應(yīng)：
1. 哎呀呀，好多字符標記，眼花繚亂，看得我頭暈暈~~
2. 矮油，看上去很高級吧，但是，香奈兒這種高級貨對于我們底層大眾來說過于閃耀，會不小心亮瞎了金鈦狗眼的~~
結(jié)果還自詡“易學易用”什么的~~果然，巴神的世界不是我等所能理解的！
好好的一個帥哥，如果改造的過于夸張，在不深入了解的情況下，會嚇著人家小妹妹的。比方說你丫把自己變成了綠巨人，或是變成爬上摩天樓打飛機的巨猩猩~~
因此，所謂HTML模板，如果折騰地過于夸張，在這個賣萌的年代，會嚇著那些做前端的小妹妹的（可能你自個兒對自己的一身肌肉自戀不已）。
我這里也要介紹HTML模板，也是結(jié)合JSON數(shù)據(jù)的，但是呢，小妹妹你不要怕，哥哥我是很溫柔的，很接地氣的。不是“引擎”，穿著簡單質(zhì)樸，長像不夸張；且靈活多變，能解決實際問題。
實際上，去年(2011)年初的時候，我就寫過“js面向數(shù)據(jù)編程(DOP)一點分享”一文，里面就曾提到“HTML模板”的概念，如下對截圖的截圖：
不過，這里所說的“HTML模板”其實是“偽HTML模板”，怎講？
因此，我們就此忘記它……
假設(shè)你為了造福廣大宅男，打算建一個可以將豬頭肉批量轉(zhuǎn)換成御姐和萌妹的工廠！
你需要什么東西呢？
首先，轉(zhuǎn)換的原料 – 豬頭肉；其次，轉(zhuǎn)換的模板 – 二次元的妹子原型們；最后，就是轉(zhuǎn)換的方法 – 這是機密！
對應(yīng)到本文，原料就是JSON數(shù)據(jù)，模板就是HTML模板，方法就是一個簡單的正則匹配。
例如下面這個：
原料：
var JSON = { url: "ajax.php?author=www.zhangxinxu.com", data: [{ couponid: "111", imgsrc: "test1.JPG", resname: "俏江南 仙樂斯廣場", traffic: "肇嘉浜路沿線", buynum: 180, cost: 100, discount: 8.5, price: 85 }, { couponid: "222222", imgsrc: "222222.jpg", resname: "申城五月天", traffic: "靜安寺", buynum: 0, cost: 100, discount: 8.0, price: 80 }, { couponid: "3", imgsrc: "go-baby.jpg", resname: "申城五月天", traffic: "靜安寺", buynum: 0, cost: 100, discount: 8.0, price: 80 }]};模板：
<textarea style="display:none;"><li> <a href="javascript:" data-id="$couponid$"> <img src="$imgsrc$" width="240" height="180" /> <p>$traffic$</p> <p>$buynum$人購買</p> <div> <div><del class="g6 db">￥$cost$現(xiàn)金券</del>$discount$折</div> <strong class="cr price r pr20">￥$price$</strong> </div> <h3>$resname$</h3> </a></li></textarea>
方法是固定的，一個基于字符串原型的擴展方法：
String.prototype.temp = function(obj) { return this.replace(/\$\w+\$/gi, function(matchs) { var returns = obj[matchs.replace(/\$/g, "")]; return (returns + "") == "undefined"? "": returns; });};然后，我們就可以根據(jù)實際具體JSON格式得到我們需要的HTML片段了，例如這里要獲得完整的li標簽列表HTML，一個JS數(shù)組循環(huán)就搞定了！
var htmlList = '' // textarea中的模板HTML , htmlTemp = $("textarea").value;JSON.data.forEach(function(object) { htmlList += htmlTemp.temp(object);});// htmlList就是我們需要的HTML代碼啦！
最后一行，$("ul").innerHTML = htmlList;
就會顯示類似下面的效果啦！
關(guān)于HTML模板
一般而言，HTML模板都是放在<textarea>標簽中的，據(jù)說這樣只會有一次的DOM渲染；且HTML的換行什么的可以完整保留。<textarea>標簽有個克星——就是其自身，<textarea>標簽無法嵌套<textarea>標簽；因此，含有文本域的HTML片段不能直接放在<textarea>元素中作為模板。
上面的快速示例就是使用的<textarea>標簽作為HTML模板的容器。其中，您會看到N多$$符號夾住的字符片段，這些就是HTML模板中的動態(tài)變量：
這些名字是與JSON數(shù)據(jù)中每個數(shù)據(jù)對象的關(guān)鍵字對應(yīng)的（不區(qū)分大小寫）：
JSON對象中的關(guān)鍵字可以多余（不被使用，忽略）或缺失（空字符串匹配），因此，可以很隨意定制。
HTML模板的動態(tài)變量以及JSON數(shù)據(jù)的關(guān)鍵字（上圖高亮的關(guān)鍵字）都是后臺那邊(php/.net/Java)控制的，這樣，維護起來就相當?shù)妮p松。后臺只需要關(guān)心數(shù)據(jù)，前端這邊只需要關(guān)心呈現(xiàn)以及交互；后期修改，如添加關(guān)鍵字，或列表樣式變動，無需改動JavaScript文件；只要樣式改動不是很復(fù)雜，前端工程師這邊指頭都不需要動一下，直接后臺工程師加加減減$key$就可以了！至少我公司的服務(wù)器端程序員們很喜歡這個~~
這里，使用兩個$作為特殊關(guān)鍵字標示，純屬個人愛好，因為我喜歡我的眼睛像下面這樣：
您可以自己找些稀奇的字符作為特殊標示，不過，對應(yīng)的，擴展的temp方法中的正則表達式也要做相應(yīng)修改。
關(guān)于JSON數(shù)據(jù)
所謂“引擎”，看似功能強大，但是，可定制性較差~~我這里的JSON數(shù)據(jù)您幾乎可以隨意定制，或數(shù)組，或?qū)ο?；可以根?jù)不同的頁面具體的需求做相應(yīng)的數(shù)據(jù)設(shè)計，只要保證temp處理的時候的參數(shù)是純生的Object就可以了！
關(guān)于擴展方法temp
就是上面的
String.prototype.temp = function() { /* ... */ };方法。
不過自己感覺應(yīng)該有更簡單高效的正則匹配替換，望高人指點！?。?/p>
在實際應(yīng)用的時候，只要在JavaScript代碼中放入這幾行代碼，我們就可以很簡單從容地使用我們的HTML模板了！
我們不能為了技術(shù)而技術(shù)，因此，HTML模板呈現(xiàn)技術(shù)不是撒泡尿就該使用的。
我個人舉得以下場景適合使用：列表并含有大數(shù)據(jù)量，多DOM的交互。
原因在于：我們前端這邊，無論是HTML呈現(xiàn)，或呈現(xiàn)后的DOM交互，或數(shù)據(jù)處理都是針對的同一個JSON數(shù)據(jù)源。很顯然，這是相當有益的做法：一方面可以大大提高性能 – 數(shù)據(jù)層的處理顯然要比DOM上的處理高效N倍；二是大大降低的開發(fā)成本和后期維護 – DOM相互關(guān)聯(lián)的復(fù)雜交互會死人的（一條數(shù)據(jù)可能多個DOM使用），但是，數(shù)據(jù)是唯一的，不存在相關(guān)關(guān)聯(lián)的情況！
我最近折騰了一個ipad頁面，關(guān)于現(xiàn)金券的：左右交互是相互關(guān)聯(lián)的，左右的列表樣式又不一樣，左右均有滾動無限加載（需同時），但是，顯示的數(shù)據(jù)字段都是一致的（雖有不同，但前面說過，數(shù)據(jù)源可多可少可定制，因此無礙），因此，這個頁面顯然使用HTML模板技術(shù)非常劃算……因為……（我也不知道~~
平時，那些基本上屬于純展示的列表，偶們就直接HTML repeat出來吧！
眼見為實耳聽為虛，嘴巴就算說出老繭，人家也不一定信了你的邪啊~~
您可以狠狠地點擊這里：HTML模板與JSON下的JS交互demo
下圖為源代碼中部分HTML模板代碼的截圖：
實際上，上DEMO是HTML模板與面向數(shù)據(jù)編程結(jié)合的demo頁面；數(shù)據(jù)來自互聯(lián)網(wǎng)。
就不多說了，源代碼直接右鍵右面查看就可以了~~
總結(jié)出來，本文內(nèi)容很簡單的：
一個HTML片段；一些JSON數(shù)據(jù)；一個對應(yīng)的字符串匹配替換擴展方法；然后一個實際的JavaScript循環(huán)；最后，直接over!
從頭到尾出現(xiàn)的稀奇的符號也就是一個大家并不覺得稀奇，反而有些喜歡的美元符號$, HTML代碼就是我們平常所見的HTML代碼，JavaScript代碼也是我們平常所見的JavaScript代碼。很質(zhì)樸，很簡單，但是，關(guān)鍵時候能很好簡化我們的開發(fā)。
而且，所有內(nèi)容，包括規(guī)則，您都可以根據(jù)您自己的癖好進行定制哦，像大叔型的，正太型的都可以的哦~~
因此，小妹妹啊，如此經(jīng)濟適用，你還不早早從了哥哥？
嘛！小姑娘都比較害羞的，不急，您可以先把哥哥我放在一邊。只是希望N月后的某一天，在做某個交互的時候，還能夠想到大明湖畔的那個“模板哥哥”。到時候，您要是心動了，非常歡迎回來找我，哥哥我一定還在這里等你哦！
等你哦！
等你！
…
..
.
.
.
等你過來幫我買紅薯~~
誒誒誒，妹子，你不要跑啊~~哥哥大不了不讓你幫我買紅薯……
.
.
.
.
.
幫我買包蚯蚓釣魚用吧~~
然后，就沒有然后了……
末了，感謝大家的閱讀，希望本文的內(nèi)容能夠?qū)δ膶W習有所幫助。行文倉促，見識有限，文章要是有表述不準確的地方，歡迎指正。
原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2649
（本篇完）
如果您覺得本文的內(nèi)容對您的學習有所幫助：
標簽： HTML模板, json, textarea, 交互, 模板, 面向數(shù)據(jù)
這篇文章發(fā)布于 2012年09月28日，星期五，00:34，歸類于 js實例。 閱讀 19556 次, 今日 46 次
