javascript - 如何在禁用 Javascript 的情况下使我的 UI 为 'degrade gracefully'？

Question

我在 SO 上的多篇文章中读到，如果用户禁用了 Javascript，理想情况下您的页面应该“优雅地降级”。一般来说，我不确定应该做什么类型的事情来实现这一目标。

我有一大堆 HTML 用于配置“时间表”。根据选择框的值，显示不同的字段。

<select name="schedule.frequency"
    id="schedule.frequency" 
    onChange='updateScheduleFields()' >
        <option value="Manual">Run Manually</option>
        <option value="Monthly">Monthly</option>
        <option value="Weekly">Weekly</option>
        <option value="Daily">Daily</option>
        <option value="Hourly">Hourly</option>
</select>

When the select is updated, I hide the fields that are shown so that things like 'day of the week' or 'days of the month' aren't shown when it's inappropriate.我不太确定如何在没有 Javascript 的情况下优雅地降级，因为如前所述，某些字段完全不适合各种计划类型。

我的问题是:一般来说，如果没有 Javascript，我将如何制作禁用/隐藏不适当字段的东西，或者一些前/后处理是否正确降级？

我还会对可以很好地处理此类降级的特定站点感兴趣吗？

Answer 1

基本思想是你有一个标准的(非 js)方式来做某事，然后你添加 JavaScript 来覆盖默认行为。

在您的情况下，您有一个 select，因此非 js 行为是当您选择一个选项时，您提交一个表单，该表单加载显示不同字段的新版本页面.

您的 JavaScript(如果启用)将隐藏提交按钮并就地进行更新。

首选的思考方式是 progressive enhancement ，而且实现这一目标要容易得多。使您的页面像基本的 HTML 一样工作，然后使用 CSS 和 JavaScript 逐步增强它。这样一来，您就无需计算它是否会优雅地降级。

如果您的 JavaScript 和 CSS 位于单独的文件中而不是内联文件，则进行渐进式增强会更容易。使用 jQuery* 等 Ajax 库，您可以使用 CSS 选择器选择元素，以便为这些元素添加行为。在你的情况下，你会做 $('#schedule_frequency').change(updateScheduleFields) (我认为你的 id 中不应该有句点)。

* 免责声明:可以在没有库的情况下选择 JavaScript 中的 HTML 元素，并且存在 jQuery 以外的 Ajax 库。