海鼎,助您成就梦想!

jQuery在海鼎系统中的应用

2015年10月19日

评论数(0)

摘要:众所周知,JavaScript目前被广泛地应用于Web开发中,随着HTML5技术的发展,JavaScript在未来还将有更大的发展和应用空间。但jQuery是最流行的JavaScript库,据调查,互联网中近一半的网站都使用了jQuery。使用jQuery,开发者的编码工作将大大减少,而大量的jQuery插件,也使得开发者可以轻易实现很多绚丽的效果。它的优势在现代系统中的体现也越来越明显。那么本文就介绍一下它的优缺点,让没有接触过jQuery的人认识到它的强大,已经接触过jQuery的人更了解它。

关键词:jQuery,Ajax,多浏览器兼容,插件扩展,丰富的UI,动态特效,链式调用

一、什么是jQuery?

jQuery是一个优秀的javascript框架。

jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。

jQuery是继Prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE(写更少的代码,做更多的事情)。它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种常用浏览器。

jQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松地开发出功能强大的静态或动态网页。如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过80%在使用jQuery。

二、JQuery的特点

1.一款轻量级的js框架

jQuery核心js文件才几十kb,不会影响页面加载速度。与Extjs相比要轻便的多。

2.丰富的DOM选择器(CSS1-3 + XPath)

jQuery的选择器用起来很方便,好比要找到某个dom对象的相邻元素js可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。

3.链式表达式

jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。

4.事件、样式、动画支持

jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。

5.Ajax操作支持

jQuery简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信。

6.跨浏览器兼容

jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。

7.插件扩展开发

jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

8.可扩展性强

jQuery提供了扩展接口:jQuery.extend(object),可以在jQuery的命名空间上增加新函数。jQuery的所有插件都是基于这个扩展接口开发的。

三、jQuery的优缺点

(一)jQuery优点

1. jQuery实现脚本与页面的分离

在HTML代码中,我们还经常看到类似这样的代码:


即使validate()函数可以被放置在一个外部文件中,实际上我们依然是把页面与逻辑和事件混杂在一起。jQuery让你可以将这两部分分离。借助于jQuery,页面代码将如下所示:

接下来,一个单独的JS文件将包含以下事件提交代码:

$("myform").submit(function(){

...your code here

)}

这样我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来,就像数年前CSS让样式代码与页面代码分离开一样。

2. 最少的代码做最多的事情

最少的代码做最多的事情,这是jQuery的口号,而且名副其实。使用它的高级selector,开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异,它除了完全支持Ajax,而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例:

$("p.neat").addClass("ohmy").show("slow");

通过以上简短的代码,开发者可以遍历“neat”类中所有的

元素,然后向其增加“ohmy”类,同时以动画效果缓缓显示每一个段落。开发者无需检查客户端浏览器类型,无需编写循环代码,无需编写复杂的动画函数,仅仅通过一行代码就能实现上述效果。

3. 性能支持比较好

在大型JavaScript框架中,jQuery对性能的理解最好。尽管不同版本拥有众多新功能,其最精简版本只有18KB大小,这个数字已经很难再减少。jQuery的每一个版本都有重大性能提高。如果将其与新一代具有更快JavaScript引擎的浏览器(如火狐3和谷歌Chrome)配合使用,开发者在创建富体验Web应用时将拥有全新速度优势。

4. 它是一个“标准”

之所以使用引号,是因为jQuery并非一个官方标准。但是业内对jQuery的支持已经非常广泛。谷歌不但自己使用它,还提供给用户使用。另外戴尔、新闻聚合网站Digg、WordPress、Mozilla和许多其它厂商也在使用它。微软甚至将它整合到Visual Studio中。如此多的重量级厂商支持该框架,用户大可以对其未来放心,大胆地对其投入时间。

5. 插件开发

基于jQuery开发的插件目前已经有大约数千个。开发者可使用插件来进行表单确认、图表种类、字段提示、动画、进度条等任务。jQuery社区已经成长为一个生态系统。这一点进一步证明了上一条理由,它是一个安全的选择。而且,jQuery正在主动与“竞争对手”合作,例如Prototype。它们似乎在推进JavaScript的整体发展,而不仅仅是在图谋一己之私。

6. 节约学习成本

