JavaScript的革命——jQuery
jQuery介绍
作为javascript框架之一,jQuery诞生于 2006 年初,至今已有三年多。它更在08年一举超越prototype成为“最好用”的javascript框架,不仅赢得了微软、 Nokia的支持,更有独占山河之势。jQuery发展速度之迅猛,连它的始创人John Resig也始料未及。
jQuery是为了改变javascript的编写方式而设计的。它是第一个在javascript框架中引入css的选择器语法的框架,它的出现让许多设计师轻松地加入到javascript开发中来,似乎预示着,javascript在向着更“前”的方向靠拢。而jQuery为“老”开发人员带来的,则是在没有接触标准的前提下,也能够用符合标准、合乎规范的方法写javascript。这里不得不提的是jQuery的一些革新性语法:
具里程碑意义的是,jQuery的出现使得写javascript变得非常的傻瓜化,很多设计人员都能快速上手,导致加入到javascript开发的人数开始猛增。更多的设计人员,意味着更快的成长速度及更精彩的UI效果。jQuery有多简单?这个可以参考下youtube.com上一个名叫Dmitri Gaskin的男孩的演示视频,还有,他只有12岁。
jQuery的特点
1. 选择器语法
选择器语法是jQuery中最有特色且最核心的功能,它同时吸收了css和xpath的语法规则,使文档遍历变得更加轻松容易。选择器返回的是一组DOM对象的集合,而jQuery的各种操作都是面向集合的,这种称作隐式迭代(implicit iteration)的技术,使得大量的循环结构变得不再必要,从而大幅减少代码量。
和以前写javascript相比,实现相同的功能,jQuery能少一半以上代码量。而且,选择器语法同时支持css和xpath语法。css更贴合页面设计人员,而xpath更像是为程序员设计的。css选择器和xpath选择器还不够?那jQuery选择器还可以通过选择器插件进行扩展,以满足你对选择的渴望。对比起以前写javascript的getElementById、getElementsByTagName获取DOM对象的局限性,无疑jQuery更胜一筹。
2. 链式语法
jQuery支持链式操作,在jQuery中,一切对象皆为jQuery,任何扩展的方法/功能必须按照约定返回自身(jQuery对象),因此许多功能都能通过追加“.”操作一步到位,相比以前,链式语法代码量更少,更简洁,语义也更明了,形如:
链式语法使得整个实现流程更加清晰,逻辑性更强。因为选择器语法加隐式迭代的引入,使得整个实现过程省略了许多无谓的循环遍历和条件判定,也让因逻辑混乱导致的错误能更明显地暴露出来。
javascript虽也支持“.”操作,但由于在javascript中,变量声明使用的是弱类型,这使得在执行“.”语法操作的时候,因为对返回参数类型的不明确,导致了原来的javascipt写法不能和jQuery一样轻易追加长长的一条操作链。
3. 插件开发简单
jQuery插件开发有2种途径,一种是用$.fn,另一种则是$.widget。两者实现的目的一致,但前者更适合于只有单个方法,只含少量参数且无需随意配置默认参数的小型插件/功能。当插件包含许多互相调用的内部方法、或需要提供外部接口、或需要配置默认参数,那无疑,后者更适合。
而且,jQuery插件的开发也有一套完整的规范,所有插件编写、功能添加的操作,都必须按照约定进行。例如,每一个插件都应该在功能实现代码结尾return this,这样才能保证所有的插件在调用时不打断链式操作。
在“旧式”的javascript写法中,一般插件和工具都没有一套完整的规范,通常都是不同组织、个人按照其风格或一些普遍约定去做开发。不同的插件和工具整合到同一个系统上时,难免有这个那个兼容性问题。而在jQuery中,你只需看一下各种api的开发示例或者看一下插件的开发规范,便能轻松上手插件开发的方法,并很畅快的完成一套插件的开发。
4. jQuery ui中的css框架
除了javascript框架外,jQuery研发小组还推出了jQuery ui,它包含:可变的ui主题、css框架及规范、成套的ui插件。jQuery ui封装了几个常用的界面组件,让不精通界面设计的开发人员也能自己定制一套漂亮、易用、交互性强、内容丰富的界面。
jQuery ui革命性地为javascript框架另外再附带了一个css框架,或许,很多人都质疑,css框架是否必要。但如果大家点进jQuery ui的主题生成器后,我想,只需用10数秒就能打消大家的疑虑。无论是通过插件、脚本实现抑或手写html代码的方法,如果样式命名遵照jQuery ui的css框架命名规范,那么,你将很容易做到一套界面无数风格,也就是换肤功能。jQuery ui此举无疑是对落实结构(xhtml)、行为(javascript)、表现(css)相分离的web标准的最强力支持。
jQuery ui目前支持css 1-3的规范,开发时也无需理会如何兼容各种浏览器,因为jQuery ui已经把各种差异性都抽象出来了,所以为对象添加样式时,无论目标浏览器是什么,开发时代码都是一套。对于ie这类不支持css-3规范的浏览器,框架还是会以ie兼容的css-2的规范来生成界面。
5. 功能无限扩展
因为jQuery框架的特性和其他扩展功能都是通过插件的形式实现的,这使得它在为添加框架新功能的时候,不至于损害整个框架的设计目标。
如果按照插件编写的规范,我们为jQuery扩展一个功能、添加一个插件后,都能直接通过选择器语法加链式语法调用,使新功能和整个框架能紧密结合在一起但又能保证该功能对其他功能、插件乃至整个框架都无侵害。
同时,这种扩展能力可以被看作是无限的。如果我们找到一个比较好用的工具库,或者是一些页面组件、功能插件等等的js lib,在忽略licence的前提下,我们都能随意的为自己的jQuery框架以插件的形式添加这些特性。
jQuery的优势
如此多的框架,为何是jQuery能脱颖而出?我想除了是因为它轻量、小巧但功能强大外,jQuery丰富的交互组件,参数化的ajax调用,革命性的css框架,规范化的插件开发,简练的语法…… 不仅降低了jQuery的学习成本,缩短了jQuery的部署时间,减少了开发工作,且支持各种主流标准,跨多种浏览器的兼容性,满足了各类系统的应用需求。而jQuery ui也提供了大量风格统一的页面组件,简洁美观的整体风格,也实现了由用户自定制主题的功能,极大地提升用户体验。
jQuery改变了javascript的生态,也改变了大家写javascript的方法和习惯。或许一开始的语法重新学习会让人不太适应,但一旦你适应了jQuery,你会发现写javascript的效率有了很大的提升:各种浏览器差异都可以抛诸脑后;各种事件绑定及处理更加轻松;各种插件工具信手拈来……这完全符合jQuery的宗旨——write less,do more.
jQuery对其他优秀javascript库的超强吸收消化能力,更决定了它能在保持自身特性的基础上,满足各种苛刻的需求。各种javascript库的优秀工具,都能以插件的形式绑定在jQuery框架上,从这点看来,它更像是一个javascript平台。