文章

Yepnope + Modernizr

早前試了 Yepnope 做 script loading 加上 Modernizr 做 HTML5 feature detection,來為表格加上如 placeholder 的功能。用這個的好處是如果 browser 已支持該功能,就不用 load 相關的 javascript。

你可以選擇直接 include 這兩個 script,或者自己 build 一個 Modernizr 連 Yepnope 的檔。找你要用的 script,例如 inputPlaceholder 。然後,在需要的地方這樣寫:


Modernizr.load({
	test: Modernizr.input.placeholder,
	nope: ['inputplaceholder.js'],
	callback: function(){
		inputPlaceholder(document.getElementById("top-search-box"), '#333333');
	}
});

就這樣子。Modernizr 會偵察你的 browser 是否支援 placeholder 屬性,如果是 ‘nope' 的話,就會載入 inputplaceholder.js,再在成功載入後執後 callback。很簡單吧!

當然這只是舉個例,如果只是要載入如 inputplaceholder.js 這小 script,用 Modernizr 配 Yepnope 分明是用牛刀殺雞 (用多於 5K 的 loader 去 load 1K 的 script)。但當要載入較大的 library 時,才值得用這些 loader。

後話:其實這陣子推出了很多 js loader: LABjsHeadJSRequireJsControlJsload.js … 身形功能大小不同,這裏有個 Comparison matrix 可以參考一下。

*