当JS关闭时，AJAX应用程序优化降级的策略是什么？

Question

我应该遵循哪些一般准则来优雅地降级基于JS的Web应用程序？有这样的指导方针吗？是否有任何公共页面可以作为好/坏的例子？有任何常见的陷阱吗？

Answer 1

使用progressive enhancement创建应用程序，而不是正常降级。这意味着首先你应该让你的应用程序在没有Javascript的情况下正常工作（例如，你需要所有的链接在服务器上有相应的操作）。然后，一旦有效，您可以通过在其上添加Javascript和AJAX来增强您的应用程序。

这显然不仅适用于AJAX调用，而且适用于任何Javascript。例如，在我的一个应用程序中，我想为用户提供一种从一个范围中选择数字的方法。为此，我打算使用Javascript创建一个滑块小部件，以便用户可以将滑块移动到他们想要的数字。但是，为了让页面在没有Javascript的情况下仍然有效，我开始使用包含所有可能值的<select>，并构建我的滑块小部件以在<select>之上开始/工作。这样，使用Javascript可用/启用的用户将获得更丰富的体验，但不能使用Javascript的用户仍然可以完全使用该应用程序。

<强>资源：

• Progressive Enhancement with JavaScript
• Graceful degradation versus progressive enhancement

Answer 2

最好的策略是渐进增强，您可以创建一个网站，所有用户都可以查看所有内容，无论他们有什么浏览器或残障。这个你的css和javascript之上的那一层为那些能够利用它的人创造了更丰富的体验。

始终使用服务器端验证。这样，您的表单仍然按照您的预期方式工作，黑客更难绕过验证步骤。

Answer 3

使用“web 1.0”技术构建一个没有AJAX功能的站点。然后，在JS中，增强同一站点以使用AJAX。简而言之，这是Progessive Enhancement的简短摘要。

以下是一些指示：

• 确保关注的清晰分离
  • HTML应该仅限内容且尽可能简洁明了
  • CSS应该用于所有样式和设计方面（如果图形只是眼花缭乱，那么它的呈现，而不是内容）
  • JS应该用于增强体验的行为，但对其并不重要
• 仔细考虑客户端如何与服务器端进行交互
  • 然后实现服务器端逻辑，使其更像服务，然后是网页（它需要为“1.0”和AJAX版本提供相同的功能。

然后您的Javascript可用于执行一些额外的工作：

• 在显示页面之前，它可能会进行一些标记转换（向内容添加额外的HTML标记，只有“眼睛糖果”/增强版本才需要它）
• 禁用/隐藏/删除使用增强版时不需要的元素。例如，某些表单可能会通过AJAX自动提交 - 增强版不需要提交按钮，因此可以将其删除。

最后，你不仅拥有一个可以在没有JS的情况下运行的网站，而且还有一个可以被今天各种各样的浏览器消费的网站（移动，电子阅读器，屏幕阅读器，平板电脑） ，桌面等）。您还将拥有一个基准版本的站点，它满足了提供内容的主要关注点 - 并且能够以其他方式增强内容以定位其他平台（您可以编写移动增强版本）或使用相同的服务器-logic来自桌面小部件等）

Answer 4

来源：https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement

优雅降级是构建您的Web功能的实践，以便它在更现代的浏览器中提供一定级别的用户体验，但它也会优雅地降低到较旧级别的用户体验旧浏览器。这个较低级别不适合您的网站访问者使用，但它仍然为他们提供了他们来到您的网站使用的基本功能;事情不会为他们打破。

渐进增强是类似的，但它反过来做事情。首先，建立所有浏览器在呈现网站时能够提供的基本用户体验级别，但您还可以构建更高级的功能，这些功能将自动提供给可以使用它的浏览器。

换句话说，优雅的降级从复杂性的现状开始，并试图修复较少的体验，而渐进式增强从一个非常基本的工作示例开始，并允许对未来环境的不断扩展。优雅地退化意味着回头看，而逐步提升意味着向前看，同时保持脚踏实地。

Answer 5

所有链接都应指向可以在没有JS支持的情况下打开的真实URL。之后，您可以使用JS为AJAX请求设置onclick事件。 形式和其他事情一样。