Modernizr 只是为了快速检查？

Posted 2023-03-05

【中文标题】Modernizr 只是为了快速检查？

【英文标题】：Modernizr just for one quick check?

【发布时间】：2011-12-22 01:07:10

【问题描述】：

我想检查运行我页面的浏览器是否 能够处理'html 5占位符'

我知道我可以添加以下 javascript 检查：

!Modernizr.input.placeholder

但是为了一次检查而导入一个库是否值得？

modernizr 如何为我做到这一点（我的意思是它是如何在幕后实现的）？

【参考方案1】：

如果您想检查placeholder 支持，那么您需要做的就是；

var placeholderSupport = "placeholder" in document.createElement("input");

并回答您的其他问题； 不，包含 1 行 JS 的整个 Modernizr 库绝对没有意义（Modernizr 是 1000 多行......看图 :)）*

^{*是的，没有缩小，但概念仍然存在}

【讨论】：

澄清一点，Modernizr 提供了用于研究和开发目的的未压缩源。 Modernizr 不提供包含所有内容的缩小版本。我们鼓励您创建自定义构建。因此，这不是单线与 1000+ 线的比较。

此外，Modernizr 是边缘案例的存储库。例如，对 input type=range 的测试支持充满了危险。每次都发明自定义测试是一种很好的方式来结束像 UA 嗅探一样脆弱的东西。人们以前使用 HTML5 表单输入测试来完成它，但他们所有“如此简单”的检测现在都被破坏了。免责声明：很明显，我写的是 Modernizr。 :p

公平地说，gzip 后它有 87 到 500 字节的差异 :)

【参考方案2】：

例如，您只需选择“输入属性”即可从modernizr 中获取所需的内容并生成构建

http://www.modernizr.com/download/

【参考方案3】：

It's open-source. Go read it.

Modernizr['input'] = (function( props ) 
  for ( var i = 0, len = props.length; i < len; i++ ) 
    attrs[ props[i] ] = !!(props[i] in inputElem);
  
  return attrs;
)(('autocomplete autofocus list placeholder max min ' +
    'multiple pattern required step').split(' '));

【讨论】：

诚然，对于不熟悉该技巧的人来说，该来源很难理解。

如果你以前没有见过!! 成语，你可能会摸不着头脑，但很容易理解它的要点，即modernizr 只是检查属性是否存在并且没有别的了。

@mquander 源代码有点超出我的理解。为什么两个感叹号？？？

@lorenzo：这是一种将 Javascript 值强制为真或假的简洁方法。例如，如果props[i] 是42，那么!props[i] 是false，所以!!props[i] 是true。

@Matt：我实际上不知道——如果你在五分钟前问我，我会猜到in 总是返回一个布尔值（但我只为两个人编写了 Javascript个月。）假设：也许这是在某些旧浏览器从in返回其他值之后进行清理的一种方式？

【参考方案4】：

找到这个：http://davidwalsh.name/html5-placeholder

代码：

function hasPlaceholderSupport() 
  var input = document.createElement('input');
  return ('placeholder' in input);

还有一个备用解决方案，点击链接