3

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

使用 HTML5placeholder无疑是最佳选择，但此时似乎仍然需要为旧版浏览器添加一个降级的解决方案（使用 javascript）。

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

问题是：既然他们都完成了几乎完全相同的事情，为什么还要包括两者呢？为什么不直接使用纯 javascript 解决方案，而放弃 HTML5 实现，直到它（几乎）被普遍接受？

诚然，对于这个特定的示例，添加 HTML5placeholder属性和hasPlaceholderSupport()函数只是添加了相当少的行 (4)，但由于需要降级的支持，是否有任何理由为渐进式冗余而烦恼？

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

提前致谢！

4

2 回答 2

3

有理由打扰。随着时间的推移，预计所有浏览器都将支持占位符属性。目前，只有少数浏览器不支持它（最重要的是 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 调用。

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

于 2012-01-31T12:17:51.653 回答
0

我看到的收获是您只能在必要时加载 jsFiddle。这节省了加载、解析和执行额外代码所需的时间。您的页面将加载得更快，并且本机 html5 支持可能比在 JavaScript 中模拟它更快。

于 2011-10-05T00:00:44.870 回答