jQuery高级编程

jQuery入门

 

本章内容
● jQuery的优势
● jQuery版的Hello World代码范例和开发工具

我们在计算机前花费的时间，也许比在其他值得关注的事情上花费的时间更多。因此对于开发人员来说，一把舒适的座椅、一台快速的电脑以及一些可以加快开发过程的软件，都是至关重要的。
本章将从基础开始，介绍jQuery的使用要求、获取jQuery的多种方法以及如何在客户端和服务器上运行jQuery。本章还将使用Google的JavaScript标准，为本书其余章节建立一些编码规范。
本章将建立开发和调试jQuery和JavaScript代码的工作环境。在开发过程中，调试占据了主要的开发时间，因此一个优秀的调试器是非常重要的。本章将介绍Firebug调试器、Chrome 和IE调试器，包括调试JSON的工具、查看HTTP headers的工具，以及JSLint代码质量工具。
本章还将介绍打包.js文件以及供产品化使用的工具、JavaScript代码查看工具并建立一些编码规范。
1.1  jQuery的优势
毫无疑问，jQuery最强大的优势之一就是它消除了很多跨浏览器的兼容性问题。没有jQuery，编写跨浏览器兼容的JavaScript代码是一项繁重而无趣的工作。在使用jQuery之后，人们不禁要惊叹jQuery节省了大量的时间，让代码既能在IE中运行，也能在Firefox中运行。此外，在遍历DOM树和选择元素方面，jQuery的核心也非常卓越。jQuery是非常轻量级的，在经过最小化和压缩之后，jQuery标准产品版只有29kb。这是一个相当小的文件。在调试和测试时，最好使用未压缩的开发版本，它的大小为212kb。
jQuery的另外一个优势，是只需要相对较少的代码就可以处理相当复杂的JavaScript代码才能实现的功能。这是jQuery框架首先吸引作者的原因之一。对于想学习Ajax“秘籍”的新手，jQuery提供了一个较平缓的学习曲线。虽然理解Ajax内在的原理很重要，但是作为入门的第一步，使用$.ajax()是一个不错的起点。
活跃的用户社区意味着活跃的支持能力。在本书写作时，从Google上搜索jQuery将返回大约0.368亿条结果。每天都有新的官方插件和第三方插件产生，它们不断地扩展jQuery的核心功能。很多项目都依赖于jQuery，因此很容易找到在线的帮助(以及出版的书籍)。
但是，在某些情况下是没必要使用jQuery的。请记住即使jQuery库很小，但包含jQuery库具有一定的负载。如果仅仅是使用选择器根据元素的ID来选取一个元素，那么直接使用浏览器内建的JavaScript功能就足够了。但是，如果计划构建功能丰富的、动态的Ajax Web应用程序，那正是jQuery的用武之地。
1.2  硬件和浏览器条件
运行jQuery所需的条件很简单：一台计算机、一个智能电话或一个可以运行现代浏览器的设备。jQuery对浏览器的要求也相当自由。官方网站列出了下列支持jQuery的浏览器：
● Firefox 2.0+
● Internet Explorer 6+
● Safari 3+
● Opera 10.6+
● Chrome 8+
下列浏览器存在一些已知的问题：
● Mozilla Firefox 1.0.x
● Internet Explorer 1.0–5.x
● Safari 1.0–2.0.1
● Opera 1.0–9.x
● Konqueror
在Quirksmode下，有很多篇幅详细地讨论了不同浏览器之间CSS的兼容性，包括CSS 3。更多内容请参考www.quirksmode.org/css/contents.html。
1.3  获得jQuery库和jQuery UI
要获取jQuery库，除了从jquery.com的相关链接下载产品版和开发版的jQuery库之外，还可以采用其他一些方法获取或链接到jQuery库。在应用程序中，可以链接到几个内容分发网络(content delivery network，CDN)，比如Google、Microsoft和jQuery官方网站提到的jQuery CDN，通过 CDN来链接jQuery库。
下面的代码说明了如何从几个可用的CDN获取jQuery库。只需要简单地添加一个

代码片段cdns.txt

Git repository中还具有处于Work in Progress(或简称为WIP)状态的jQuery生成库。它是还在不断进行修正的开发版本，即不应该用于实际的产品之中。WIP每隔一段时间就会重新生成。要使用最前卫的WIP版本，可以直接链接到http://code.jquery.com/jquerygit.js，或者也可以克隆Git repository以从头开始生成jQuery库。下面的代码演示了如何使用Git命令，克隆最新版本的jQuery库。
$ git clone https://github.com/jquery/jquery.git jquery-build
为了生成jQuery库，还需要GNU以便使用make 3.8+和Node.js .2+。在克隆了repo之后，进入jQuery目录并执行make命令。这将生成一个最小化的jQuery完整版，可以通过JSLint(后面将介绍JSLint)运行。如果不需要这些，可以运行make jquery命令以取代make命令。
1.4  HELLO WORLD示例
如果没有一个常见的Hello World程序，一本介绍程序设计的书似乎就是不完整的：


 src=" https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">

