优化您的 Web 站点 接手一个可维护的 Web 站点并将其打磨、抛光、流线化（2）

look_w

一切都非常明显：第二个示例（其中 CSS 和 JavaScript 位于单独的文件中）令人难以置信地容易处理和管理。进一步，可维护性和可用性对于设计人员和开发人员都显著增加了。JavaScript 程序员和脚本设计人员在一个文件中工作，而不会弄乱核心 HTML。CSS 设计人员可以在 CSS 中进行修补，甚至为 Internet Explorer 或其他浏览器添加附加修复，而不必更改文档的结构。负责更改 HTML 的设计人员可以执行此任务，而无需担心滚动上百行脚本和样式，或更改某些东西，从而不仅弄乱页面的结构，还弄乱其操作和显示。
如果已经安排了 QA（质量保证）和测试过程，那么此处的价值就会成指数级增长。在这些情况下（至少作为一般规则），已更改的任何文件都必须重新测试。在此设置（关注点分离）中，可以更改 JavaScript 并进行测试，而无需 重新测试样式和结构。这是巨大的增值，尤其是在考虑用于测试 CSS 和 HTML 的工具和技术与用于测试交互的 JavaScript 驱动的 Web 页面的工具和技术完全不同时。
使用编程方式附加事件处理程序 JavaScript 在页面中的显示方式与 CSS 在页面中的显示方式之间有一个重要的区别。使用 CSS 时，规则应用于元素，所以将所有 CSS 放置到外部文件中相当容易。但是，使用 JavaScript 时，事情就不总是那么明朗；JavaScript 通常不应用于元素，而是应用于元素上 特定的事件。所以您将看到如下的 HTML：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!CDATA[ <li><a href="#"><img src="img/photo01.jpg" alt="description" ]]> <b>onmouseover="javascript:getImageDetails();"</b><!CDATA[ /> <img src="img/photo01.jpg" alt="description" class="preview" /></a></li> <li><a href="#"><img src="img/photo02.jpg" alt="description" ]]> <b>onmouseover="javascript:getImageDetails();"</b><!CDATA[ /> <img src="img/photo02.jpg" alt="description" class="preview" /></a></li> <li><a href="#"><img src="img/photo03.jpg" alt="description" ]]> <b>onmouseover="javascript:getImageDetails();"</b><!CDATA[ /> <img src="img/photo03.jpg" alt="description" class="preview" /></a></li> <li><a href="#"><img src="img/photo04.jpg" alt="description" ]]> <b>onmouseover="javascript:getImageDetails();"</b><!CDATA[ /> <img src="img/photo04.jpg" alt="description" class="preview" /></a></li> <li><a href="#"><img src="img/photo05.jpg" alt="description" ]]> <b>onmouseover="javascript:getImageDetails();"</b><!CDATA[ /> <img src="img/photo05.jpg" alt="description" class="preview" /></a></li>]]>

这可以一直延续。在这个例子中，图库中有 20 个图像，每个都有 onmouseover 事件处理程序。乍看起来，这似乎是不可避免的 — 是将 JavaScript 附加到事件中必不可少的一部分。而且，如果您已经获得需要调用单个 JavaScript 函数的单个事件，这可能行得通（例如，单击特定的图像将调用 JavaScript 函数 returnToHomePage() 等）。但是，在类似上述情形（大量图像或对象都附加到同一个 JavaScript 函数中）的情况下，您最终将真正弄乱您的 HTML 页面。
但是，避免这种情况并不是那么困难，您只需要再多使用一些 JavaScript。当然，这意味着您可以将额外的 JavaScript 放在外部文件中，并忘记它 —— 还是关注点分离。您真正需要知道的是如何使要附加事件处理程序的元素变得惟一。例如，在上述代码中，假设我想要进行更改，并将所有这些鼠标事件处理程序附加到 “preview” CSS 类的图像中，并将事件从 onmouseover 更改为 onClick（这实际上是本文最后对此代码执行的操作）。在这种情况下，我需要如下的 JavaScript 函数：

1 2 3 4 5 6 7 8 9 10

function addImageHandlers() { var imagesDiv = document.getElementById("images"); var imageElements = imagesDiv.getElementsByTagName("img"); for (var i=0; i<imageElements.length; i++) {   var class = imageElements.className;   if (class == 'preview') {    imageElements.onclick = getImageDetails;   } } }

其中大部分详细信息是特定于页面的，而且本文的重点不在于介绍如何使用编程方式分配事件处理程序。但是在 nutshell 中，这抓取了特定 div 中的所有 img 元素，命名为 “images”，然后在 “preview” CSS 类中查找其中所有的图像。最后，我使用 onclick 处理程序并将其分配给我想在此事件上运行的方法：getImageDetails()。结果是我可以在 img 标记中挖掘所有这些事件处理程序。
惟一的缺点是您需要在页面的 body 的 onLoad 事件上运行此方法。但是，您已经将所有这些图像处理程序逐个抽取出来了。而且，最重要（但不是最明显）的是，您可以在 JavaScript 文件中更改分配了事件的元素，而不用 使用 HTML。假设您想要再次使用 onmouseover 事件或不同的元素；只需更改 addImageHandlers() 函数，您将永远不会打开 HTML。这是一个优点。
事实上，您可能想要一开始就让页面始终运行在实用程序函数中，比如 initPage()。然后，您可以将所需的一切放入此 JavaScript 函数中，添加、删除或更改事件处理程序，而且永远不用打开 HTML。关注点的进一步分离，对页面的未更改组件的测试更少，对 Web 页面的更新更容易。