当然要想真正学习jQuery,开发者还是需要投入一点时间,尤其是如果要编写大量代码或自主插件的话,更是如此。但是,开发者可以采取“各个击破”的方式,而且jQuery提供了大量示例代码,入门是一件非常容易的事情。建议开发者在编写某类代码前,首先看一下是否有类似插件,然后看一下实际的插件代码,了解一下其工作原理。简而言之,学习jQuery不需要开发者投入太多,就能够迅速开始开发工作,然后逐渐提高技巧。

7. 让JS编程变得有趣

发现使用jQuery是一件充满乐趣的事情。它简洁而强大,开发者能够迅速得到自己想要的结果。它解决了许多JavaScript问题和难题。通过一些基础性的改进,开发者可以真正去思考开发下一代Web应用,不再因为语言或工具的差劲而烦恼。相信它的“最少的代码做最多的事情”口号。

(二)jQuery的缺点

1. 不能向后兼容

每一个新版本不能兼容早期的版本。举例来说,有些新版本不再支持某些selector,就只是简单地将其移除。这可能会影响到开发者已经编写好的代码或插件。

2. 插件兼容性

与上一点类似,当新版jQuery推出后,如果开发者想升级的话,要看插件作者是否支持。通常情况下,在最新版jQuery版本下,现有插件可能无法正常使用。开发者使用的插件越多,这种情况发生的几率也越高。笔者有一次为了升级到jQuery 1.3,不得不自己动手修改了一个第三方插件。

3. 多个插件冲突

在同一页面上使用多个插件时,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题,但却又确实是一个难于调试和解决的问题。

4. jQuery的稳定性

jQuery没有让浏览器崩溃,这里指的是其版本发布策略。jQuery 1.3版发布后仅过数天,就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持,可能会影响许多代码的正常运行。希望类似修改不要再出现。

5. 对动画和特效的支持差

在大型框架中,jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

四、jQuery使用方法

1. jQuery选择器

选择网页元素jQuery的基本设计和主要用法,就是“选择某个网页元素,然后对其进行某种操作”。这是它区别于其他函数库的根本特点。

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

2. 改变结果集

如果选中多个元素,jQuery提供过滤器,可以缩小结果集;有一些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法。

3. 链式操作

选中网页元素以后,就可以对它进行某种操作。jQuery允许将所有操作连接在一起,以链条的形式写出来。

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

4. 元素的操作:取值和赋值

操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。

jQuery使用同一个函数,来完成取值(getter)和赋值(setter)。到底是取值还是赋值,由函数的参数决定。

需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

5. 元素的操作:移动

如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。

6. 元素的操作:复制、删除和创建

复制元素使用.clone()。

删除元素使用.remove()和.detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。

清空元素内容(但是不删除该元素)使用.empty()。

7. 工具方法

除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。

如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。

8. 事件操作

jQuery可以对网页元素绑定事件。根据不同的事件,运行相应的函数。

9. 特殊效果

jQuery允许对象呈现某些特殊动画效果。

五、jQuery在海鼎系统有哪些应用?

1、建立了jQuery的公用函数库

根据系统的特性,及特定的业务建立了jQery的公用函数库,并广泛地应用于各个客户。使得各个客户的用户体验提高了、产品对浏览器兼容性提高了、系统的性能提高了、系统的稳定性也有所提高了等。

2、jQuery使得程序更模块化,流程化

根据开发人员日常开发的程序,把程序进行模块化,流程化,标准化。从而使得开发者的入门水平降底了、开发者的效率提高了等。

3、引入jQuery的各种插件,从而实现了一些不能实现的功能

(1)引入数据表CANVAS,从而使数据表(线型图,柱状图,饼图等)在系统得到了实现。

图1 线形图

图2 柱状图

图3 饼图

(2)引入树型结构,从而使得组织结构图得以实现。

图4 树型结构

(3)引入画图工具,从而自动画工作流程图得以实现。

图5 画图工具

随着jQuery在海鼎系统中的应用的深入,jQuery的优点在海鼎系统中的体现会越来越明显。它已经深入到了每个使用之的客户,深入到产品的每个模块,深入到产品的每个流程,深入到产品的每个报表,深入到了每个页面,深入到了每一行代码。它的量变最终会导致相关产品有一个质的飞越,有着不可估量的意义。

文/傅化炫

文章为作者独立观点,不代表联商专栏立场。

联商专栏原创文章由作者授权发表,转载须经作者同意,并同时注明来源:联商专栏+海鼎。