Question

我一直在努力让Modernizr工作，但我认为我必须做错事，因为我似乎无法让它做任何事情。

我的最终目的是尝试测试webkit-line-clamp的浏览器支持，但我一直试图从文档的工作中得到一个例子，我甚至似乎都无法做到这一点。

所以，我去了Modernizr网站，选择了Modernizr.addtest()代码，并将其复制到我的html页面的头部，如下：

<script>
/*! modernizr 3.5.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-addtest-setclasses !*/
!function(n,e,o){function t(n,e){return typeof n===e}function s(){var n,e,o,s,i,a,l;for(var u in f)if(f.hasOwnProperty(u)){if(n=[],e=f[u],e.name&&(n.push(e.name.toLowerCase()),e.options&&e.options.aliases&&e.options.aliases.length))for(o=0;o<e.options.aliases.length;o++)n.push(e.options.aliases[o].toLowerCase());for(s=t(e.fn,"function")?e.fn():e.fn,i=0;i<n.length;i++)a=n[i],l=a.split("."),1===l.length?Modernizr[l[0]]=s:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=s),r.push((s?"":"no-")+l.join("-"))}}function i(n){var e=c.className,o=Modernizr._config.classPrefix||"";if(d&&(e=e.baseVal),Modernizr._config.enableJSClass){var t=new RegExp("(^|\\s)"+o+"no-js(\\s|$)");e=e.replace(t,"$1"+o+"js$2")}Modernizr._config.enableClasses&&(e+=" "+o+n.join(" "+o),d?c.className.baseVal=e:c.className=e)}function a(n,e){if("object"==typeof n)for(var o in n)u(n,o)&&a(o,n[o]);else{n=n.toLowerCase();var t=n.split("."),s=Modernizr[t[0]];if(2==t.length&&(s=s[t[1]]),"undefined"!=typeof s)return Modernizr;e="function"==typeof e?e():e,1==t.length?Modernizr[t[0]]=e:(!Modernizr[t[0]]||Modernizr[t[0]]instanceof Boolean||(Modernizr[t[0]]=new Boolean(Modernizr[t[0]])),Modernizr[t[0]][t[1]]=e),i([(e&&0!=e?"":"no-")+t.join("-")]),Modernizr._trigger(n,e)}return Modernizr}var r=[],f=[],l={_version:"3.5.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(n,e){var o=this;setTimeout(function(){e(o[n])},0)},addTest:function(n,e,o){f.push({name:n,fn:e,options:o})},addAsyncTest:function(n){f.push({name:null,fn:n})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var u;!function(){var n={}.hasOwnProperty;u=t(n,"undefined")||t(n.call,"undefined")?function(n,e){return e in n&&t(n.constructor.prototype[e],"undefined")}:function(e,o){return n.call(e,o)}}();var c=e.documentElement,d="svg"===c.nodeName.toLowerCase();l._l={},l.on=function(n,e){this._l[n]||(this._l[n]=[]),this._l[n].push(e),Modernizr.hasOwnProperty(n)&&setTimeout(function(){Modernizr._trigger(n,Modernizr[n])},0)},l._trigger=function(n,e){if(this._l[n]){var o=this._l[n];setTimeout(function(){var n,t;for(n=0;n<o.length;n++)(t=o[n])(e)},0),delete this._l[n]}},Modernizr._q.push(function(){l.addTest=a}),s(),i(r),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();n.Modernizr=Modernizr}(window,document);
</script>

然后添加以下代码（根据https://modernizr.com/docs的示例）：

<script>
Modernizr.addTest('itsTuesday', function() {
var d = new Date();
return d.getDay() === 2;
});
</script>

然后，在页面底部添加以下代码：

<script>
if (itstuesday())
{
alert("it's Tuesday");
}
else
{
alert("Not Tuesday");
}
</script>

我还测试了if (Modernizr.itsTuesday())和if (itsTuesday())以及if (Modernizr.itstuesday())以及我能想到的其他可能有效的内容，但我在控制台中遇到的所有错误都是{ {1}}和Uncaught ReferenceError: itstuesday is not defined等

Modernizr doc的注意事项“要注意的一点是，当添加到Modernizr对象时，特征检测功能的名称总是小写的。这意味着Modernizr.itsTuesday将不存在，但Modernizr.itstuesday将会存在。 “

我想我只是不理解我是如何正确使用或实现代码的，所以任何帮助都会非常感激。

如果进一步说，任何人都可以准确地建议我如何使用Modernizr来测试功能支持，例如Uncaught ReferenceError: Modernizer is not defined，那就更好了。不幸的是，尽管该网站有大量可以测试的东西，使用它们的默认代码集，但这个特定的属性似乎并不在其中。

谢谢！

更新：

好的，所以我设法让这个工作。我需要使用webkit-line-clamp和Modernizr.addTest()，然后添加测试：

Modernizr.testAllProps()

并按照以下方式使用它：

<script>
Modernizr.addTest('lineclamp', function() {
    return Modernizr.testAllProps('line-clamp');
});
</script>

在几个不同的浏览器中测试它并获得预期的结果。

Answer 1

从我对文档的阅读中，您可以这样做：

if(Modernizr.itsTuesday) {
  // do something
} else {
  // something else
}

测试似乎会产生属性，而不是函数。

JavaScript：无法使Modernizr工作

1 个答案: