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： LABjs 、 HeadJS 、 RequireJs 、 ControlJs 、 load.js … 身形功能大小不同，這裏有個 Comparison matrix 可以參考一下。