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


Posted in Javascript onApril 20, 2013

在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的友好度是大大的。 点击这里进去项目地址

 

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

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

1)模版代码写在哪里?

<script type="text/x-jquery-tmpl" id="testTemplate">
    /*模版代码*/
</script>

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

2)模版的语法

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

1.显示类:

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

模版代码:
数据及JS代码:
页面效果:

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

页面效果:

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

模版代码:
函数代码:
页面效果:
2.条件判断及循环:

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

模版代码:
数据及JS代码:
页面输出:

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

例如:放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解效果是和上面的完全一样。

3.复用类

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

模版代码:

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

模版代码:

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

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

模版代码:
页面效果:

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

模版代码:
页面效果:

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

模版代码:
页面效果:

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

总结

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

以上的内容并没有涉及到与ASP.NET的交互,以及更多的一些高级应用技巧,如果大家反映良好就会专门写一篇结合ASP.NET MVC的应用文章啦~^_^

Javascript 相关文章推荐
js控制淡入淡出示例代码
Nov 12 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
Dec 16 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
js闭包用法实例详解
Dec 13 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
Javascript继承机制详解
May 30 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 #Javascript
A标签中通过href和onclick传递的this对象实现思路
Apr 19 #Javascript
javascript中onclick(this)用法介绍
Apr 19 #Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 #Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 #Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 #Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 #Javascript
You might like
PHP Document 代码注释规范
2009/04/13 PHP
php截取中文字符串不乱码的方法
2013/12/25 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
Laravel 解决419错误 -ajax请求错误的问题(CSRF验证)
2019/10/25 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
vue select 获取value和lable操作
2020/08/28 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
python系列 文件操作的代码
2019/10/06 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
教师对学生的评语
2014/04/28 职场文书
银行进社区活动总结
2014/07/07 职场文书
数学教师个人总结
2015/02/06 职场文书
雷锋之歌观后感
2015/06/10 职场文书
复活读书笔记
2015/06/29 职场文书