基于HTML模闆和JSON資料的JavaScript互動

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

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

寫文章之前，我總要去網上搜尋相關資料，避免内容重複，順便學習。

同樣的，在這個風和日麗，陽光明媚的周三上午，我興緻勃勃地打開百度，搜尋：“JS 模闆 資料”，然後……

我擦，怎麼都是些非原創的，低品質的内容~~

谷歌之，立馬長舒一口氣：

這種感覺就像是在廁所憋氣撒尿，完事後沖出廁所終于呼吸到了一口新鮮空氣……

然而，這些文章的内容，大部分都是介紹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……

我勒個去，這些亂七八糟的标記字元語句什麼的隻會讓我輩們産生兩種反應：

1. 哎呀呀，好多字元标記，眼花缭亂，看得我頭暈暈~~

2. 矮油，看上去很進階吧，但是，香奈兒這種進階貨對于我們底層大衆來說過于閃耀，會不小心亮瞎了金钛狗眼的~~

結果還自诩“易學易用”什麼的~~果然，巴神的世界不是我等所能了解的！

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

是以，所謂HTML模闆，如果折騰地過于誇張，在這個賣萌的年代，會吓着那些做前端的小妹妹的（可能你自個兒對自己的一身肌肉自戀不已）。

我這裡也要介紹HTML模闆，也是結合JSON資料的，但是呢，小妹妹你不要怕，哥哥我是很溫柔的，很接地氣的。不是“引擎”，穿着簡單質樸，長像不誇張；且靈活多變，能解決實際問題。

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

實際上，去年(2011)年初的時候，我就寫過“js面向資料程式設計(DOP)一點分享”一文，裡面就曾提到“HTML模闆”的概念，如下對截圖的截圖：

不過，這裡所說的“HTML模闆”其實是“僞HTML模闆”，怎講？

1. HTML結構代碼完全嵌入在JS檔案代碼中（已經不是原汁原味的HTML code了），不利于後期修改維護等
2. JS形式的模闆，通過特定形式拼接字元串，需要一些額外的工作（不能直接ctrl+c, ctrl+v）
3. 模闆的資料應用不具有規律性，無法提煉出通用的模闆處理方法

是以，我們就此忘記它……

假設你為了造福廣大宅男，打算建一個可以将豬頭肉批量轉換成禦姐和萌妹的工廠！

→

你需要什麼東西呢？

首先，轉換的原料 – 豬頭肉；其次，轉換的模闆 – 二次元的妹子原型們；最後，就是轉換的方法 – 這是機密！

對應到本文，原料就是JSON資料，模闆就是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:" target="_blank" rel="external nofollow"  data-id="$couponid$">
        <img src="$imgsrc$" width="240" height="180" />
        <p>$traffic$</p>
        <p>$buynum$人購買</p>
        <div>
            <div><del class="g6 db">¥$cost$現金券</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;
    });
};      

然後，我們就可以根據實際具體JSON格式得到我們需要的HTML片段了，例如這裡要獲得完整的li标簽清單HTML，一個JS數組循環就搞定了！

var htmlList = ''
     // textarea中的模闆HTML
    , htmlTemp = $("textarea").value;

JSON.data.forEach(function(object) {
    htmlList += htmlTemp.temp(object);
});

// htmlList就是我們需要的HTML代碼啦！
      

最後一行，

$("ul").innerHTML = htmlList;

就會顯示類似下面的效果啦！

關于HTML模闆

一般而言，HTML模闆都是放在

<textarea>

标簽中的，據說這樣隻會有一次的DOM渲染；且HTML的換行什麼的可以完整保留。

<textarea>

标簽有個克星——就是其自身，

<textarea>

标簽無法嵌套

<textarea>

标簽；是以，含有文本域的HTML片段不能直接放在

<textarea>

元素中作為模闆。

上面的快速示例就是使用的

<textarea>

标簽作為HTML模闆的容器。其中，您會看到N多

$$

符号夾住的字元片段，這些就是HTML模闆中的動态變量：

這些名字是與JSON資料中每個資料對象的關鍵字對應的（不區分大小寫）：

JSON對象中的關鍵字可以多餘（不被使用，忽略）或缺失（空字元串比對），是以，可以很随意定制。

