在Ajax橫道的今天，我們?cè)陧?yè)面交互上有了更高的要求，動(dòng)態(tài)生成HTML毫無(wú)疑問(wèn)是其中的一種。動(dòng)態(tài)生成HTML的方式多種多樣，其核心不外乎在前段（JS）或者后端（C#/PHP…）將數(shù)據(jù)組裝成我們想要的模版，最終通過(guò)一定的方法輸出給用戶（innerHTML、documentWrite等方式）。

缺點(diǎn)

1）拼接字符串的過(guò)程容易出錯(cuò)，常常忘了'/”>等匹配的符號(hào)。
2）修改前臺(tái)模版的同時(shí)容易遺忘同步更改動(dòng)態(tài)生成的模版。
3）拼接字符串不直觀和美觀，不利于查找錯(cuò)誤，例如：數(shù)據(jù)中如果存在HTML內(nèi)容，會(huì)導(dǎo)致種種麻煩。
4）不能滿足較高的業(yè)務(wù)邏輯需求，處理判斷較為麻煩，例如：當(dāng)A情況生成X模版，B情況生成Y模版。
5）復(fù)用性低，較為相似的模版難以公用。

需求

1）簡(jiǎn)單，直觀的模版
2）易于維護(hù)（方便查找錯(cuò)誤，有代碼著色等）
3）模版的可復(fù)用性
4）處理一定的邏輯判斷

解決方案

基于以上的缺點(diǎn)，jQuery Tmpl這個(gè)插件能夠很好的滿足了我們的需求。使用這種新型的模版技術(shù)僅僅需要引入jQuery Tmpl這個(gè)插件而已。該插件十分小巧（5.97KB），對(duì)于性能的影響并不大。而且據(jù)聞這個(gè)插件是Microsoft開(kāi)發(fā)的，對(duì)于ASP.NET MVC的友好度是大大的。 點(diǎn)擊這里進(jìn)去項(xiàng)目地址

 

通過(guò)圖片我們能夠很直觀的看到Tmpl的工作原理，我們僅僅需要提供數(shù)據(jù)和模版。數(shù)據(jù)我們能夠通過(guò)后臺(tái)的Json方法直接傳到前臺(tái)，而模版則是接下來(lái)要講的東西了。

1）模版代碼寫在哪里？

我們可以看到其實(shí)模版代碼的容器就是我們的<script>標(biāo)簽，不過(guò)type類型是'text/x-jquery-tmpl'而不是我們平常用的'text/javascript'而已，type類型難記？沒(méi)關(guān)系，在Visual Studio2012中已經(jīng)有了這個(gè)類型的智能提示了（沒(méi)有驗(yàn)證過(guò)2010）。

2）模版的語(yǔ)法

我把jQuery Tmpl的語(yǔ)法分為三大類：

1.顯示類：

{{html }} / {{= }} / ${ }，這三個(gè)標(biāo)簽都能夠?qū)?shù)據(jù)輸出到模版中，但是{{html}}不會(huì)對(duì)數(shù)據(jù)進(jìn)行編碼，用于輸出數(shù)據(jù)中的HTML代碼段的，而{{=}}和${}則會(huì)對(duì)數(shù)據(jù)進(jìn)行編碼，防止數(shù)據(jù)對(duì)于模版結(jié)構(gòu)的破壞。

模版代碼：
數(shù)據(jù)及JS代碼：
頁(yè)面效果：

當(dāng)我們把data里面的name的值換成一段HTML'<a 就可以看到{{html }} / {{= }} / ${ }的區(qū)別了。

頁(yè)面效果：

由此我們可以見(jiàn)得使用{{html}}來(lái)輸出模版里面的內(nèi)容是帶有一定的風(fēng)險(xiǎn)的（XSS攻擊），所以在非確定數(shù)據(jù)的安全性下最好還是使用${}來(lái)輸出內(nèi)容既簡(jiǎn)單又簡(jiǎn)潔。當(dāng)然直接輸出內(nèi)容遠(yuǎn)遠(yuǎn)不能滿足我們的要求，如果能夠調(diào)用函數(shù)來(lái)處理一下輸出結(jié)果就更棒啦！

模版代碼：
函數(shù)代碼：
頁(yè)面效果：

