JavaScriptの依存関係を管理するにはどうすればいいですか？

Question

実行する前に特定の条件が満たされるのを待つ必要のあるスクリプトがあります。たとえば、別のスクリプトの読み込みやデータオブジェクトの作成を待ちます。

どのようにこのような依存関係を管理できますか？私が考えることができる唯一の方法は、setTimeoutを使用して短い間隔でループし、関数やオブジェクトの存在をチェックすることです。より良い方法がありますか？

また、setTimeoutが唯一の選択肢である場合、私のページをポーリングするのに妥当な時間間隔はどれくらいですか？ 50ms、100ms？

[編集]私のスクリプトの中には、ページ自体から、またはWebサービスから、時には複数のソースの組み合わせから、データを収集するものがあります。データは、ページがロードされる前または後にいつでも準備ができます。他のスクリプトがデータをレンダリングします（例えばチャートを作成するため）。

[更新]有益な回答ありがとうございます。私は車輪を再発明するべきではないことに同意しますが、ライブラリを使用する場合、少なくとも私のページのパフォーマンスへの影響を予測して、その背後にある論理を理解したいと思います。

Answer 1

私はpxLoader JavaScript Preloaderを使用しました。これはかなりうまくいきます。デフォルトで100msのポーリングを使用します。

あなたが何かを必要としない限り、私はここで車輪を再発明することはありません。実際にはカスタムですので、それを（実際にはどのJavaScriptプリローダーライブラリでも）見てください。

Answer 2

ロードされているスクリプトの最後にloaded(xyz);のような関数呼び出しを行うことができます。この関数は他の場所で定義され、xyzの値に基づいて登録されたコールバックを呼び出すように設定されます。 xyzは何でもかまいません。スクリプトを識別する簡単な文字列、複雑なオブジェクトや関数などです。

---

jQuery.getScript(url [, success(data, textStatus)])を使用してください。

Answer 3

お互いに依存するスクリプトの場合は、RequireJSのようなモジュールシステムを使用します。

リモートでデータを読み込むには、コールバックを使用します（例：ここで

$.get("/some/data", "json").then(function (data) { 
    // now i've got my data; no polling needed. 
}); 

を組み合わせて、これらの2の例です：

// renderer.js 
define(function (require, exports, module) { 
    exports.render = function (data, element) { 
     // obviously more sophisticated in the real world. 
     element.innerText = JSON.stringify(data); 
    }; 
}); 

// main.js 
define(function (require, exports, module) { 
    var renderer = require("./renderer"); 

    $(function() { 
     var elToRenderInto = document.getElementById("#render-here"); 

     $("#fetch-and-render-button").on("click", function() { 
      $.get("/some/data", "json").then(function (data) { 
       renderer.render(data, elToRenderTo); 
      }); 
     }); 
    }); 
}); 

Answer 4

この種のもののために多くのフレームワークがあります。データはモデルによってロードされた後

私は、現時点ではバックボーンを使用していhttp://documentcloud.github.com/backbone/

友達もknockout.js http://knockoutjs.com/

これらの両方は、ビューを更新するためにMVCパターンを使用し、推奨している

[更新]私は最も基本的なレベルで、これらのライブラリがコールバック関数とイベントリスナーを使ってページのさまざまな部分を更新していると思います。

model1.loadData = function(){ 
    $.get('http://example.com/model1', function(response){ 
     this.save(response); 
     this.emit('change'); 
    }); 
} 

model1.bind('change',view1.update); 
model1.bind('change',view2.update);