基于HTML模板和JSON數(shù)據(jù)的JavaScript交互 ? 張鑫旭

風(fēng)之飛雪 2014-03-14

展開全文

by zhangxinxu from http://www.

本文地址：http://www./wordpress/?p=2649

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

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

同樣的，在這個風(fēng)和日麗，陽光明媚的周三上午，我興致勃勃地打開百度，搜索：“JS 模板數(shù)據(jù)”，然后……

百度搜索尼瑪坑爹的結(jié)果張鑫旭-鑫空間-鑫生活

我擦，怎么都是些非原創(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模板”的概念，如下對截圖的截圖：

寫在JavaScript中的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.",
    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;

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

列表出現(xiàn)，數(shù)據(jù)動態(tài)

關(guān)于HTML模板

一般而言，HTML模板都是放在<textarea>標簽中的，據(jù)說這樣只會有一次的DOM渲染；且HTML的換行什么的可以完整保留。<textarea>標簽有個克星——就是其自身，<textarea>標簽無法嵌套<textarea>標簽；因此，含有文本域的HTML片段不能直接放在<textarea>元素中作為模板。

上面的快速示例就是使用的<textarea>標簽作為HTML模板的容器。其中，您會看到N多$$符號夾住的字符片段，這些就是HTML模板中的動態(tài)變量：

雙$$符號夾住的動態(tài)變量關(guān)鍵字張鑫旭-鑫空間-鑫生活

這些名字是與JSON數(shù)據(jù)中每個數(shù)據(jù)對象的關(guān)鍵字對應(yīng)的（不區(qū)分大小寫）：

模板動態(tài)變量和json數(shù)據(jù)中對象關(guān)鍵字是對應(yīng)的張鑫旭-鑫空間-鑫生活

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ū)ο?；可以根?jù)不同的頁面具體的需求做相應(yīng)的數(shù)據(jù)設(shè)計，只要保證temp處理的時候的參數(shù)是純生的Object就可以了！

關(guān)于擴展方法temp

就是上面的

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

方法。

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

在實際應(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出來吧！