Modernizr测试

Question

为什么这会发出警报，是和否？

Modernizr.load([
    {
        test: Modernizr.cssgradients,
        yep: alert('Supports it!'),
        nope: alert('Oh, damn! This browser sucks!')
    }
]);

我在OS X上使用最新的chrome。

Answer 1

因为你直接在那里调用alert() ，所以alert() （总是undefined ）的结果被分配给yep和nope属性。 您需要在函数中包装alert()并指定该函数：

Modernizr.load([
    {
        test: Modernizr.cssgradients,
        yep: function () { alert('Supports it!') },
        nope: function () { alert('Oh, damn! This browser sucks!') }
    }
]);

这仍然无效，因为它不是yepnope的工作方式。 yep和nope应该是加载的JS文件的路径：

Modernizr.load([
    {
        test: Modernizr.cssgradients,
        nope: 'cssgradients-shim.js'  //-> load a JS file to draw your gradients
    }
]);

正如您自己发现的那样，如果您不想使用集成的yepnope.js，您可以使用传统方式使用Modernizr：

if (!Modernizr.cssgradients) {
    alert('Oh, damn! This browser sucks!');
}

Answer 2

使用yepnope前缀，可以运行预定义的命名函数。 注意：我在OS X上只测试了最新的chrome。

但是，要实现此目的，您将需要一个“虚拟URL”，例如，您计划在页面上加载的图像（您的徽标是一个很好的候选者）。

另外，因为Modernizr.load只对yepnope.apply方法进行别名， yepnope.apply您需要通过名称引用yepnope来添加前缀。

/*globals window */
(function (Modernizr) {
    "use strict";
    window.yepnope.addPrefix('function', function (resourceObj) {
        var dummyUrl = 'static/my_logo.png';
        resourceObj.noexec = true;
        window[resourceObj.url]();
        resourceObj.url = dummyUrl;
        return resourceObj;
    });
    // predefined functions
    window.alert_support = function () {
        window.alert('Supports it!');
    };
    window.alert_damn = function () {
        window.alert('Oh, damn! This browser sucks!');
    };
    window.alert_boom = function () {
        window.alert('boom');
    };
    // Modernizer.load is an alias for yepnope. See API at http://yepnopejs.com/.
    Modernizr.load([{
        test: Modernizr.cssgradients,
        yep: 'function!alert_support',
        nope: 'function!alert_damn'
    }, {
        test: Modernizr.rgba,
        yep: 'function!alert_boom'
    }]);
}(window.Modernizr));

当然，如果您不想污染全局window命名空间，可以将命名函数放在一个对象中并更改window[resourceObj.url](); to window.MyObj[resourceObj.url](); 。

这样做的真正好处是callback函数可以触发，命名函数也可以调用Modernizr.load ，和/或你可以编写一个比这里显示的泛型函数执行器更有目的的前缀。

Answer 3

yep和nope参数不接受函数作为参数。 它们应该是string或string array of strings指示要根据test成功还是失败加载脚本。 有关更多信息，请参阅Modernizr.load上的文档。