14.6　编写更高效的JavaScript

编程包括很多工作。程序员总是寻求做事情更快并且使用更少的代码的方法。然而，有很多技巧和方法，下面的技术对于使用JavaScript和jQuery特别有用。

14.6.1　优先使用变量

程序员要学习的重要的一课，就是如何从脚本中提取细节，从而使脚本更为灵活和容易更新。例如，假设当访问者单击一段文本的时候，我们想要将其颜色修改为橙色。我们可以通过jQuery使用css（）函数（参见6.1节）来做到这点，如下所示：

$（'p'）.click（function（）{

$（this）.css（'color'，’#F60'）；

}）；

在这个例子中，橙色（#F60）是直接编码到这个步骤中。假设我们对其他的步骤引用同样的代码（可能是当访问者把鼠标光标移动到一个表格单元格上的时候添加一个背景颜色）。我们可能也要试图在那些步骤中编写为#F60。更好的一种方法是在脚本的开始把颜色放入一个变量中，然后在整个脚本中使用该变量。

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

2 var hColor=’#F60’；

3$（'p'）.click（function（）{

4$（this）.css（'color'，hColor）；

5}）；

6$（'td'）.hover（

7 function（）{

8$（this）.css（'backgroundColor'，hColor）；

9}，

10 function（）{

11$（this）.css（'backgroundColor'，'transparent'）；

12}

13）；

14}）；//end ready（）

在这个例子中，变量hColor现在存储了一个十六进制的颜色值，这个变量既用于＜p＞标签的click事件，也用于＜td＞标签的hover事件。如果随后我们确定不使用橙色，可以修改存储在变量中的值，例如，var hColor=’#F33’，现在，脚本将使用另一种颜色。

我们可以通过解耦＜p＞标签和＜td＞使用的颜色之间的关联，来使得上面的代码更加灵活。当前，它们都设置为相同的颜色，但是，如果想要使得最终能够为每个标签指定不同的颜色，可以为代码添加另一个变量：

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

2 var pColor=’#F60’；

3 var tdColor=pColor；

4$（'p'）.click（function（）{

5$（this）.css（'color'，pColor）；

6}）；

7$（'td'）.hover（

8 function（）{

9$（this）.css（'backgroundColor'，tdColor）；

10}，

11 function（）{

12$（this）.css（'backgroundColor'，'transparent'）；

13}

14）；

15}）；//end ready（）

现在，click和hover事件使用的还是同样的颜色#F60（因为在代码的第3行，变量tdColor的值设置为pColor的值）。然而，如果随后确定想要表格单元格具有不同的颜色，只要把第3行代码修改为如下所示：

var tdColor=’#FF3’；

在编写一个JavaScript程序的时候，找出在代码中显式命名的值并且将其转换为变量。可能的候选者是颜色、字体、宽度、高度、时间（例如1000毫秒）、文件名（例如图像文件）、消息文本（例如警告消息或确认消息），以及文件的路径（例如一个链接或一幅图像的路径）。例如：

var highlightColor=’#33A'；

var upArrow='ua.png'；

var downArrow='da.png'；

var imagePath=’/images/’；

var delay=1000；

把这些变量的定义放在脚本的开始处（或者，如果使用jQuery的话，直接放在.ready（）函数中）。

提示：把计划在页面上显示的文本放置到一个变量中，这特别有用。例如，像“Please supply a valid email address”这样的错误消息，或者像“Thank you for supplying your mailing information”这样的确认消息，都可以是变量。当这些消息作为变量在脚本的开始处组织到一起的时候，随后很容易编辑它们（并且，如果需要接触国际性用户的时候，可以很容易翻译它们）。