HTML模闆的動态變量以及JSON資料的關鍵字（上圖高亮的關鍵字）都是背景那邊(php/.net/Java)控制的，這樣，維護起來就相當的輕松。背景隻需要關心資料，前端這邊隻需要關心呈現以及互動；後期修改，如添加關鍵字，或清單樣式變動，無需改動JavaScript檔案；隻要樣式改動不是很複雜，前端工程師這邊指頭都不需要動一下，直接背景工程師加加減減

$key$

就可以了！至少我公司的伺服器端程式員們很喜歡這個~~

這裡，使用兩個

$

作為特殊關鍵字标示，純屬個人愛好，因為我喜歡我的眼睛像下面這樣：

您可以自己找些稀奇的字元作為特殊标示，不過，對應的，擴充的

temp

方法中的正規表達式也要做相應修改。

關于JSON資料

所謂“引擎”，看似功能強大，但是，可定制性較差~~我這裡的JSON資料您幾乎可以随意定制，或數組，或對象；可以根據不同的頁面具體的需求做相應的資料設計，隻要保證

temp

處理的時候的參數是純生的

Object

就可以了！

關于擴充方法temp

就是上面的

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

方法。

不過自己感覺應該有更簡單高效的正則比對替換，望高人指點！！！

在實際應用的時候，隻要在JavaScript代碼中放入這幾行代碼，我們就可以很簡單從容地使用我們的HTML模闆了！

三、小妹妹你唔擔心，哥哥我不是濫情種

我們不能為了技術而技術，是以，HTML模闆呈現技術不是撒泡尿就該使用的。

我個人舉得以下場景适合使用：清單并含有大資料量，多DOM的互動。

原因在于：我們前端這邊，無論是HTML呈現，或呈現後的DOM互動，或資料處理都是針對的同一個JSON資料源。很顯然，這是相當有益的做法：一方面可以大大提高性能 – 資料層的處理顯然要比DOM上的處理高效N倍；二是大大降低的開發成本和後期維護 – DOM互相關聯的複雜互動會死人的（一條資料可能多個DOM使用），但是，資料是唯一的，不存在相關關聯的情況！

我最近折騰了一個ipad頁面，關于現金券的：左右互動是互相關聯的，左右的清單樣式又不一樣，左右均有滾動無限加載（需同時），但是，顯示的資料字段都是一緻的（雖有不同，但前面說過，資料源可多可少可定制，是以無礙），是以，這個頁面顯然使用HTML模闆技術非常劃算……因為……（我也不知道~~

）

平時，那些基本上屬于純展示的清單，偶們就直接HTML repeat出來吧！

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

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

您可以狠狠地點選這裡：HTML模闆與JSON下的JS互動demo

下圖為源代碼中部分HTML模闆代碼的截圖：

實際上，上DEMO是HTML模闆與面向資料程式設計結合的demo頁面；資料來自網際網路。

就不多說了，源代碼直接右鍵右面檢視就可以了~~

五、我說小妹妹啊，你就從了哥哥吧~

總結出來，本文内容很簡單的：

一個HTML片段；一些JSON資料；一個對應的字元串比對替換擴充方法；然後一個實際的JavaScript循環；最後，直接over!

從頭到尾出現的稀奇的符号也就是一個大家并不覺得稀奇，反而有些喜歡的美元符号

$

, HTML代碼就是我們平常所見的HTML代碼，JavaScript代碼也是我們平常所見的JavaScript代碼。很質樸，很簡單，但是，關鍵時候能很好簡化我們的開發。

而且，所有内容，包括規則，您都可以根據您自己的癖好進行定制哦，像大叔型的，正太型的都可以的哦~~

是以，小妹妹啊，如此經濟适用，你還不早早從了哥哥？

嘛！小姑娘都比較害羞的，不急，您可以先把哥哥我放在一邊。隻是希望N月後的某一天，在做某個互動的時候，還能夠想到大明湖畔的那個“模闆哥哥”。到時候，您要是心動了，非常歡迎回來找我，哥哥我一定還在這裡等你哦！

等你哦！

等你！

…

..

.

.

.

等你過來幫我買蕃薯~~

诶诶诶，妹子，你不要跑啊~~哥哥大不了不讓你幫我買蕃薯……

.

.

.

.

.

幫我買包蚯蚓釣魚用吧~~

然後，就沒有然後了……

末了，感謝大家的閱讀，希望本文的内容能夠對您的學習有所幫助。行文倉促，見識有限，文章要是有表述不準确的地方，歡迎指正。