有没有办法一次执行所有 Modernizr 测试?

Posted

技术标签:

【中文标题】有没有办法一次执行所有 Modernizr 测试?【英文标题】:Is there a way to perform all Modernizr tests all at once? 【发布时间】:2013-09-04 09:46:32 【问题描述】:

我是 Modernizr 的新手,我只是在寻找一种简单的方法来检查浏览器的整体兼容性。我生成了一个 Modernizr 脚本,仅测试我的 Web 应用程序中最重要的组件,这些组件高度依赖于 html5、CSS3 和现代 javascript 方法。有没有办法同时运行所有这些测试?查看文档,我看到了很多方法来逐个测试每个功能,但我没有看到一种方法可以一次完成所有操作。我希望做这样的事情:

伪代码

if (Modernizr.testAll()) 
  // Load site
 else 
  // Redirect to compatibility page

【问题讨论】:

【参考方案1】:

事实证明,所有测试都作为布尔值直接存储在 Modernizr 对象中,因此,如果您正在构建一个具有大量特性依赖项的应用程序并且想要一次测试它们,请使用以下命令:

var supported = true;
for (var feature in Modernizr) 
  if (typeof Modernizr[feature] === "boolean" && Modernizr[feature] == false) 
    supported = false;
    break;
  

【讨论】:

我最近认为Modernizr.__all__ 或其他东西可能很有用——尤其是使用新的Modernizr.on() API:Modernizr.on('__all__', function () /* all async tests have run */ );...@David 你怎么看? @StuCox:我认为那会很棒——在我的情况下肯定会有用。 这对我来说效果不佳:它只循环所有测试的一小部分。 我在一年前发布了这个...... Modernizr 对象可能已更改。我建议你看看它,看看你是否可以修改我的代码来工作。【参考方案2】:

我一直在寻找同样的东西,我想出了以下代码:

for (var feature in Modernizr) 

    if (typeof Modernizr[feature] === "boolean")
    
        console.log("Modernizr_" + feature + ": " +Modernizr[feature]);

        for (var subFeature in Modernizr[feature])
        
            if (typeof Modernizr[feature][subFeature] === "boolean")
            
                console.log("Modernizr_" + feature + "_"+ subFeature + ": " + Modernizr[feature]);          
            
        
    



HTH!

【讨论】:

【参考方案3】:

一种更简洁的方式,对我有用,而且都在一行中

Object.values(Modernizr).indexOf(false) === -1

【讨论】:

如果你尝试解释你的答案可能会更好。【参考方案4】:

我个人为此苦苦挣扎。但最终在一天结束时找到了答案。您可以在下面使用我的代码,它将显示 Modernizr 功能及其值的完整列表:

<script type="text/javascript">

    $(document).ready(function () );
</script>

<script type="text/javascript">
    $(function () 
        function ListAllMOdernizrFeatures() 


            var TotalString = "Modernizr features<br><br>";
            var arrModernizrFeatures = new Array();


            for (var feature in Modernizr) 

                if (typeof Modernizr[feature] === "boolean") 
                    console.log("Modernizr_" + feature + ": " + Modernizr[feature]);
                    arrModernizrFeatures.push("Modernizr." + feature + ": " + Modernizr[feature])

                    for (var subFeature in Modernizr[feature]) 
                        var ModernizrFeature = Modernizr[feature];
                        if (typeof ModernizrFeature[subFeature] === "boolean") 
                            arrModernizrFeatures.push("Modernizr." + feature + subFeature + ": " + ModernizrFeature[subFeature]);
                        

                    
                

            

            arrModernizrFeatures.sort(); // in lexicographical order

            for (var PropertyIterator = 0; PropertyIterator < arrModernizrFeatures.length; PropertyIterator++) 
                TotalString += PropertyIterator + 1 + ". " + arrModernizrFeatures[PropertyIterator] + "<br>";
            ;
            document.getElementById("ListFeatures").innerHTML = TotalString;
        

        setTimeout(ListAllMOdernizrFeatures, 100);

    );

</script>

【讨论】:

【参考方案5】:

使用现代 Javascript (ECMAScript 2017),您可以像这样使用 Object.values 方法:

if (Object.values(Modernizr).indexOf(false) !== -1) 
    console.log('Update your browser (and avoid IE/Edge ?)')

Object.values 会将Modernizr 中的所有测试结果提取到一个数组中,然后indexOf(false) 将测试是否有任何数组项为假(即测试失败)。

【讨论】:

【参考方案6】:

如果您想在浏览器中显示所有功能检测,请使用此代码:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => 
        if (typeof Modernizr[feature] === "boolean") 
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(
                element
            );
            console.log(feature, Modernizr[feature]);
        
        
    );
</script>
</body>
</html>

【讨论】:

【参考方案7】:

如果您想在浏览器中显示所有功能检测,请使用此代码:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Modernizr Test</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>

</head>
<body>
<h1>Feature Detection</h1>
<div id="feature-detection-result">

</div>
<script>
    var features = Object.keys(Modernizr);
    features = features.sort();

    features.forEach(feature => 
        if (typeof Modernizr[feature] === "boolean") 
            var element = document.createElement('p');
            element.innerHTML = feature + ' ' + Modernizr[feature];
            document.getElementById('feature-detection-result').appendChild(element);
        
    );
</script>
</body>
</html>

【讨论】:

以上是关于有没有办法一次执行所有 Modernizr 测试?的主要内容,如果未能解决你的问题,请参考以下文章

使用 ASSERT_DEATH 时,有没有办法在应用程序终止后自动继续执行所有测试?

使用 Modernizr 测试平板电脑和移动设备 - 征求意见

使用modernizr检测vh,vw with calc

Modernizr 只是为了快速检查?

text 在所有其他脚本之前排队Modernizr

有没有办法在 postgres 测试容器中删除所有表或截断