JavaScript依赖性反弹：神话的渐进增强

核心要点

• 尽管AngularJS等客户端框架兴起，渐进增强(PE)仍然是解决Web开发问题（例如广泛的浏览器支持、维护和应用程序的未来发展）的最佳选择。
• PE并非针对禁用JavaScript的用户，而是关于在某些JavaScript功能可用时增强用户体验。它不像客户端框架那样对您的受众做出任何假设。
• PE的批评者经常声称这意味着支持旧浏览器，但实际上，为旧浏览器提供回退是PE的优势，而不是其主要目标。
• JavaScript框架可以提供短期收益，但可能会导致访问者减少和长期维护难题。它们牢牢地停留在现在，不像PE那样允许使用现代API而不会破坏应用程序。
• 渐进增强将内容、布局和功能分开，以便于维护，减少测试负担，支持各种设备，并确保SEO和可访问性。尽管客户端JavaScript框架兴起，这项技术仍然适用。

Louis最近在论坛主题“我们是否处于脚本依赖的反弹中？”中评论道：>我认为，在某种程度上，我们正处于某种脚本依赖的反弹中，这可能是一件好事。

简而言之——我同意。其他人也同意，包括Web专家PPK（Angular的问题）、Jeremy Keith（Angular动量）和Jake Archibald（渐进增强仍然很重要）。

• 尽管客户端框架迅速崛起，但相对较少的Web应用程序适合使用JavaScript框架。
• 渐进增强仍然是解决Web开发问题（例如广泛的浏览器支持、维护和应用程序的未来发展）的最佳选择。

让我们定义一下我们正在讨论的术语……什么是JavaScript依赖？

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

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

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

什么是渐进增强？

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

1. 您创建一个纯HTML应用程序，所有重要的处理都在服务器端完成。它可以在任何浏览器中运行；移动设备、Lynx、IE1.0或任何您使用的浏览器。
2. 您使用CSS增强布局。CSS是PE就绪的，因为浏览器会忽略它们不理解的属性。您可以使用媒体查询或@supports规则等选项进一步增强它。应用程序仍然可以在任何地方工作，但为具有现代CSS功能的浏览器提供了改进的体验。
3. 您使用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！

神话：渐进增强是一种由老前辈推荐的旧技术

引用Oddz的话：>客户端JavaScript框架的激增使您与其他“老前辈”一起成为少数派。

是的，谢谢！JavaScript反弹是由在Web上开发了相当长一段时间的人领导的。我们都是害怕新技术的顽固分子，无法与时俱进吗？也许吧。或者也许是因为我们从我们许多、许多历史错误中吸取了一些教训？JavaScript框架提出了熟悉的问题：

• 有些人像我们过去使用onclick处理程序一样混合HTML和功能，例如

• 它们针对特定浏览器。已经出现了“最佳浏览方式……”消息和标签的复苏。

• 它们对今天的Web做出了假设——例如JavaScript在任何地方都能工作，并且每页2MB是合理的。

• 他们没有规划未来。

JavaScript框架主要使开发人员受益——而不是用户。它们可以提供短期收益，但代价是访问者减少和痛苦的长期维护。而且不要忘记SEO。Google会索引JavaScript页面，但并非一定能够跟踪每个逻辑分支。除非您仔细编写代码，否则也很难链接回特定URL。渐进增强补充了Web的优势：

• 它将内容、布局和功能分开，以便于维护
• 您正在为Web编写防御性、容错、与设备无关的代码——而不是浏览器
• 您可以支持各种设备
• 您的测试负担减少了，因为您的应用程序在发生故障时仍然可以运行
• SEO和可访问性是内置的（或需要更少的努力）
• 网站和应用程序将在今天、昨天和明天发布的浏览器上运行
• 没有人反驳渐进增强的优势或提出更好的技术。

只有一个缺点：很明显，许多开发人员仍然不信任或不理解渐进增强。JavaScript依赖的反弹万岁！

关于JavaScript依赖和渐进增强的常见问题解答(FAQ)

什么是JavaScript依赖？

JavaScript依赖是指JavaScript代码依赖其他JavaScript文件或库才能正常运行。例如，如果一个JavaScript文件使用在另一个文件或库中定义的函数或变量，则称其依赖于该文件或库。依赖关系可以使代码更高效、更易于管理，但如果管理不当，它们也可能引入复杂性和潜在问题。

JavaScript中的渐进增强是什么？

渐进增强是一种设计理念，它首先强调核心网页内容，然后逐步在其之上添加更细致和复杂的演示和功能层。在JavaScript的上下文中，这意味着编写代码，为所有浏览器提供基本功能，同时为可以支持它的浏览器提供高级功能。

JavaScript依赖如何影响渐进增强？

JavaScript依赖可能会阻碍渐进增强的实现。如果一个JavaScript文件严重依赖于并非所有浏览器都支持的其他文件或库，则它可能无法为这些浏览器提供基本功能。这违背了渐进增强的原则，渐进增强旨在为所有用户提供核心功能。

渐进增强的优点是什么？

渐进增强提供了许多好处。它确保所有用户都可以访问网页的核心内容和功能，而不管其浏览器的功能如何。它还推广了语义HTML和关注点分离等良好的Web实践，并使网站更能抵抗JavaScript或CSS的潜在问题。

JavaScript依赖的缺点是什么？

虽然JavaScript依赖可以使代码更高效、更易于管理，但它也可能引入复杂性和潜在问题。如果依赖关系管理不当，可能会导致代码膨胀、加载时间变慢以及不同文件或库之间可能发生冲突等问题。它还可以使代码更难维护和调试。

如何有效地管理JavaScript依赖关系？

有几种策略可以有效地管理JavaScript依赖关系。这些策略包括使用Webpack或Rollup之类的模块捆绑器，可以将所有依赖项捆绑到单个文件中；使用npm或Yarn之类的包管理器，可以帮助您管理和更新依赖项；以及使用ESLint之类的代码检查器，可以帮助您发现依赖项的潜在问题。

如何在我的JavaScript代码中实现渐进增强？

在您的JavaScript代码中实现渐进增强包括编写代码，为所有浏览器提供基本功能，然后为可以支持它的浏览器逐步添加更高级的功能。这可以通过使用特性检测来检查浏览器是否支持某个特性然后再使用它，并确保您的代码在不支持某些特性的浏览器中可以优雅地降级来实现。

JavaScript依赖与客户端JavaScript框架之间的关系是什么？

客户端JavaScript框架通常严重依赖于JavaScript依赖关系。这些框架（例如React、Angular和Vue.js）包含许多内置功能和库，您的代码可以依赖它们。虽然这可以使开发更快、更容易，但如果这些依赖关系管理不当，也可能导致潜在问题。

渐进增强在客户端JavaScript框架中的作用是什么？

渐进增强可以在客户端JavaScript框架中发挥关键作用。这些框架通常包含允许开发人员实现渐进增强的功能，例如服务器端渲染和代码分割。这些功能可以帮助确保您的Web应用程序为所有用户提供核心功能，而不管其浏览器的功能如何。

如何在我的Web开发项目中平衡JavaScript依赖和渐进增强？

平衡JavaScript依赖和渐进增强需要仔细规划和良好的编码实践。您应该尽量减少代码的依赖关系，并确保它们得到妥善管理。同时，您应该努力实现渐进增强，确保您的Web应用程序为所有用户提供核心功能。这可能涉及使用特性检测、优雅降级和其他技术。

以上是JavaScript依赖性反弹：神话的渐进增强的详细内容。更多信息请关注PHP中文网其他相关文章！