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

yep和nope參數不接受函數作爲參數。它們應該是string或array of strings，指示要根據test成功還是失敗加載的腳本。有關更多信息，請參見Modernizr.load上的文檔。

Answer 3

使用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]();。

這個的真正威力在於callback函數觸發，所指定的函數也可以調用Modernizr.load，並且/或者您可以編寫比此處顯示的通用函數執行程序更有意義的前綴。