by?zhangxinxu?from?http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2649

一、小妹妹不要怕，哥哥很溫柔的

寫文章之前，我總要去網(wǎng)上搜索相關(guān)資料，避免內(nèi)容重復(fù)，順便學(xué)習(xí)。

同樣的，在這個風(fēng)和日麗，陽光明媚的周三上午，我興致勃勃地打開百度，搜索：“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é)果還自詡“易學(xué)易用”什么的~~果然，巴神的世界不是我等所能理解的！

好好的一個帥哥，如果改造的過于夸張，在不深入了解的情況下，會嚇著人家小妹妹的。比方說你丫把自己變成了綠巨人，或是變成爬上摩天樓打飛機的巨猩猩~~

因此，所謂HTML模板，如果折騰地過于夸張，在這個賣萌的年代，會嚇著那些做前端的小妹妹的（可能你自個兒對自己的一身肌肉自戀不已）。

我這里也要介紹HTML模板，也是結(jié)合JSON數(shù)據(jù)的，但是呢，小妹妹你不要怕，哥哥我是很溫柔的，很接地氣的。不是“引擎”，穿著簡單質(zhì)樸，長像不夸張；且靈活多變，能解決實際問題。

二、小妹妹你看過來，哥哥我gangnam style

實際上，去年(2011)年初的時候，我就寫過“js面向數(shù)據(jù)編程(DOP)一點分享”一文，里面就曾提到“HTML模板”的概念，如下對截圖的截圖：

不過，這里所說的“HTML模板”其實是“偽HTML模板”，怎講？

HTML結(jié)構(gòu)代碼完全嵌入在JS文件代碼中（已經(jīng)不是原汁原味的HTML code了），不利于后期修改維護等

JS形式的模板，通過特定形式拼接字符串，需要一些額外的工作（不能直接ctrl+c, ctrl+v）

模板的數(shù)據(jù)應(yīng)用不具有規(guī)律性，無法提煉出通用的模板處理方法

因此，我們就此忘記它……

假設(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)控制的，這樣，維護起來就相當(dāng)?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ū)ο?#xff1b;可以根據(jù)不同的頁面具體的需求做相應(yīng)的數(shù)據(jù)設(shè)計，只要保證temp處理的時候的參數(shù)是純生的Object就可以了！

關(guān)于擴展方法temp
就是上面的

String.prototype.temp = function() { /* ... */ };

方法。

不過自己感覺應(yīng)該有更簡單高效的正則匹配替換，望高人指點！！！

在實際應(yīng)用的時候，只要在JavaScript代碼中放入這幾行代碼，我們就可以很簡單從容地使用我們的HTML模板了！

三、小妹妹你唔擔(dān)心，哥哥我不是濫情種

我們不能為了技術(shù)而技術(shù)，因此，HTML模板呈現(xiàn)技術(shù)不是撒泡尿就該使用的。

我個人舉得以下場景適合使用：列表并含有大數(shù)據(jù)量，多DOM的交互。

原因在于：我們前端這邊，無論是HTML呈現(xiàn)，或呈現(xiàn)后的DOM交互，或數(shù)據(jù)處理都是針對的同一個JSON數(shù)據(jù)源。很顯然，這是相當(dāng)有益的做法：一方面可以大大提高性能 – 數(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出來吧！

四、小妹妹你不要急，哥哥我就show你看

眼見為實耳聽為虛，嘴巴就算說出老繭，人家也不一定信了你的邪啊~~

您可以狠狠地點擊這里：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(xué)習(xí)有所幫助。行文倉促，見識有限，文章要是有表述不準確的地方，歡迎指正。

原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2649

總結(jié)

以上是生活随笔為你收集整理的基于HTML模板和JSON数据的JavaScript交互的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。