headjs – Mach3.laBlog https://blog.mach3.jp Thu, 10 Mar 2011 01:10:46 +0000 ja hourly 1 https://wordpress.org/?v=6.9 head要素に読み込むべき唯一のスクリプト「headjs」 https://blog.mach3.jp/2011/03/10/headjs.html Thu, 10 Mar 2011 01:10:46 +0000 http://blog.mach3.jp/?p=1665 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、
「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。

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の名に恥じない素晴らしいスクリプトだと思います。

]]>