head要素に読み込むべき唯一のスクリプト「headjs」
この記事は賞味期限切れです。（更新から1年が経過しています）
「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、
「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。
使い方
謳い文句はhead要素に読み込む唯一のスクリプト
ダウンロードして読み込むだけ。おしまい。
<script type="text/javascript" src="head.js"></script>
その多彩な機能
環境の判別
CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を
Modernizrと同じ手法でHTML要素のクラスに出力してくれます。
こんな感じに…
<html lang="ja" id="test-page" class=" webkit root-section js gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions fontface domloaded w-1100 lt-1280 lt-1440 lt-1680 lt-1920">
また、JavaScriptでheadオブジェクトを辿っても判別結果が得られます。
console.log( head.csstransitions ); // Transition対応のブラウザならtrue
console.log( head.browser.webkit ); // Webkitならtrue
console.dir( head ); // とりあえず全部覗いてみたらいいと思う
IEのHTML5対応の補助
html5shiv同様、IEでのHTML5の新要素の使用をサポートしてくれます。
（IEさんはHTML5の要素を置いても、そのままではスタイルをあててくれないので…）
スクリプトローダー
動的にJavaScriptファイルをロードする機能を備えています。
読み込むスクリプトファイルは復数指定でき、 ロード完了時のコールバックも登録可能です。
head.js(
"hoge.js",
"fuga.js",
"foo.js",
"bar.js",
function(){
console.log( "All Script Loaded." );
}
);
パフォーマンスに疑問が残るので多用は禁物ですが、便利ですね。
競合としてはrequire.jsとかでしょうか。
まとめ
一本読み込むだけでこれだけのことが出来る。
まさにheadjsの名に恥じない素晴らしいスクリプトだと思います。
コメント