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

当我在回答有关输入和文本区域中占位符文本最佳做法的另一个问题时,出现了这个问题.

使用HTML5占位符肯定是最佳选择,但在此时,仍然有必要为旧版浏览器(使用javascript)添加降级的解决方案.

JsFiddle此处:http://jsfiddle.net/leifparker/DvqYU/16/

问题是:既然它们都完成几乎完全相同的事情,那么为什么还要兼顾两者呢?为什么不仅仅利用纯JavaScript的解决方案,而放弃HTML5实现,直到(几乎)被普遍接受呢?

当然,在这个特定示例中,添加HTML5占位符属性和hasPlaceholderSupport()函数是对行(4)的相当少的添加,但是由于需要降级的支持,是否有任何理由要烦恼渐进冗余?

我确定双方都有理由,并且我很想听到这一点.

提前致谢!

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

相反,仅在必要时通过使用功能检测来回退到JavaScript解决方案:

>您不必在已经支持占位符属性的浏览器中运行一些JavaScript代码.
>您只能在必要时加载回退脚本,以节省一些字节.

这就是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调用.

对我来说,它更像是一种对代码进行未来验证的心态,同时已经利用了现代浏览器的功能.

转载注明原文:javascript-如何解决冗余在渐进增强/优雅降级中的作用? - 代码日志