现代化测试

发布于 2024-12-10 13:45:02 字数 244 浏览 2 评论 0原文

为什么这会同时发出警报，是的还是错误的？

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

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

原文

How come this alerts both, yes and false?

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

I'm using the latest chrome on OS X.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不乱于心 2024-12-17 13:45:02

因为您直接在那里调用 alert()，并且 alert() 的结果（始终 undefined）被分配给 yep 和 nope 属性。您需要将 alert() 包装在一个函数中，然后分配该函数：

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

这个 still 不起作用，因为它不是 yepnope 的工作方式。 yep 和 nope 应该是加载的 JS 文件的路径：

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

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

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

Because you're calling alert() directly there, and the result from alert() (always undefined) is assigned to the yep and nope properties. You need to wrap alert() in a function and assign that function instead:

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

This still won't work because it's not how yepnope works. yep and nope should be paths to JS files that are loaded:

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

As you discovered yourself, if you don't want to use the integrated yepnope.js, you can just use Modernizr the traditional way:

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

回复收藏 0 原文

沦落红尘 2024-12-17 13:45:02

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

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

此外，由于 Modernizr.load 仅为 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]();到window.MyObj[resourceObj.url]();。

其真正的力量在于回调函数触发，命名函数也可以调用 Modernizr.load ，和/或者您可以编写比通用函数更有目的的前缀此处显示的执行者。

With yepnope prefixes, it's possible to run predefined, named functions. Note: I have only tested this with latest chrome on OS X.

However, for this to work, you will need a "dummy URL", e.g., an image that you plan to load on the page (your logo is a good candidate).

Also, because Modernizr.load only aliases the yepnope.apply method, you will need to refer to yepnope by name to add a prefix.

/*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));

Of course, if you don't want to pollute the global window namespace, you could put your named functions in an object and change window[resourceObj.url](); to window.MyObj[resourceObj.url]();.

The real power of this is that callback functions fire, the named functions can call Modernizr.load as well, and/or you could write a more purposeful prefix than the generic function executor shown here.

回复收藏 0 原文