本节书摘来自异步社区《JavaScript设计与开发新思维》一书中的第2章，第2.4节，作者：【美】Larry Ullman著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.4 关键的开发方法

在查看代码之前，应该详细地讨论3种开发方法。你选择的方法（可能同时采用不止一种方法）将会影响所编写的代码，更重要的是，影响最终用户的体验。

2.4.1 功能退化
script元素为任何HTML页面添加JavaScript，与此相反的是noscript元素，它用于页面在浏览器不支持JavaScript时提供一个替代信息或者替代内容：

<noscript>Your browser does not support JavaScript!</noscript>
如果JavaScript没有启用，将向用户显示在标记之间放置的任何内容。

统计数字各不相同，但是一般来说，访问网站的大约1%～3%客户出于某种原因无法执行任何JavaScript，这些客户包括：

• 有意在Web浏览器中禁用JavaScript的人；
• 运行noscript的人，这个Firefox扩展实现了白名单方法，允许在指定网站的页面上运行JavaScript；
• 使用读屏器（也就是视力受损者的辅助设备）的人；
• 使用移动或者游戏设备浏览器的人；
• 通过不支持 JavaScript 的控制台软件（如命令行程序 wget 或curl）连接的人；
• 不是实际的人，而是机器人—例如搜索引擎。

这些情况在整个市场上所占比例很小，但是如何处理这些情况完全由你决定，对此有3种方法：

（1）假装无JavaScript客户不存在；

（2）应用功能退化；

（3）应用渐进增强。

在这里我不打算告诉你如何开展工作，但是第一种选择不好，特别是现在，移动和游戏设备的使用不断增多，更不用说还有酝酿中的新技术。可是，许多开发人员并没有认识到有些用户无法执行JavaScript。在他们开发的网站上，最终的结果可能是个损坏的页面，没有关于错误的任何解释。诚然，网站有正当的理由需要JavaScript，但是无JavaScript的客户必须得到有关这一要求的通知。如果对这一可能性没有准备，最终用户会觉得网站不合格，对Web开发人员（和/或拥有这一网站的公司）也有不良的影响。

多年以来，第二种选择是最常见的反应，现在仍然偶尔能看到。功能退化是这样一种策略：你按照自己的意愿设计一个功能完整的网站，然后为无法使用你设计的网站的设备提供一个备用界面，或者表示需要JavaScript的一条信息。听起来很熟悉？是的，这实际上就是noscript标记所完成的工作。功能退化比起简单地忽略问题是个很大的改进，两者之间主要的差别是功能退化让用户知道问题的存在以及相应的解决方案（也就是启用JavaScript）。但是还有一种更好的办法—渐进增强。

2.4.2 渐进增强
渐进增强（progressive enhancement）在2003年第一次提出，直至今天仍在采用。渐进增强站到了功能退化的反面：功能退化从想要得到的功能开始，在完整功能不受支持的情况下提供备用内容，而渐进增强从最小功能的一个基线开始，然后在此基础上改进—增强用户体验—添加仅在客户支持时有效的“丰富”功能（图2.7）。渐进增强不仅确保所有客户都能够使用你的网站，我个人还发现，使用这一方法进行开发更加简单。

渐进增强不仅涉及JavaScript，还涉及CSS。描述渐进增强这一主题需要整本书的篇幅（例如Designing with Progressive Enhancement，New Riders，2010），我无法在这里花太多的篇幅，但是对这一处理过程的理解比你想象的要简单。

从一开始，你就应该使用与标准兼容、结构良好、清晰的语义HTML。语义HTML使用HTML标记，清晰地表示内容的意图或者意义，而不是内容表现的方式。例如，你应该停止使用i标记来表示斜体文本，而代之以表示强调的 em。谈到样式，对于语义HTML，所有表现都转移到所属的CSS中。在没有一个标记能表示页面组件意义的情况下，则使用类。实际上，常用的语义类如footer、header和nav都是HTML5中新元素的灵感来源。

在创建一个好的HTML页面之后，应该对其进行验证，确认它没有问题并且不会使浏览器进入怪癖模式。你还应该测试HTML和基本的CSS在所针对的浏览器中是否都能正确显示。完成了这一工作之后，对于能够处理更现代化特性的客户，你就可以改进他们的体验。作为例子，我们回到第1章中讨论过的注册表单。

该表单以及所有表单的基线功能是：当表单提交时，将表单数据发送给一个服务器端脚本。服务器端脚本执行验证并相应作出反应。对于注册表单，这意味着如果数据没有错误，用户被登记到数据库中，否则向用户报告这些错误，使其可以更正并且重新提交表单（参见图1.3）。创建包含表单的语义HTML页面之后，渐进增强过程的下一步是创建处理表单的服务器端脚本，这一步完成了基线功能，并且不包含任何JavaScript（或者高端的CSS）。在这点上，我认为这一方法较为简单：因为你首先确认简单的过程可行，然后再试验更复杂的方法（例如Ajax，它的调试要更难一些）。

最后一步是应用CSS和JavaScript添加更高级的功能和设计层次，但是这些层次需要浏览器的支持。当然，本书的焦点就是JavaScript。为了确定浏览器是否支持一个特性，现代的JavaScript程序员使用第1章中已经提到过的对象检测（object detection）。这一方法创建可靠的跨浏览器JavaScript，不用考虑浏览器的类型或者版本。而且，对象检测有着杰出的简洁性：检查浏览器是否支持特性X，如果支持，则使用特性X。你将在接下来的几页中看到具体的实现。

通过这一过程，适用的浏览器将得到渐进增强，网页也不会遗漏任何客户。这绝对是“鱼和熊掌兼得”的解决方案！

2.4.3 无干扰的JavaScript
在进入实际的代码之前（早该如此，对吗？），还要介绍一个概念；无干扰（Unobtrusive）JavaScript。回到过去的日子，JavaScript常常不受限制地散布在HTML中，例如，一个链接被单击时可能调用一个函数：

<a href="javascript:createWindow();">A Link</a>
或者，表单提交时调用不同的函数：

<form action="somepage.php" method="post"
onsubmit="return validateForm();">

上述的两个代码示例现在仍然能正常工作，但是这种方法已经不受欢迎，这也是很合理的。首先，HTML页面中嵌入的JavaScript使得整个页面的代码更难以阅读，也更难维护。逐行浏览HTML来编辑嵌入的JavaScript非常不切实际。其次，嵌入式JavaScript在3个方面违反了渐进增强的原则：

带有嵌入JavaScript的HTML显然不只有语义含义；
它假定客户能够处理JavaScript；
无法使用嵌入JavaScript应用可靠的对象检测技术。
因此，现代JavaScript的规则很简单：在script标记之间或者外部文件中放置所有的JavaScript。

注意： 避免在HTML中使用空链接（指向#或JavaScript函数调用的链接），因为这对于没有JavaScript能力的浏览器将会失败。