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

缺點

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

需求

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

解決方案

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

 

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

1）模版代碼寫在哪里？

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

2）模版的語法

我把jQuery Tmpl的語法分為三大類：

1.顯示類：

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

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

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

頁面效果：

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

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

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

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

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

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

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

3.復(fù)用類

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

模版代碼：

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

模版代碼：

其中在eachTemplate模版中用$data來特指傳進來的遍歷項的值。怎么樣感覺還是相當(dāng)方便的吧^_^。

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

模版代碼：
頁面效果：

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

模版代碼：
頁面效果：

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

模版代碼：
頁面效果：

可以看到strong元素沒有了加粗效果只有文字。

總結(jié)

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

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

最新評論