サードパーティJavaScriptのウィジェットの土台

load-jquery.js

var Stork = Stork || {};
Stork.$ = Stork.jQuery = jQuery.noConflict(true); // noconflictを使うことで外のバージョンと切り分けてjQueryをロードできる

loadScript.js

function loadScript(url, callback) {
    var script = document.createElement('script');
    
    script.async = true;
    script.src = url;
    
    var entry = document.getElementByTagName('script')[0];
    entry.parentNode.insertBefore(script, entry);
    
    script.onload = script.onreadystatechange = function() {
        // onreadystatechangeはスクリプトの読み込みの状態が変化したときに毎回発生するイベント
        // 実際の状態はreadStateプロパティとして取得可能。
        // script要素の生存期間を通じていくつかの値のうち１つを取る。
        
        var rdyState = script.readyState;
        
        // completeまたはloadedが読み込み完了を意味する。
        if (!rdyState || /complete|loaded/.test(script.readyState)) {
            callback();
            
            script.onload = null;
            script.onreadystatechange = null;
            // IEにおけるメモリリークを防ぐため、イベントハンドラはデタッチする
        }
    };
}

widget-scaffold.js

var Stork = (function(window, undefined) {
    var Stork = {};
    
    function loadSupportingFiles(callback) {}
    function getWidgetParams() {}
    function getRatingData(params, callback) {}
    function drawWidget() {}
    
    /* ... */
    
    loadSupportingFiles(function() {
        var params = getWidgetParams();
        
        getRatingData(params, function() {
            /* ... */
            
            drawWidget();    
        });
        
    });
})(window); 
// undefinedが書き換えられてる可能性を考慮し、第2引数を設定しないことで本当のundefinedへのエイリアスを貼る
// windowを渡す理由は、エイリアスをスコープ内で定義しないとminifierが変数名を短くできなくなるため