编写通用的 JavaScript 和 Ajax

创建 web 应用程序时采用良好的编程实践

Joe Lennon, 首席移动开发人员, Core International

简介： 通用的或者低调的 JavaScript 是在您的 web 应用程序中分隔 JavaScript、CSS 和 HTML 元素的实践。通过这种方式组织您的应用程序，更容易维护它们，并能确保您的应用程序在各个平台和 web 浏览器之间表现一致。在本文中，了解如何采用一些技术来收获以一种低调的方式开发 web 应用程序的好处。

标记本文！

发布日期： 2011 年 10 月 27 日 
级别： 中级 
原创语言： 英文 
访问情况 ： 3347 次浏览 
评论： 0 (查看 | 添加评论 - 登录)

 平均分 (8个评分)
为本文评分

简介

编写 JavaScript 和 Asynchronous JavaScript + XML (Ajax) 应用程序时，非常容易专注于它们必须提供的交互式特性，而忘记 web 应用程序开发的基本原则。以一种低调的方式来编写 JavaScript 和 Ajax 应用程序很重要，原因有几点。第一，这样做允许应用程序逻辑与您的内容分离，便于您轻松维护应用程序。另外，它让您确保您的应用程序以其最基本的形式在各个平台和 web 浏览器之间一致地运行，让您在添加 JavaScript 和 Ajax 特性时只需关注这个问题。最重要的也许是，以这种方式开发 web 应用程序意味着遵守渐进式增强（progressive enhancement） 理念，即您的应用程序将支持使用不支持 JavaScript、尤其是 JavaScript 特性（包括 Ajax）的浏览器的用户。如果到目前为止您一直以一种高调的方式编写 JavaScript 应用程序，本文将帮助您发现一些允许您创建适合所有人的 web 应用程序的最佳实践，同时向使用它们的用户提供所有诱人的附加功能。

术语低调的（unobtrusive）JavaScript 的定义相对宽泛，但被公认为是使用一个优秀编程实践集合来创建 web 页面和应用程序的过程。这些编程实践包括：

• 使您的应用程序的 JavaScript、CSS 和 HTML 元素保持分离。
• 使用 JavaScript 逐渐增强您的应用程序 — 不要使用 JavaScript 实现核心功能
• 以能够减少重复、更具组织性、更易于读取和维护的方式维护您的代码结构
• 遵守 web 和可访问性标准

以这种方式进行开发不仅是一种良好实践，而且能确保您的应用程序将适用使用不同 web 浏览器和设备的广泛用户，即使是功能有限的浏览器或设备。以这种方式构建的应用程序通常拥有更好的组织形式和结构，执行速度更快，更不容易出现 bug。

在本文中，您将看到您的应用程序的呈现层、样式层和行为层应该如何保持分离，以便不进行内联 CSS 或 JavaScript 事件处理。您还将看到一些高调的 JavaScript 代码示例，并发现它们拥有的、被认为是不好的编程实践的属性。然后，您将了解如何更正这些问题，以一种低调的方式编写相同的代码，并了解这种开发风格的一些最佳实践的原则。 特别是，Ajax 应用程序是低调的代码的危险基础。只是因为您的应用程序拥有一个富 Ajax 接口并不意味着不能以一种渐进式增强的方式添加这个代码。 您将了解如何以一种特别的方式接近 Ajax 函数，这种方式将向不能利用您的 Ajax 特性拥有的流动性（fluidity）的用户提供一个回退操作（fallback）。最后，您将看到一个详细的应用程序示例，它提供即便在 JavaScript 关闭时仍能工作的动态 Ajax 加载。

回页首

分离行为和内容

在 Ajax 和 Web 2.0 出现之前，JavaScript 广泛用于一些基本特性，比如客户端表单验证、滚动图像、以及显示/隐藏内容。由于这些特性中的每一个都通过很少的 JavaScript 代码支持，一般趋势是在您的 HTML 文档的  区域中的一个 


在清单 13 中，您向表单的 submit 事件添加了一个事件处理程序。这个处理程序阻止默认事件（提交表单）触发，将额外的 ajax参数的值设置为 1，使用原始表单发出一个 ajax 请求以获取 URL 和数据。如果接收到一个成功的 HTTP 响应代码，则调用registerSuccess 函数；如果出现错误，则调用 registerFailure 函数。

回页首

另一个低调的 Ajax 示例

Ajax 特别有用的另一个场景是将一些大型数据集编组到一些页面中，这个过程通常称为分页（pagination）。例如，如果您拥有一个搜索结果集，而不是一次显示几百个或更多搜索结果，那么您将更有可能显示这个数据的一个更小的子集（例如 10 条记录），并向用户提供在页面之间前后移动的选项。这种情况的一个例子是 Google 的搜索引擎。在页面底部有一个在结果页面之间导航的选项。

通常，在页面之间移动的标准方法是向加载数据的服务器端脚本传递一个参数，告知它应该输出结果集的哪个页面。问题是，每当用户需要移动到另一个页面时，都必须发送一个请求到服务器，从而导致页面使用新的数据集重新加载。

使用 Ajax，您可以确保当一个新数据页面正在被提取时，用户不必观看整个页面重载，而是只使用新数据集替代部分页面。下面我们来看一个示例。

最重要的是，您需要总是满足那些没有 JavaScript 的用户的需求。为此，您需要确保您的应用程序以传统方式工作，页面使用一个新数据集刷新（见清单 14）。同样，您将使用将一个 ajax 标记传递到服务器端脚本的概念，让它知道它正在被一个常规 GET 请求调用还是被一个 Ajax 调用调用。

