javascript - 我应该如何解决冗余在渐进增强/优雅降级中的作用？

Question

这个问题是在我回答关于 inputs 和 textareas 中 placeholder 文本的最佳实践的另一个问题时出现的。

使用 HTML5 placeholder 无疑是最优的，但在这个时间点上似乎仍然有必要为旧浏览器添加降级解决方案(使用 javascript)。

JsFiddle 在这里:http://jsfiddle.net/leifparker/DvqYU/16/

问题是:既然它们都完成了几乎完全相同的事情，为什么还要费心把两者都包括在内呢？为什么不直接使用纯 JavaScript 解决方案，而放弃 HTML5 实现，直到它(接近)被普遍接受？

当然，在这个具体示例中，添加 HTML5 placeholder 属性和 hasPlaceholderSupport() 函数是第 (4) 行中相当少的添加，但是由于降级需要支持，是否有任何理由为渐进式冗余而烦恼？

我确信双方都有理由，我很想听听。

提前致谢!

Answer 1

有理由打扰。随着时间的推移，预计所有浏览器都将支持占位符属性。现在，just a few browsers do not support it (最重要的是 IE 9 和低级版本，以及 Android 浏览器)。因此，最终，您的占位符回退代码将是不必要的。如果您使用适用于所有浏览器的脚本来发布网站，几年后将完全没有必要。

相反，通过使用特征检测仅在必要时回退到 JavaScript 解决方案:

1. 您不必在已经支持占位符属性的浏览器中运行一些 JavaScript 代码。
2. 您可以仅在必要时加载回退脚本，以节省几个字节。

这就是 Modernizr 和 yepnope.js(包含在 Modernizr 中)等库已经在做的事情。我建议使用 Modernizr 并提取占位符 polyfill到 placeholder-polyfill.js 文件，因此您的代码可能如下所示:

Modernizr.load({
  test: Modernizr.placeholder,
  nope: 'placeholder-polyfill.js'
});

如果您只想要 yepnope.js 并运行您自己的特征检测函数:

yepnope({
  test: hasPlaceholderSupport(),
  nope: 'placeholder-polyfill.js'
});

这样，您可以节省资源加载并提高大多数浏览器的性能。将来，所有浏览器都将通过测试，从而提高性能。然后，您可以简单地删除 yepnope.js/Modernizr 调用。

对我来说，它更像是一种让您的代码面向 future 的心态，同时已经利用了现代浏览器的功能。