|
by zhangxinxu from http://www. 一、小妹妹不要怕，哥哥很溫柔的寫文章之前，我總要去網(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…… 我勒個去，這些亂七八糟的標(biāo)記字符語句什么的只會讓我輩們產(chǎn)生兩種反應(yīng)： 2. 矮油，看上去很高級吧，但是，香奈兒這種高級貨對于我們底層大眾來說過于閃耀，會不小心亮瞎了金鈦狗眼的~~ 結(jié)果還自詡“易學(xué)易用”什么的~~果然，巴神的世界不是我等所能理解的！ 好好的一個帥哥，如果改造的過于夸張，在不深入了解的情況下，會嚇著人家小妹妹的。比方說你丫把自己變成了綠巨人，或是變成爬上摩天樓打飛機(jī)的巨猩猩~~ 因此，所謂HTML模板，如果折騰地過于夸張，在這個賣萌的年代，會嚇著那些做前端的小妹妹的（可能你自個兒對自己的一身肌肉自戀不已）。 我這里也要介紹HTML模板，也是結(jié)合JSON數(shù)據(jù)的，但是呢，小妹妹你不要怕，哥哥我是很溫柔的，很接地氣的。不是“引擎”，穿著簡單質(zhì)樸，長像不夸張；且靈活多變，能解決實(shí)際問題。 二、小妹妹你看過來，哥哥我gangnam style實(shí)際上，去年(2011)年初的時候，我就寫過“js面向數(shù)據(jù)編程(DOP)一點(diǎn)分享”一文，里面就曾提到“HTML模板”的概念，如下對截圖的截圖： 不過，這里所說的“HTML模板”其實(shí)是“偽HTML模板”，怎講？
因此，我們就此忘記它…… 假設(shè)你為了造福廣大宅男，打算建一個可以將豬頭肉批量轉(zhuǎn)換成御姐和萌妹的工廠！ 你需要什么東西呢？ 首先，轉(zhuǎn)換的原料 – 豬頭肉；其次，轉(zhuǎn)換的模板 – 二次元的妹子原型們；最后，就是轉(zhuǎn)換的方法 – 這是機(jī)密！ 對應(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> 方法是固定的，一個基于字符串原型的擴(kuò)展方法： String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};然后，我們就可以根據(jù)實(shí)際具體JSON格式得到我們需要的HTML片段了，例如這里要獲得完整的li標(biāo)簽列表HTML，一個JS數(shù)組循環(huán)就搞定了！ var htmlList = ''
// textarea中的模板HTML
, htmlTemp = $("textarea").value;
JSON.data.forEach(function(object) {
htmlList += htmlTemp.temp(object);
});
// htmlList就是我們需要的HTML代碼啦！
最后一行， 就會顯示類似下面的效果啦！ 關(guān)于HTML模板 上面的快速示例就是使用的 這些名字是與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)控制的，這樣，維護(hù)起來就相當(dāng)?shù)妮p松。后臺只需要關(guān)心數(shù)據(jù)，前端這邊只需要關(guān)心呈現(xiàn)以及交互；后期修改，如添加關(guān)鍵字，或列表樣式變動，無需改動JavaScript文件；只要樣式改動不是很復(fù)雜，前端工程師這邊指頭都不需要動一下，直接后臺工程師加加減減 這里，使用兩個 您可以自己找些稀奇的字符作為特殊標(biāo)示，不過，對應(yīng)的，擴(kuò)展的 關(guān)于JSON數(shù)據(jù) 關(guān)于擴(kuò)展方法temp String.prototype.temp = function() { /* ... */ };方法。 不過自己感覺應(yīng)該有更簡單高效的正則匹配替換，望高人指點(diǎn)?。?！ 在實(shí)際應(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ā)成本和后期維護(hù) – 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ù)非常劃算……因?yàn)椤ㄎ乙膊恢纞~ 平時，那些基本上屬于純展示的列表，偶們就直接HTML repeat出來吧！ 四、小妹妹你不要急，哥哥我就show你看眼見為實(shí)耳聽為虛，嘴巴就算說出老繭，人家也不一定信了你的邪啊~~ 您可以狠狠地點(diǎn)擊這里：HTML模板與JSON下的JS交互demo 下圖為源代碼中部分HTML模板代碼的截圖： 實(shí)際上，上DEMO是HTML模板與面向數(shù)據(jù)編程結(jié)合的demo頁面；數(shù)據(jù)來自互聯(lián)網(wǎng)。 就不多說了，源代碼直接右鍵右面查看就可以了~~ 五、我說小妹妹啊，你就從了哥哥吧~總結(jié)出來，本文內(nèi)容很簡單的： 一個HTML片段；一些JSON數(shù)據(jù)；一個對應(yīng)的字符串匹配替換擴(kuò)展方法；然后一個實(shí)際的JavaScript循環(huán)；最后，直接over! 從頭到尾出現(xiàn)的稀奇的符號也就是一個大家并不覺得稀奇，反而有些喜歡的美元符號 而且，所有內(nèi)容，包括規(guī)則，您都可以根據(jù)您自己的癖好進(jìn)行定制哦，像大叔型的，正太型的都可以的哦~~ 因此，小妹妹啊，如此經(jīng)濟(jì)適用，你還不早早從了哥哥？ 嘛！小姑娘都比較害羞的，不急，您可以先把哥哥我放在一邊。只是希望N月后的某一天，在做某個交互的時候，還能夠想到大明湖畔的那個“模板哥哥”。到時候，您要是心動了，非常歡迎回來找我，哥哥我一定還在這里等你哦！ 誒誒誒，妹子，你不要跑啊~~哥哥大不了不讓你幫我買紅薯…… 然后，就沒有然后了…… 末了，感謝大家的閱讀，希望本文的內(nèi)容能夠?qū)δ膶W(xué)習(xí)有所幫助。行文倉促，見識有限，文章要是有表述不準(zhǔn)確的地方，歡迎指正。 原創(chuàng)文章，轉(zhuǎn)載請注明來自張鑫旭-鑫空間-鑫生活[http://www.] （本篇完） 如果您覺得本文的內(nèi)容對您的學(xué)習(xí)有所幫助： 相關(guān)文章
標(biāo)簽： HTML模板, json, textarea, 交互, 模板, 面向數(shù)據(jù)
|
|
|
→ 
