14.5　综合应用

14.5　综合应用

到目前为止，我们在本书中已经见到JavaScript可以完成的很多任务：表单验证、图像翻转、照片集，像标签页面板和折叠面板这样的用户界面改进等。但是，你可能会问，如何将这些组合到一起用于自己的站点呢？毕竟，一旦我们开始使用JavaScript，可能想要使用它来改进站点的每个页面。下面是关于如何在站点上使用多个脚本的一些技巧。

使用外部JavaScript文件

正如1.2节所介绍的，外部JavaScript文件是共享Web页面中相同的JavaScript代码的一种高效方式。外部文件使得更改JavaScript更为容易，如果需要扩展（或修改）JavaScript代码，只需要编辑一个文件。此外，当下载一个外部JavaScript文件的时候，它存储在浏览器的缓存中，因此，它不需要再次下载，这使得Web页面让访问者觉得具有更好的响应性而且载入更快。

在jQuery这样的JavaScript库的例子中，外部JavaScript文件是必需的，毕竟，如果把真正的jQuery JavaScript代码放入到每个页面中，我们的Web页面将会毫无必要地变大并且难以维护。此外，jQuery插件作为外部文件提供，如果要使用它们的话，需要将其链接到一个Web页面。链接到一个外部JavaScript文件很容易，如下所示：

＜script src="js/ui.tabs.js"＞＜/script＞

把自己的JavaScript代码放入到外部JavaScript文件中，这也可以使代码更具复用性，并且站点会给人更快的感觉，但是，只有当我们真正在Web页面中共享这些代码的时候才会这样。例如，对于9.4节所创建的表单验证脚本来说，把用于创建验证规则和错误消息的代码放入到一个外部文件中是没有意义的，因为所有这些规则和错误消息都是特定于页面上的表单元素的，并且，在拥有不同表单字段的一个表单上就无法工作了。在这个例子中，最好只是在Web页面自身中使用JavaScript验证表单。

然而，我们在9.4节所学习的Validation插件可以用于任何表单，因此，将它放入到一个单独的文件中是有意义的。对于将要在多个页面中使用的任何代码的操作都是一样的。例如，在9.3.1节，我们学习了如何使用JavaScript来聚焦到表单上的第一个字段，这是我们可能想要对每个表单做的事情。同样，9.2.3节的“常见问题：阻止多次提交”部分介绍了防止访问者多次单击提交按钮（从而多次提交表单数据）所需的JavaScript，这也是对于任何表单页面都有用的。因此，我们可能想要把这两个脚本组合到一个名字类似于forms.js的单独的外部文件中。JavaScript代码可能如下所示：

1$（document）.ready（function（）{

2//focus first text field

3$（"：text"）[0].focus（）；

5//disable submit button on submit

6$（'form'）.submit（function（）{

7 var subButton=$（this）.find（'：submit'）；

8 subButton.attr（'disabled'，true）；

9 subButton.val（'……sending information……'）；

10}）；

11}）；//end ready

注意，由于这段代码依赖于jQuery，因此必须将其包含到$（document）.ready（）函数中（从第1～10行）。实际上，每个依赖于jQuery的外部文件都必须从上面的第1行开始而到第10行结束。

注意：jQuery可以处理多个$（document）.ready（）函数而没有任何问题。例如，我们可以有几个外部JavaScript文件来对页面做各种事情，并且每个文件都可以拥有一个$（document）.ready（）函数，并且我们可以在只是出现在该页面上的＜script＞中包含一个$（document）.ready（）函数。这对jQuery来说没问题。

在多个页面中使用同样的脚本，需要你自己做一些规划。例如，第3行把光标放在一个页面上的第一个文本字段中。在大多数情况下，这是有意义的，我们希望聚焦到第一个字段上，以便访问者可以开始填充表单。然而，如果这个页面有多个表单，这段代码可能不会像我们预期的那样工作。

例如，如果在页面的顶部有一个查找框并且还有一个单独的表单用来提交一个产品订单，第3行中的代码将会把焦点放置到“Search”框中，而不是订单表单的第一个文本字段中。在这个例子中，我们需要进一步考虑问题，并且使用一种方法来确保当页面载入的时候正确的文本字段得到焦点。这里有两种可能的解决方案：

·为页面载入时想要聚焦的字段添加一个类名。例如，假设想要给聚焦的字段添加类名focus，代码如下所示：

＜input type="text"class="focus"name="firstName"＞

然后，可以使用如下这行JavaScript来确保聚焦到该字段：

$（'.focus'）.focus（）；

要使用这段代码，我们只需要确保给每个表单页面上的一个文本字段添加了focus类，并且确保把包含这段代码的外部JavaScript文件链接这些表单页面中的每一个。

·可以通过给＜form＞标签自身添加一个类名来达到同样的效果，只需要使用如下的JavaScript：

$（'.focus：text'）[0].focus（）；

这行代码自动地聚焦到类名为focus的一个表单的第一个文本字段。这种方法的好处是，第一个文本字段总是会获得焦点，因此，如果重新组织表单（例如，在开始的位置添加一些更多的文本字段），我们知道获得焦点的是第一个文本字段而不是页面下面的某个其他字段（类名为focus）。

一旦开始使用JavaScript，我们可能最终会在所有（或者几乎所有）的Web页面上使用几段脚本。例如，我们可能会有一些翻滚图像（参见7.1节），并且使用JavaScript来确保到站点之外的链接在一个新窗口中打开（参见8.2节）。在这种情况下，创建带有要在站点中共享的所有脚本的一个外部JavaScript文件是有用的，我们可以把这个文件命名为site_scripts.js或者直接叫做site.js。

注意：jQuery有一种内置的方法来保证我们不会产生不期望的JavaScript错误。如果试图在某些不存在的内容上执行一个操作，JavaScript通常会产生一个错误，例如，如果试图从没有一个文本字段的页面来选取该文本字段。幸运的是，jQuery会忽略这类错误。

14.5 综合应用