条件付きで外部ファイルの読み込みが出来る「yepnope.js」

「yepnope.js」は条件付きで外部ファイルを読み込む事が出来るJavaScriptライブラリです。

読み込みが完了するまで待機し、完了後のコールバック関数を設定できるようになります。

例えば、IEのためだけに書かれたコードを「if IE」タグを使うのではなく動的に変更する事が出来るようになります。

以下のようなコードで動作するようです。

yepnope([
  {
    load: 'js/jquery.js',
    wait: true
  },
  {
    test: Modernizr.geolocation,
    nope: ['googleapi.js', 'needs-googleapi.js'],
    wait: true,
    callback: function(){
      alert('JS was loaded!');
    }
  }
]);

このコードはjQueryの読み込み完了後に、googleapi.jsとneeds-googleapi.jsを読み込み、
全ての読み込みが完了したらアラートを表示するサンプルです。

IE対策用にショートコードが用意されており、ファイル名の前に!IEと入れると
IEの場合に動作するようなスクリプトが書けます。

以下はIE6とIE7の場合にpatch.jsを読み込むサンプルです。

yepnope([{
  load: ['normal.js', 'ie6!ie7!ie-patch.js'] 
}]);

特定のブラウザにだけ必要なファイル構成がある場合に使えそうですね。