ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近はCDNサービスが多数あり、JavaScriptやスタイルシートを外部サイトから読み込むのも当たり前になっています。しかし他サービスとあって、ずっと存在し続けるのかも安定性も若干の不安が残ります。

しかしだからといってローカルにファイルを用意するのも面倒です。そこで使ってみたいのがfallbackです。

fallbackの使い方

fallbackはスタイルシート、JavaScriptファイルをダイナミックにローディングしてくれるライブラリです。使い方は見ての通りで、一つのライブラリに対して複数のURLを指定できます。

// Here we actually invoke Fallback JS to retrieve the following libraries for the page.
fallback.load({
    // Include your stylesheets, this can be an array of stylesheets or a string!
    page_css: 'index.css',
    global_css: ['public.css', 'members.css'],

    // JavaScript library. THE KEY MUST BE THE LIBRARIES WINDOW VARIABLE!
    JSON: '//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.min.js',

    // Here goes a failover example. The first will fail, therefore Fallback JS will load the second!
    jQuery: [
        '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.FAIL_ON_PURPOSE.min.js',
        '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js'
    ],

    'jQuery.ui': [
        '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js',
        '//js/loader.js?i=vendor/jquery-ui.min.js'
    ]
}, {
    // Shim jQuery UI so that it will only load after jQuery has completed!
    shim: {
        'jQuery.ui': ['jQuery']
    },

    callback: function(success, failed) {
        // success - object containing all libraries that loaded successfully.
        // failed - object containing all libraries that failed to load.

        // All of my libraries have finished loading!

        // Execute my code that applies to all of my libraries here!
    }
});

fallback.ready(['jQuery'], function() {
    // jQuery Finished Loading

    // Execute my jQuery dependent code here!
});

fallback.ready(['jQuery', 'JSON'], function() {
    // jQuery and JSON Finished Loading

    // Execute my jQuery + JSON dependent code here!
});

fallback.ready(function() {
    // All of my libraries have finished loading!

    // Execute my code that applies to all of my libraries here!
});

さらにファイルの読み込みが終わったタイミングでコールバックさせることもできます。一つのサービスがダメだったとしても他のサービスからファイルを取得してくれるなら安心できます。ライブラリの依存関係に応じた読み込みも行ってくれるので、HTMLに直書きするのではなくfallbackを使った方が便利でしょう。

fallbackはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

dolox/fallback: JavaScript library for dynamically loading CSS and JS files. Also provides the ability to load multiple files from a CDN with multiple fallback options and shimming!

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2