清单 14. 确保应用程序支持没有 JavaScript 的用户

//HTML code Result 1 Result 2 ... Result 10 Next Page Last Page

results.php 服务器端脚本将生成一个类似于清单 14 中的 page 1 的页面，单击其中的链接可导航到第二页或者最后一页。如果您不在 page 1 上，将会看到 Previous Page 和 First Page 链接，如果您在最后一页上，则不会看到 Next page 或 Last Page 链接。您甚至可以显示一个页面列表，以便轻松跳转到某个页面。因此，如何 Ajax 化 这个分页部分，又避免对非 JavaScript 浏览器打破它呢？答案其实很简单，只需获取所有分页链接的一个引用，当链接被单击时阻止默认动作（浏览器使用链接的 href 属性中的页面替代当前页面）触发。然后，获取 href 属性的值，将其作为 Ajax 请求的 URL。最后，添加 ajax 参数，以便服务器端脚本知道这是一个 Ajax 请求（见清单 15）。

然后，服务器将要么返回整个页面，要么只返回您希望使用请求的数据集替换的部分，具体情况取决于使用 Ajax 还是常规 GET 请求调用它。然后，您的函数使用服务器返回的 HTML 替换 results div 的内容，返回的 HTML 包含 

 结果列表和分页链接（当您在页面间移动时，这些链接可能不同）。

清单 15. Ajax 化分页部分



这又是一个简单的 Ajax 示例。您肯定已经看到，以下面这种方式使用 Ajax 比较简单：渐进地增强您的应用程序，而不是使 JavaScript 成为一个强制要求。另外，通过采用更好的编码实践，您肯定会发现，以一种低调的方式使用 Ajax 比使用 JavaScript 以一种不连贯的方式来完成相同的任务要简单高效得多。

回页首

结束语

本文向您介绍了低调的 JavaScript 和渐进式增强的概念，以及下面这个设计理念：设计您的应用程序时一开始不使用 JavaScript，然后添加 JavaScript 来改善从 Javascript 获益的用户的用户体验。本文不可能是关于如何以一种低调的方式开发应用程序的一个面面俱到的参考资料。但是，如果您像我一样，花费了大量时间来开发未必以低调的方式使用 JavaScript 和 Ajax 的 web 应用程序，您可能会对接受这种 web 开发哲学将会带来的巨大好处感到非常惊喜。




参考资料

学习

• “Ajax 改造，第 1 部分：使用 Ajax 和 jQuery 改进现有站点”（developerWorks，2008 年 3 月）展示如何使用简单的模式窗口消除弹出窗口和导航 “死胡同”。
  
  
• “掌握 Ajax，第 2 部分：使用 JavaScript 和 Ajax 进行异步请求”（developerWorks，2006 年 1 月）解释如何使用 Ajax 和 XMLHttpRequest 对象来创建一个永远也不会让用户等待服务器响应的请求/响应模型。
  
  
• “在应用程序中使用 Ajax 的时机”（developerWorks，2008 年 2 月）描述如何使用 Ajax 来改善您的站点并避免低劣的用户体验。
  
  
• 低调的 Ajax（ 作者 Jesse Skinner，O'Reilly Media）介绍如何编写总是适用所有人的 web 应用程序，即使 JavaScript 已经关闭。
  
  
• Behavioral Separation（作者 Jeremy Keith）介绍在网站设计中分离内容、样式和行为。
  
  
• Unobtrusify.com 提供一个低调的 JavaScript 的实际应用演示。
  
  
• Progressive Enhancement with JavaScript（作者 Aaron Gustafson）讨论了如何将渐进式增强哲学应用到客户端脚本编写。
  
  
• 低调的 JavaScript 的 7 条规则（作者 Christian Heilmann），他多年以来一直以低调的方式教授和实现 JavaScript。
  
  
• Separating Behavior From Structure（来自 Adobe 实验室）提供了低调的 JavaScript 的背景和示例。
  
  
• 查看 Unobtrusive JavaScript 网站。 
  
  
• “改善 Web 2.0 应用程序的性能”（developerWorks，2009 年 12 月）探索 不同的浏览器端缓存机制。
  
  
• “开发移动 Web Ajax 应用”（developerWorks，2010 年 3 月）解释如何使用 Ajax 构建跨浏览器的智能手机 web 应用程序。
  
  
• “Ajax 性能分析”（developerWorks，2008 年 4 月）检查用于发现和更正 Ajax 富应用程序中的性能问题的工具集。
  
  
• “JavaScript 框架比较”（developerWorks，2010 年 2 月）提供极大地增强 JavaScript 开发的框架的概览。
  
  
• developerWorks 的 developerWorks 中国网站 Web 开发专区 专门提供关于各种 Web 解决方案的文章。
  
  
• 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。
  
  
• 要收听面向软件开发人员的有趣访谈和讨论，请查看 developerWorks 播客。
  
  
• developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。
  
  

获得产品和技术

• Prototype 是旨在简化动态 web 应用程序开发的 JavaScript 框架。最新版本是 1.6 版。 
  
  
• 使用 IBM 产品评估试用版软件 改进您的下一个开发项目，这些软件可以通过下载或从 DVD 获得。
  
  

讨论

• 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和维基，并与其他 developerWorks 用户交流。
  
  
• 快速找到答案：访问 Web 2.0 Apps 论坛。
  
  
• 快速找到答案：访问 Ajax 论坛。