2009-08-22 9 views
2

問題はこれです、私はスクリプトを含みます、それは別のものを使用しますが、その依存関係も準備するために別のスクリプトが必要な場合はどうなりますか?つまり、ロードするだけでは不十分ですが、初期化のためのコールバックが実行前に呼び出されていることを確認する必要があります。 DOM内のスクリプトタグの順序は、依存関係がより多くの依存関係を必要とし、ロード後にそれを明示できるようにすることができない場合は正しくありません。任意の順番のJavascript依存関係ソリューション

スクリプトや依存関係に複数の依存関係が必要な場合、またはファイルが複数のコンポーネントを満たしている場合、問題は複雑になります。

Using.jsはこれには良いアプローチがあるようですが、まず依存関係をロードする前に知っておく必要があります.2番目の著者はFirefoxでもういくつかのテストが機能していないと述べています。私はそれが魔法のように思える執行物をブロックしていると思う。

これを処理するためのローダーを作成しましたが、これは完全に非同期です。実際には動作するようです。しかし、私は前に解決された何かをする感覚を震わせることはできません、または複雑ではありません。

答えて

2

DOMのスクリプトタグの順序は、依存関係がより多くの依存性を必要とし、読み込まれた後にそれらを明示することが許可されている場合は正しくありません。

まあ、これらのスクリプトは、独自の依存関係を正確に読み込もうとしていますか?これはJavaScriptの標準機能ではないため、答えは1つではありません。どのように対処するかは、依存関係を含めるスクリプトに固有のものです。

(document.writeを介して読み込まれる、または読み込み時にDOMにスクリプト要素を追加する)同期的に読み込まれたスクリプトの場合は、少なくとも、読み込みがうまくいくことを確認することができます。非同期ロード(遅延スクリプト、AJAXインクルード、またはタイムアウトによって起動されたレディコールバック)には、コールバックメカニズムが必要です。依存関係やレディコールバックシステムが異なるさまざまなスクリプトを混在させていると、それは苦しいことになります。

これを処理するローダーは完全に非同期ですが、実際は動作しているようです。しかし、私は前に解決された何かをする感覚を震わせることはできません、または複雑ではありません。

いいえ、実際はありません。依存関係の処理と動的スクリプトの挿入は、常に少し複雑になるでしょう。 「解決された」唯一の標準的なアプローチは完全に静的なスクリプトであり、それらを手動で依存関係の順序で記述します。

+0

彼らはGUIコンポーネントです。いくつかは、抽象的な他のものは、かなりのアプリケーションのような、ダイアログなどです。私の目標は、できるだけ孤立した状態に保ち、ページの読み込み時間を短縮することです。 あなたの答えを読んだ後でも、スクリプトがインクルード後にリストが更新されなくても、インクルードされたコンポーネントのステータスを追跡するのに必要なメカニズムが必要になるため、スクリプトに依存性を追加しなくても簡単にはなりません。 –

2

あなたの問題を解決するにはいくつかのアプローチがありますが、ほとんどのアプローチはこのJavascript Dependency Managementプレゼンテーションにあります。

あなたの問題をよりよく解決するのは、jingoライブラリを使用することです。あなたは依存関係を持つモジュールを宣言するために、このような何かを行うことができjingo¹と基本的に

jingo.declare({ 
    require: [ 
     'hallmart.Greeter' 
    ], 
    name: 'hallmart.Store', 
    as: function() { 
     hallmart.Store = function() { 
     var greeter = new hallmart.Greeter(); 
     this.admit = function(customer) { 
      greeter.welcome(customer.name); 
     }; 
     }; 
    } 
}); 

参照code.google.com/p/jingo/wiki/GettingStarted参照のため。

は私が偏っだが、私は最近、javascriptの依存関係の管理がPyramid呼ば作成

0

をcode.google.com/p/jingo/¹。いくつかの主要な機能を除いて、他の依存マネージャーと似ているようです(作成したものとおそらく同じです)。

  1. javascriptだけでなく、任意のファイルを読み込むことができ、ファイルがWebページにどのように含まれるかを定義しましょう。開発時には、javascriptとcssファイルだけでなく、メインページにhtmlを挿入するためにも使用します。これにより私のHTMLビューを別々に保存することができます(ノックアウトのような図書館には最適です)
  2. リリースの時期にファイルを結合します。
  3. 完全にjavascriptで書かれているので設定が簡単です。あなたは外部ツールについて心配する必要はありません。
  4. すべてのhtmlファイルに対してインクルードスクリプトを一度設定するだけで済みます。その後、すべてのファイルが(むしろ常にスクリプトが、名前を変更、削除、または追加されたときにすべてのヘッダー内のファイルを含める更新するよりも)単一の依存ローダーファイル

Pyramid Dependency Manager documentation

一部で更新することができます開発中にどのように動作するかを示すサンプルコード。

ファイル:dependencyLoader.js

//Set up file dependencies 
Pyramid.createOrUpdate({ 
    name: 'standard', 
    files: [ 
    'standardResources/jquery.1.6.1.min.js' 
    ] 
}); 

Pyramid.createOrUpdate({ 
name:'lookAndFeel', 
files: [ 
    'styles.css', 
    'customStyles.css' 
    ] 
}); 

Pyramid.createOrUpdate({ 
name:'main', 
files: [ 
    'createNamespace.js', 
    'views/buttonView.view', //contains just html code for a jquery.tmpl template 
    'models/person.js', 
    'init.js' 
    ], 
    dependencies: ['standard','lookAndFeel'] 
}); 

HTMLファイル

<head> 
    <script src="standardResources/pyramid-1.0.1.js"></script> 
    <script src="dependencyLoader.js"></script> 
    <script type="text/javascript"> 
     Pyramid.load('main'); 
    </script> 
</head> 
関連する問題