代码片段hello-world.txt
简而言之，在上面的例子中，通过Web的在线CDN加载了一个最小化版本的jQuery库。在页面的脚本代码中，调用了jQuery()函数，并将document对象作为参数传入该jQuery()函数。jQuery()函数将创建一个具有一个ready()方法的包装对象，ready()方法只能接收一个函数作为参数。在浏览器中，当把页面中的HTML转换为文档对象模型(document object model，DOM)这一过程完成时，将调用ready()方法。此时，该函数将显示一个警告信息Hello World。与我们看到的结果相比，在幕后还有更多的故事，如果你还不理解其中的过程，也无须担心。第2章将回顾JavaScript语言，并重点介绍JavaScript中管理函数的方式。经过第2章的学习，你就能理解在ready()方法中使用匿名函数的原因。在第3章和第4章中，将介绍jQuery包装器背后的相关概念，以及如何使用jQuery选择器从DOM中选择元素。经过这些学习，你将能更好地理解jQuery(document)的含义。最后，第5章将向你介绍jQuery中的事件处理，比如之前提到过的.ready()。因此，尽管Hello World例子中的代码非常简单，但实际上涉及相当多的知识点，本书将逐一进行解答。
1.5  本书使用的JavaScript规范
本书将坚持使用Google JavaScript Style Guide的部分子集和jQuery Core Style Guide lines作为编码规范，前者可以在网址http://google-styleguide.com/svn/trunk/javascriptguide.xml找到，后者可以在网址http://docs.jquery.com/jQuery_Core_Style_Guidelines找到。Google JavaScript Style Guide定义了下列规范：
● 除了意图明确地要创建一个全局变量之外，总是使用var声明变量
● 总是使用分号。这对于压缩代码非常重要
● 常量使用大写，每个单词之间用一个下划线分隔
● 函数、变量和方法名都采用驼峰拼写法，并且将整个变量名的第一个字母小写
● 类和枚举名也采用驼峰拼写法，但整个变量名第一个字母大写
当用例子演示不遵循这些规则的情况时，可以看到这些规则的例外情况。
jQuery团队还发表了一些开发jQuery核心库的规范。在该规范中描述了下列规则：
● 使代码有间隔：在代码中明确地使用空格，并使用制表符(tab)缩进代码。在代码行末尾不要使用空格字符，在空行中也不应该使用空格字符。下面的代码描述了一种在代码中使用间隔的较好方式：
if ( test === "test string" ) {
methodCall( "see", "our", "spacing" );
}
● 使用注释：对于多行注释使用/* */，对于单行注释，使用//，在注释上保留一个空行。请将单行注释放在所注释代码行之上，并且在注释行中仅包含注释的说明。

// 注释
var x = 'blah';

var x = 'blah'; // 不良方式
● 相等性：总是使用等同(===)进行比较，而不是简单地使用等于(==)进行比较。对这一规则，jQuery团队的一个例外，就是在检查null值时使用简单的等于操作符进行比较。正如规范所说，执行== null 或者 != null的比较操作实际上非常有用，因为当值为null或undefined时，这种比较会成功(或失败)。
● 以块方式组织代码：对于控制结构(if/else/for/while/try)总是使用花括号，并且总是以多行的代码块方式来编写代码。不要使用没有花括号的单行if语句。应该将起始花括号与else/else if/catch放在同一行上。建议不要使用三元操作符来取代if/else语句。下面是一些例子：
//不良方式
if(stuffHappens ) alert('blaaaah');

//良好方式
if(stuffHappens ) {
alert('blaaaah');
}

//良好方式
if( option ) {
//代码
} else {
//代码
}
● 函数调用格式：在函数调用参数的两侧包含一个多余的空格。但当函数调用是嵌套的、或是函数的参数为空、或者传入的参数是一个对象字面量或数组时例外。
//正确的函数调用方式
f(arg );
f( g(arg) );
f();
f({ });
f([ ]);
● 数组和对象：对于空对象或数组字面量不要使用额外的空格，但在逗号和冒号之后使用一个空格：
var a = {};
var b = [];
var c = [ 1, 2, 3 ];
● 对变量/对象赋值：在赋值语句后总是使用一个分号结尾并结束该行。Google Style Guide也要求，在一行代码结尾总是使用分号。
● 类型检查：表1-1描述了执行类型检查的代码。

● RegExp：在.text()或.exec()中创建正则表达式(RegExp)
● 字符串：使用双引号而不是单引号
开发规范的文档中还提到了使用JSLint进行验证，JSLint将在下一小节“开发工具”中进行介绍。
Google JavaScript Style Guide与jQuery的Style Guide之间也存在着一些差别。例如，Google JavaScript Style Guide建议使用单引号，而jQuery团队则将使用双引号作为一种标准。在本书中我们将遵循jQuery团队的建议。
1.6  开发工具
在使用JavaScript和jQuery开发时，除了传统的编辑器/浏览器之外，还有多种工具可供选用。如果你更喜欢面向命令行方式的开发风格，则可以使用jconsole和Rhino。jconsole是一个Web应用程序，它允许用户以交互方式输入JavaScript代码。jconsole还提供了一些函数供用户使用，比如print()、load()和clear()。在每行代码之后按下Ctrl+Enter组合键，就可以在jconsole中输入多行代码。只需要按下Enter键就可以执行当前文本输入区域中的代码。jconsole还维护着一个你所输入命令的历史纪录，按上下箭头键就可以访问或使用前一个或后一个输入的命令。图1-1显示了jconsole的使用界面。

 

 

 

更多图书适读内容请持续关注

如需要电子样章的朋友请留下邮箱，一有时间我就会发给大家的