Prueba de modernización

Question

¿Cómo es que esto alerta tanto, sí como falso?

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

Estoy usando el último Chrome en OS X.

Answer 1

Porque estas llamando alert() directamente allí y el resultado de alert() (siempre undefined) se asigna al yep y nope propiedades. Necesitas envolver alert() en una función y asignar esa función en su lugar:

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

Este todavía no funcionará porque no es como Yepnope obras. yep y nope Deben ser rutas a los archivos JS que están cargados:

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

Como te descubriste, si no quieres usar el yepnope.js integrado, solo puedes usar Modernizr el camino tradicional:

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

Answer 2

Con los prefijos de Yepnope, es posible ejecutar funciones predefinidas y nombradas. Nota: Solo he probado esto con el último Chrome en OS X.

Sin embargo, para que esto funcione, necesitará una "URL ficticia", por ejemplo, una imagen que planea cargar en la página (su logotipo es un buen candidato).

También porque Modernizr.load solo alias el yepnope.apply método, deberá consultar a yepnope por nombre para agregar un prefijo.

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

Por supuesto, si no quieres contaminar el global window espacio de nombres, puede poner sus funciones nombradas en un objeto y cambiar window[resourceObj.url](); a window.MyObj[resourceObj.url]();.

El verdadero poder de esto es que callback FUNCIONES DE FUNCIONES, las funciones nombradas pueden llamar Modernizr.load Además, y/o podría escribir un prefijo más decidido que el ejecutor de funciones genéricas que se muestra aquí.

Answer 3

los yep y nope Los parámetros no aceptan funciones como argumentos. Deberían ser un string o un array of strings indicar que los scripts se cargan en función de si el test tuvo éxito o fallido. Ver la documentación en Modernizr.load para más información.