yepnope.jsとは

yepnope.js | A Conditional Loader For Your Polyfills!

手書き風のロゴがかわいい。

yepはyes、nopeはnoの口語体で、固く言えば「yesno.js」。
与えた条件がtrueの場合とfalseの場合で読むJS/CSSを切り替えるのが得意な
リソースローダーです。

最も簡単なサンプル

yepnope("hoge.js");
yepnope("style.css");

単一ファイルをロードするだけの簡単なサンプルです。
内部的には、ドキュメント内で一番最初のScript要素を探して、
その前にinsertBeforeしているみたい。

ちなみに、スクリプトローダーではなく「リソースローダー」なので
JavaScriptだけではなくCSSもロード出来ます。

複数ファイルを読んでみる

yepnope({
    load : [ "hoge.js", "fuga.js" ]
});

load

後述するtestの結果に関わらず、とにかく読み込む。

条件分岐で読むJSを分ける

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ], /* testの結果がtrueの場合こっちを読む */
    nope : [ "foo.js", "bar.js" ] /* testの結果がfalseの場合こっちを読む */
});

test

基準となる条件文等

yep

testがtrueの時に読み込むファイル。単一ファイルの場合は文字列でも可。

nope

testがfalseの時に読み込むファイル。単一ファイルの場合は文字列でも可。

上の例は、localStorageが使用可能である場合はyepに設定したhoge.js,fuga.jsがロードされ、
そうでない場合はnopeに設定したfoo.js,bar.jsがロードされます。

コールバックを設定する

yepnope({
    test : ('localStorage' in window) && window['localStorage'] !== null,
    yep : [ "hoge.js", "fuga.js" ],
    nope : [ "foo.js", "bar.js" ]
    callback : function( url, result, key ){
        console.log( url ); /* ロードされたリソースのURL */
        console.log( result ); /* testの結果（true|false） */
        console.log( key ); /* yep|nope におけるインデックス（またはキー） */
    },
    complete : function(){
        console.log( "全部読み込み終わりました！" );
    }
});

ロード完了時の処理をcallback/completeで設定出来ます。
ファイルのロードは非同期に行われる為、
読むリソースを元に何かを処理したい場合はこれらのコールバックを使用します。

callback

リソースが読み込まれる度に呼ばれる。

complete

全リソースがロードし終えた時に一度だけ呼ばれる。

「無ければ読めばいいじゃない」を実装する

var Init = function(){
    if( !window.MyClass ){ return; }
    new MyClass();
};

yepnope({
    test : window.MyClass,
    nope : "myclass.js",
    complete : Init
});

myclass.js

var MyClass = function(){
    console.log( "Hello, MyClass" );
};

MyClassが無い場合はjsファイルをロードしてから、
既にある場合はスルーしてcompleteが呼ばれるのでそのまま初期化。

コールバックで再度条件分岐をしているのは、myclass.jsが読み込めたかどうかの保証が無い為。
myclass.jsが404でも、タイムアウト後にcompleteは呼ばれてしまいます。

まとめ

以前、ローダーもくっついている器用な「head.js」を記事にしましたが、
やはり特化したローダーともなると、さすがに色々と気が効いています。
基本的にJavaScriptファイルはパックしてしまう事が多いのですが、
新要素のフォールバック等にはかなり活用出来るかもしれませんね！