放弃用你的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解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
mock.js模拟前后台交互
Jul 25 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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的面向对象编程
2006/10/09 PHP
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
隐性调用php程序的方法
2015/06/13 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
JavaScript面向对象程序设计创建对象的方法分析
2018/08/13 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
基于python历史天气采集的分析
2019/02/14 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
工作失职自我检讨书
2015/05/05 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
Pygame Draw绘图函数的具体使用
2021/11/17 Python