我应该如何处理冗余在渐进增强/优雅降级中的作用?

Question

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

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

JsFiddle here: http://jsfiddle.net/leifparker/DvqYU/16/

问题是:既然它们都完成了几乎完全相同的事情，为什么要把它们都包含进去呢?为什么不直接使用纯javascript解决方案，而放弃HTML5实现，直到它(接近)被普遍接受?

当然，在这个特定的例子中，添加HTML5 placeholder属性和hasPlaceholderSupport()函数是一个相当小的行添加(4)，但由于降级的支持是需要的，有任何理由为累进冗余而烦恼吗?

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

提前感谢!

Answer 1

这样做是有原因的。随着时间的推移，预计所有浏览器都将支持占位符属性。目前，只有少数浏览器不支持它(最重要的是，IE 9及以下版本，以及Android浏览器)。因此，最终您的占位符回退代码将是不必要的。如果你在所有的浏览器上使用脚本发布网站，几年后，它将完全没有必要。

相反，只在必要时使用特性检测回退到JavaScript解决方案:

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

这就是Modernizr和yepnope.js(包含在Modernizr中)等库已经做的。我建议使用Modernizr并将您的占位符填充提取到placeholder-polyfill.js文件，因此您的代码可能看起来像这样:

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

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

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

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

对我来说，这更多的是一种心态，即在充分利用现代浏览器功能的同时，确保你的代码经得起未来的考验。

Answer 2

我看到的好处是，您只能在必要时加载jsFiddle。这节省了加载、解析和执行额外代码所需的时间。你的页面会加载得更快，原生html5支持可能比在JavaScript中模拟它要快。