JavaScript依赖性反弹：神话的渐进增强-js教程-PHP中文网

客户端框架的使用有所增加。它们提供类似服务器端的编码模式，例如MVC、模板视图、可重用组件、表单验证等等。AngularJS可能是最著名和最流行的，但它不是唯一的解决方案。与服务器端框架不同，客户端替代方案必须在启用现代JavaScript的浏览器上运行。如果没有JavaScript，它们就会失败。TIDAL就是一个典型的例子；如果JavaScript不可用，用户将看到一个空白页面。没有内容，没有错误，也没有注册表单。虽然几乎没有理由不显示消息，但JavaScript依赖型应用程序有一些很好的用例：

原型快速模拟网站和应用程序，因为客户端框架提供了丰富的组件和快捷方式。
纯客户端应用程序如果您的应用程序很简单，并且除了初始下载之外不需要服务器交互，那么JavaScript框架可能是一个不错的选择（假设您可以删除不需要的内容）。
内部企业应用程序当您了解您的受众及其使用的设备时，强制使用JavaScript就不是问题。Angular最初是为企业应用程序设计的。
精细的界面考虑一下动作游戏、Google地图和文档。开发无JavaScript的替代方案是徒劳的。Google创建了一个Google地图的基本HTML版本，但它实际上是一个不同的应用程序，并在2010年被放弃。

还有其他情况，但大多数面向公众的网站和应用程序不属于这些类别。没有人会阻止您使用客户端框架，但是，当您有一把锤子时，所有东西看起来都像钉子。再次引用Louis的话：>开发人员似乎只是为了使用炫目的新工具而使用它们，而不是因为它们解决了实际问题。

什么是渐进增强？

渐进增强(PE)不是一项技术，而是一种开发方法。我在2009年编写了一些教程和示例，但这个概念自2003年以来就一直在讨论。您首先建立一个基本的用户体验级别，然后在浏览器支持时添加更高级的功能。将PE推向逻辑的极致：

您创建一个纯HTML应用程序，所有重要的处理都在服务器端完成。它可以在任何浏览器中运行；移动设备、Lynx、IE1.0或任何您使用的浏览器。
您使用CSS增强布局。CSS是PE就绪的，因为浏览器会忽略它们不理解的属性。您可以使用媒体查询或@supports规则等选项进一步增强它。应用程序仍然可以在任何地方工作，但为具有现代CSS功能的浏览器提供了改进的体验。
您使用JavaScript增强功能。JavaScript是最不稳定的层，因为语言和API支持因浏览器而异。假设它运行，您会在使用它们之前测试可用性。例如，当支持canvas或SVG时，您可以将数据表转换为漂亮的图表。

每个浏览器都会收到它可以处理的最佳应用程序。可能没有两个浏览器提供完全相同的体验。移动优先响应式设计和较少使用的离线优先是渐进增强技术的示例。让我们检查一下PE的批评。

神话：没有人禁用JavaScript

很少有人知道JavaScript是什么。很少有浏览器允许用户（轻松）禁用JavaScript。这是绝对正确的。PE批评者随后得出结论：>那些没有JavaScript的人得到他们应得的。

假设JavaScript将始终、随处、随时达到您的应用程序所需的级别是危险的。每个人都有JavaScript，对吧？说明了这一点。渐进增强并非针对禁用JavaScript的用户。它是在某些JavaScript功能可用时增强用户体验。当JavaScript被禁用时，应用程序可能会提供一个糟糕的界面，但用户仍然会得到某些东西。

神话：没有人使用旧浏览器

我们所说的“旧”是什么意思？对于大多数开发人员来说，它是任何发布超过十二个月的浏览器。并非每个人都能使用最新最好的应用程序：

大型组织和政府部门
残疾人
发展中国家的人民
社区中较不富裕的阶层
任何使用iPhone 5.0或Android 4.0及以下版本的人。

这些部门可能对您来说并不重要。但是他们永远都不重要吗？渐进增强不对您的受众做任何假设。客户端框架并非如此。那些无法使用您的应用程序的人将从服务器日志中消失。它很快就会变成一个自我实现的预言：“没有人在旧浏览器上使用我们的应用程序，所以我们可以继续这样做……”

神话：渐进增强是反JavaScript的

渐进增强包含Web的基本优势。可以开发一个可以在世界任何地方的任何网络设备上运行的站点或应用程序。设备越好，用户体验就越好。客户端框架使JavaScript成为绝对的依赖项。您不再为Web进行编码。您的应用程序使用Web作为特定运行时引擎的交付机制。浏览器是您的操作系统，更新可能会破坏您的应用程序。

神话：渐进增强对用户和设备做出假设

