放弃用你的InnerHTML来输出HTML吧，jQuery Tmpl不详细讲解

ゝ一世哀愁。 2022-09-20 15:19 23阅读 0赞

转：http://www.cnblogs.com/coffeedeveloper/archive/2012/07/25/2609204.html

在Ajax横道的今天，我们在页面交互上有了更高的要求，动态生成HTML毫无疑问是其中的一种。动态生成HTML的方式多种多样，其核心不外乎在前段（JS）或者后端（C\#/PHP…）将数据组装成我们想要的模版，最终通过一定的方法输出给用户（innerHTML、documentWrite等方式）。

### 缺点 ###

1）拼接字符串的过程容易出错，常常忘了'/”>等匹配的符号。

2）修改前台模版的同时容易遗忘同步更改动态生成的模版。

3）拼接字符串不直观和美观，不利于查找错误，例如：数据中如果存在HTML内容，会导致种种麻烦。

4）不能满足较高的业务逻辑需求，处理判断较为麻烦，例如：当A情况生成X模版，B情况生成Y模版。

5）复用性低，较为相似的模版难以公用。

### 需求 ###

1）简单，直观的模版

2）易于维护（方便查找错误，有代码着色等）

3）模版的可复用性

4）处理一定的逻辑判断

### 解决方案 ###

基于以上的缺点，jQuery Tmpl这个插件能够很好的满足了我们的需求。使用这种新型的模版技术仅仅需要引入jQuery Tmpl这个插件而已。该插件十分小巧（5.97KB），对于性能的影响并不大。而且据闻这个插件是Microsoft开发的，对于ASP.NET MVC的友好度是大大的。[点击这里进去项目地址][Link 1]

### 实现原理 ###

![SouthEast][]

通过图片我们能够很直观的看到Tmpl的工作原理，我们仅仅需要提供数据和模版。数据我们能够通过后台的Json方法直接传到前台，而模版则是接下来要讲的东西了。

##### 1）模版代码写在哪里？ #####

我们可以看到其实模版代码的容器就是我们的<script>标签，不过type类型是'text/x-jquery-tmpl'而不是我们平常用的'text/javascript'而已，type类型难记？没关系，在Visual Studio2012中已经有了这个类型的智能提示了（没有验证过2010）。

##### 2）模版的语法 #####

我把jQuery Tmpl的语法分为三大类：

###### 1.显示类： ######

\{ \{html \}\} / \{ \{= \}\} / $\{ \}，这三个标签都能够将数据输出到模版中，但是\{ \{html\}\}不会对数据进行编码，用于输出数据中的HTML代码段的，而\{ \{=\}\}和$\{\}则会对数据进行编码，防止数据对于模版结构的破坏。

![SouthEast 1][]  
当我们把data里面的name的值换成一段HTML'<a href="http://www.google.com">点击有好玩的东西哟！</a>'就可以看到\{ \{html \}\} / \{ \{= \}\} / $\{ \}的区别了。

![SouthEast 2][]

由此我们可以见得使用\{ \{html\}\}来输出模版里面的内容是带有一定的风险的（[XSS攻击][XSS]），所以在非确定数据的安全性下最好还是使用$\{\}来输出内容既简单又简洁。当然直接输出内容远远不能满足我们的要求，如果能够调用函数来处理一下输出结果就更棒啦！

![SouthEast 3][]

###### 2.条件判断及循环： ######

\{ \{if\}\} / \{ \{else\}\} / \{ \{/if\}\} / \{ \{each\}\} 请注意是没有for / while / switch的，相对于来说jQuery Tmpl只支持较为简单的逻辑判断，当然如果你感觉这些满足不了你的需求的话，可以自己写函数然后再调用。给一个简单的例子来说明一下：

![SouthEast 4][]

在代码中我们可以注意到\{ \{each\}\}是有两种写法的，如果不在each后面加(i, v)时在\{ \{each\}\}代码块中使用$value特指当前项的值，而你需要项的序号则可以使用\{ \{each(i, v) \}\}其中i代表当前项的次序、v代表当前项的值。如果你的条件判断比较复杂则可以使用函数来判断（完全和JS一样）

![SouthEast 5][]

###### 3.复用类 ######

\{ \{temp\}\}  当分支模版过长（写在一个模版中较为混乱）或者使用已经写好的通用模版，\{ \{temp\}\}的作用就是调用指定ID模版来显示数据。

![SouthEast 6][]

这个模版的最终效果和之前的完全一样，不过分别区分独立开来。提高了代码的可阅读性和复用性。在这里只是一次性调用其他模版，如果想循环调用呢？例如在例子当中输出兴趣爱好那样。让我们来看看代码应该如何写。

![SouthEast 7][]

其中在eachTemplate模版中用$data来特指传进来的遍历项的值。怎么样感觉还是相当方便的吧^\_^。

\{ \{wrap\}\}使用于指定模版来包含当前模版，类似于指定母版页当前模版则属于子页面。

![SouthEast 8][]

我们可以看出'wrapTemplate'的功效就是作为公共部分，在模版中用\{ \{html $item.html\}\}来输出子页面的HTML内容。   
其中$item.html还具备一定的筛选功能。

![SouthEast 9][]

可以看到在这里只输出了第二个P。$item.html方法还有一个选项$item.html( filter, textOnly )，textOnly为bool值如果为true则只会输出元素的文字而忽略它原有的元素标签。

![SouthEast 10][]

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

### 总结 ###

其实在使用过程当中并不会经常运用到模版的一些高级功能，本文章也仅仅是介绍了一些关于jQuery Tmpl的基础性的东西。使用这个插件能够给我们带来的好处实在不少，之前我在动态输出HTML代码段的时候（在JS文件中拼接字符串）经常修改了前台页面而忘记修改JS中的拼接字符串，导致经常出些莫名其妙的错误，而且在多个分支判断下拼接字符串的劣处体现的更加明显，现在的话我会把Tmpl模版的代码就放在前台页面要生成代码的地方，这样就大大减少了错误的发生啦！

[Link 1]: https://github.com/jquery/jquery-tmpl
[SouthEast]: /images/20220823/633a7d4ae1004ab7865a4a2cf9fe1e7a.png
[SouthEast 1]: /images/20220823/1a763a0195734b92882ee0ed8a0470af.png
[SouthEast 2]: /images/20220823/1a09a6d0b7e94823b30819ad733088bb.png
[XSS]: http://zh.wikipedia.org/wiki/XSS
[SouthEast 3]: /images/20220823/1433f29772ff4227975ec6cb3271246f.png
[SouthEast 4]: /images/20220823/05ed4a1c094943c68601fc80efda50de.png
[SouthEast 5]: /images/20220823/94da0f7c838d4b69adc2ff8793b36394.png
[SouthEast 6]: /images/20220823/b0b3f40444754b0ba9a58d72b4cd514f.png
[SouthEast 7]: /images/20220823/477b7fbf552543bca0e439886be00c6d.png
[SouthEast 8]: /images/20220823/29125954cec84624a5f06afff98aadd6.png
[SouthEast 9]: /images/20220823/3ff45063e49e4472b4f098e962b88167.png
[SouthEast 10]: /images/20220823/51e840c8aaf44c9693bd288a77474534.png