放弃用你的InnerHTML来输出HTML吧,jQuery Tmpl不详细讲解
在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的友好度是大大的。点击这里进去项目地址
实现原理
通过图片我们能够很直观的看到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一样)
例如:效果是和上面的完全一样。
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的应用文章啦~^_^
来源:http://www.cnblogs.com/coffeedeveloper/archive/2012/07/25/2609204.html
转载于:https://www.cnblogs.com/ourLifes/p/7747709.html
放弃用你的InnerHTML来输出HTML吧,jQuery Tmpl不详细讲解相关推荐
- 环形队列的输出_循环队列的基本操作详细讲解
实验学时: 2 实验类型: (设计型) 一.实验目的 1. 理解并掌握队列的逻辑结构和顺序存储结构,了解循环队列的特点: 2. 掌握循环队列中基本操作的相关算法: 3. 编程实现相关算法: 4. 学会 ...
- R语言使用yardstick包的conf_mat函数计算多分类(Multiclass)模型的混淆矩阵、并使用summary函数基于混淆矩阵输出分类模型评估的其它详细指标(kappa、npv等13个)
R语言使用yardstick包的conf_mat函数计算多分类(Multiclass)模型的混淆矩阵(confusion matrix).并使用summary函数基于混淆矩阵输出分类模型评估的其它详细 ...
- c语言在一组数据中找最大值最小值,用c语言输入一组数据,输出最大最小值,求c语言程序讲解: 输入一组数据,求最大值,最小值,和,平均...
问题标题 用c语言输入一组数据,输出最大最小值,求c语言程序讲解: 输入一组数据,求最大值,最小值,和,平均 2019-7-3来自ip:18.156.193.207的网友咨询 浏览量:318 手机版 ...
- java将一个整数按字节输出_在java中的整数类型有四种,分别是 byte short int long 其中byte只有一个字节 0或1,在此不详细讲解。其他的三种类型如下:1、...
在java中的整数类型有四种,分别是 byte short int long 其中byte只有一个字节 0或1,在此不详细讲解. 其他的三种类型如下: 1. 基本类型:short 二进制位数:16 ...
- 卷积神经网络中各个卷积层的设置及输出大小计算的详细讲解
我将从以下几个方面来进行解说: 1.卷积神经网络的结构 2.卷积神经网络的计算 3.以AlexNet为例进行详细讲解 4.常见的两个卷积层设置的问题 1.卷积神经网络的结构 卷积神经网络(CNN)由输 ...
- python爬虫从入门到放弃,含案例分析,超详细讲解(一)
Python爬虫 1.认识爬虫 1.1.概述 网络爬虫(又称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者) 按照一定规律,自动地抓取万维网信息的程序或者脚本. 1.2.应用场景 ...
- springboot输出hello world_Spring Boot 入门教程 | 图文讲解
目录 一.Spring Boot 是什么 二.为什么要使用 Spring Boot 三.快速入门 3.1 创建 Spring Boot 项目 3.2 项目结构 3.3 引入 Web 依赖 3.4 编写 ...
- 在python中、下列代码的输出是什么-python面试题详细总结(附答案)
本篇文章给大家带来的内容是关于python面试题总结(附答案),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CPS少儿编程网-Scratch_Python_教程_免费儿童编程学习平 ...
- nohup 输出日志到文件_超详细的EFK安装部署教程--filebeat日志数据采集
概述 Filebeat是本地文件的日志数据采集器. 作为服务器上的代理安装,Filebeat监视日志目录或特定日志文件,tail file,并将它们转发给Elasticsearch或Logstash进 ...
最新文章
- centos 脚本基础练习1
- ElasticSearch elasticsearch-servicewrapper 在linux上的安装部署全程记录
- VR/AR标准委员会成立OpenXR工作组:Oculus、Valve领头
- 反欺诈评分模型之手机终端
- Only the original thread that created a view hierarchy can touch its views——Handler的使用
- 主成分分析碎石图_ISLR读书笔记十九:主成分分析(PCA)
- POJ3628:Bookshelf 2【01背包】
- LeetCode(一):两数之和
- eclipse黑色炫酷主题设置1
- 考教师资格证需要买书吗?
- iOS开发之颜色渐变
- 使用ado访问excel中的数据
- html 外联 变 内联,Html 内联元素、外联元素 和 可变元素
- 云览天下,一触即达——QQ 浏览器(android) 设计之路
- 超码、候选码和主码有什么区别?
- jmeter优化记录文档
- U盘EFI分区删不掉怎么办
- CVE 2013-2094 exploit 实验笔记
- 南卡315打假!揭露山寨耳机“十宗罪”!
- Firefox全历史版本下载
热门文章
- 【Java 系列笔记】语法基础 + Spring + Spring MVC + SpringBoot + 数据结构
- 深度学习入门读书笔记—全
- [转]2020年4月github上最热门项目-java
- 期货市场技术分析02_趋势的基本概念
- python笔记06_进程vs线程
- python笔记03_IO编程
- IntelliJIDEA和tomcat在浏览器js乱码问题解决
- php redis 封装类,php redis封装类
- 月薪2W和月薪10W的差别,怎么判断一个产品经理的专业水平高低?
- 堪比整容!学会这些可视化技巧,让你的图表分分钟高级起来