2.條件判斷及循環(huán)：

{{if}} / {{else}} / {{/if}} / {{each}} 請(qǐng)注意是沒(méi)有for / while / switch的，相對(duì)于來(lái)說(shuō)jQuery Tmpl只支持較為簡(jiǎn)單的邏輯判斷，當(dāng)然如果你感覺(jué)這些滿足不了你的需求的話，可以自己寫函數(shù)然后再調(diào)用。給一個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明一下：

模版代碼：
數(shù)據(jù)及JS代碼：
頁(yè)面輸出：

在代碼中我們可以注意到{{each}}是有兩種寫法的，如果不在each后面加(i, v)時(shí)在{{each}}代碼塊中使用$value特指當(dāng)前項(xiàng)的值，而你需要項(xiàng)的序號(hào)則可以使用{{each(i, v) }}其中i代表當(dāng)前項(xiàng)的次序、v代表當(dāng)前項(xiàng)的值。如果你的條件判斷比較復(fù)雜則可以使用函數(shù)來(lái)判斷（完全和JS一樣）

例如：效果是和上面的完全一樣。

3.復(fù)用類

{{temp}}  當(dāng)分支模版過(guò)長(zhǎng)（寫在一個(gè)模版中較為混亂）或者使用已經(jīng)寫好的通用模版，{{temp}}的作用就是調(diào)用指定ID模版來(lái)顯示數(shù)據(jù)。

模版代碼：

這個(gè)模版的最終效果和之前的完全一樣，不過(guò)分別區(qū)分獨(dú)立開(kāi)來(lái)。提高了代碼的可閱讀性和復(fù)用性。在這里只是一次性調(diào)用其他模版，如果想循環(huán)調(diào)用呢？例如在例子當(dāng)中輸出興趣愛(ài)好那樣。讓我們來(lái)看看代碼應(yīng)該如何寫。

模版代碼：

其中在eachTemplate模版中用$data來(lái)特指?jìng)鬟M(jìn)來(lái)的遍歷項(xiàng)的值。怎么樣感覺(jué)還是相當(dāng)方便的吧^_^。

{{wrap}}使用于指定模版來(lái)包含當(dāng)前模版，類似于指定母版頁(yè)當(dāng)前模版則屬于子頁(yè)面。

模版代碼：
頁(yè)面效果：

我們可以看出'wrapTemplate'的功效就是作為公共部分，在模版中用{{html $item.html}}來(lái)輸出子頁(yè)面的HTML內(nèi)容。
其中$item.html還具備一定的篩選功能。

模版代碼：
頁(yè)面效果：

可以看到在這里只輸出了第二個(gè)P。$item.html方法還有一個(gè)選項(xiàng)$item.html( filter, textOnly )，textOnly為bool值如果為true則只會(huì)輸出元素的文字而忽略它原有的元素標(biāo)簽。

模版代碼：
頁(yè)面效果：

可以看到strong元素沒(méi)有了加粗效果只有文字。

總結(jié)

其實(shí)在使用過(guò)程當(dāng)中并不會(huì)經(jīng)常運(yùn)用到模版的一些高級(jí)功能，本文章也僅僅是介紹了一些關(guān)于jQuery Tmpl的基礎(chǔ)性的東西。使用這個(gè)插件能夠給我們帶來(lái)的好處實(shí)在不少，之前我在動(dòng)態(tài)輸出HTML代碼段的時(shí)候（在JS文件中拼接字符串）經(jīng)常修改了前臺(tái)頁(yè)面而忘記修改JS中的拼接字符串，導(dǎo)致經(jīng)常出些莫名其妙的錯(cuò)誤，而且在多個(gè)分支判斷下拼接字符串的劣處體現(xiàn)的更加明顯，現(xiàn)在的話我會(huì)把Tmpl模版的代碼就放在前臺(tái)頁(yè)面要生成代碼的地方，這樣就大大減少了錯(cuò)誤的發(fā)生啦！

以上的內(nèi)容并沒(méi)有涉及到與ASP.NET的交互，以及更多的一些高級(jí)應(yīng)用技巧，如果大家反映良好就會(huì)專門寫一篇結(jié)合ASP.NET MVC的應(yīng)用文章啦~^_^

最新評(píng)論