2011-06-23 4 views
1

不足しているモジュールをロードするために、YUIを使用してuse(...)メソッドで指定し、コールバックを渡して、すべてのモジュールがロードされたときにアクションを実行します。。私の場合、これはいくつかの問題を提起します。具体的には、クラスがコールバック内に作成されていれば、現在のファイルの外にクラスをインスタンス化することは不可能です(「new」が発生するまでに準備ができているという保証はありません)。私の回避策は、特定のメソッド呼び出しをYUI.use(...)でラップすることでしたが、これはオブジェクトを拡張する際に別の問題を引き起こします。理想的には、自分のコードが実行される前にすべてのモジュールを同期して読み込むことです。以下は現在 が失敗した のコードです(編集:ロールアップを許可)。YUI3 - モジュールを同期してロードするには?

HTML:

<html> 
<head> 
<!-- Built using YUI dep configurator --> 
<!-- JS --> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/oop/oop-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event-custom/event-custom-base-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/dom/dom-style-ie-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/pluginhost/pluginhost-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/node/node-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-base-ie-min.js"></script> 
<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/event/event-delegate-min.js"></script> 


<!-- My JS --> 
<script type="text/javascript" src="test.js"></script> 

<script type="text/javascript"> 
    var test = new MyNS.ExtendingClass(); 
</script> 

</head> 

<body> 
    <h1>Hello World!</h3> 
</body> 
</html> 

test.js

​​3210

このコードは動作するようになりましたが、それを実現するために10(!!!)のjsファイルが必要です。すべての依存関係がを動的にロードすることを確認する方法はありますかの前に私のコードが実行されますか?そうでしょう、そう?

+0

パッケージャを使用して、これらのファイルのすべてを1つにパッケージ化するか、またはすべてを非同期にする – Raynos

答えて

8

各クラスを独自のYUIモジュールに入れ、YUIを使用して名前空間を設定することで、これを解決できます。

あなたのクラス定義の両方を含む、私の-classes.js新しいファイルを作成します。

は、あなたのページでYUIシードファイルを含める:

<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script> 

はまた、あなたのクラスファイルとANを含めますinitファイル:あなたの初期化ファイルで

<script type="text/javascript" src="my-classes.js"></script> 
<script type="text/javascript" src="my-init.js"></script> 

YUI().use('extendingClass', function(Y) { 
    Y.test = new Y.NS.ExtendingClass(); 
}) 

コードが実行される前に、すべての依存関係を解決して読み込む必要があります。非同期ですが、コードを実行する前にすべてがロードされたことを確認するソリューションを求めました。

これが役に立ちます。

2

Google Closure Compilerを使用して、すべてを圧縮して1つのファイルにまとめます。複数のファイルをコンプレッサにインポートすることができます。

高度な圧縮モードを使用すると、Google Closure Compilerは一般にYUIコンプレッサーよりも20〜25%多く圧縮します。

関連する問題