PE是关于不做假设。您不假设任何事情——这是这项技术的核心前提。JavaScript框架会让您误以为每个人都在使用功能强大的设备上的强大浏览器。我们以前做过这些假设。这与假设每个人都在使用宽带有什么不同？或者每个人至少都有一个17英寸、至少960像素宽的屏幕？或者每个人现在和将来都会使用IE6？

神话：渐进增强意味着支持过时的浏览器

渐进增强批评者认为您会花费所有时间处理旧浏览器。实际上，恰恰相反：您永远不需要处理旧浏览器，因为适当的回退已经到位。支持旧浏览器是PE的优势——而不是目标。您可以支持最差的浏览器，但您可以建立任何您喜欢的基线。例如，我目前正在开发一个应用程序，其中addEventListener是大多数JavaScript运行的要求。因此，IE8及以下版本将无法显示功能增强。我可以解决这个问题，但这不值得投资，因为它是一个没有旧IE用户的企业应用程序。但是，IE8用户仍然可以使用该系统，如果需要，可以对其进行改进。

神话：JavaScript框架应用程序更酷

您可以使用PE技术创建外观相同的应用程序。混淆的原因是大多数JavaScript框架提供了一系列外观良好的预先开发的小部件。这些相同的小部件可以在渐进增强型应用程序中使用，但是，如果没有JS，它们将回退到基本的HTML替代方案。PE还允许您使用尚未出现在任何浏览器中的现代HTML、CSS和JavaScript API。考虑一下Fetch API——XMLHttpRequest的现代替代品。它支持最少，但我可以使用它而不会出现问题，因为我可以回退到XMLHttpRequest或服务器请求。JavaScript框架牢牢地停留在现在——而不是未来。

神话：渐进增强阻碍了Web发展

或者，更具体地说，客户端框架处于技术前沿，推动着Web向前发展。对不起，但这是一种错觉。类似AngularJS的框架实现了神奇的功能，但是，深入研究一下，您仍然在使用HTML、CSS、JavaScript和DOM操作。充其量，它是一种抽象。最坏的情况是，它是一种干扰。您的客户端框架仅与开发它的浏览器一样好。AngularJS 2.0是完全重写的，因为在AngularJS 1.x发布时，Object.observe()和Web Components等功能并不常见。该框架强制您使用旧技术，但会向您隐藏实现。PE允许您使用任何现代API而不会破坏您的应用程序。祝您从Angular 1升级好运……

神话：JavaScript框架使开发更简单

这部分是正确的——但仅当您开始构建应用程序时。您可以访问一系列控件，这些控件可以缩短初始开发时间。但是，您随后就被困在该框架的范围内，这可能会导致以后出现问题。假设您的应用程序已经运行了一段时间，并且客户要求支持BrowserX。它被一个主要客户使用，并且并非特别旧；Blackberry浏览器、iPhone 4、Android 3.3等。他们可能期望开发时间为几天，但如果您的JavaScript框架不兼容，则可能无法实现。对于使用PE技术开发的应用程序，这个问题可能永远不会出现；您可能已经支持该浏览器。可以添加进一步的增强功能，而无需进行重大重写。

神话：渐进增强是双倍的工作量

这是批评者最喜欢的引言。唯一说PE工作量过大的人是那些从未尝试过它或以某种方式尝试失败的人。如果您从一开始就没有考虑PE，它只会花费两倍的时间。试图将PE改造到现有应用程序中注定要失败——对于依赖JavaScript的应用程序尤其如此。让我们考虑一个简单的示例，例如搜索查询结果的分页列表。第一页加载返回所有HTML。它很快，JavaScript无需执行任何操作。在幕后，我们使用数据库查询并将结果插入HTML模板中。您可以快速调整相同的服务以将结果作为JSON数据或不带标题和页脚的结果HTML返回。当用户点击“第2页”时，将显示第二页结果：

使用JavaScript，我们可以拦截点击并使用Ajax技术来获取该页结果。可以使用innerHTML将HTML数据插入页面。或者，我们可以使用第1页作为返回的JSON数据的模板。
如果JavaScript、XMLHttpRequest或Fetch不可用——或Ajax调用失败——我们可以请求第二页完整的HTML。

这需要更多工作，但这绝对不是双倍的工作量。我们受益于跨浏览器容错解决方案。

神话：渐进增强毫无意义——网站发展或消亡

此论点背后的逻辑是网站最终会过时。因此，您可以使用一个在特定时间点针对特定技术的框架。我希望如此。如果您的代码很好，它将被使用的时长远超您的预期。糟糕的代码存活时间更长，因为没有人想触碰它。但是，再次使用渐进增强，您除了Web将继续作为基于客户端/服务器的基于HTML的系统之外，不做任何假设。Web需要从根本上改变才能使您的应用程序失败——它将不再是Web！