1

たとえば、いくつかのカスタム UI コンポーネントを作成しました。一部は に依存し、一部jquery-min.jsは に依存しjQuery UI、一部は に依存しjsTree、一部は に依存しますDojo。

各 xhtml ファイルに必要なライブラリをインポートできます。

file1.xhtml
<script src="jquery-min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jsTree.js"></script>
<my:tree> ... </my:tree>

file2.xhtml
<script src="jquery-min.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery-ui-dialog.js"></script>
<script src="jquery-ui-autocompletion.js"></script>
<my:autodialog> ... </my:autodialog>

file3.xhtml
<script src="jquery-min.js"></script>
<script src="dojo.js"></script>
<my:dojostuff> ... </my:dojostuff>

これは非常に不便です。どのコンポーネントがどのライブラリに依存しているか、および依存関係の依存関係を知る必要があります。

すべての依存関係をテンプレート ファイルに入れると、確かに作業は簡単になりますが、それではスクリプトがロードされすぎて、携帯電話のメモリが不足します。

それで、「UIAutoOrganizedScriptsComponent」のようなものはありますか？

このように、現在のリクエストで使用されているコンポーネントによって満たされた依存関係を含む、リクエスト スコープのハッシュ セットのようなものを使用する必要がありますか?

static ThreadLocal<HashSet> requestScopedDependencies;
static Map<String, URL> libraryURLs;

MyTreeComponent extends UIOutput {
    // ...
    dependencies = requestScopeDependencies.get();
    dependencies.add("jstree");
}

または、Component DOM を検索して <script> を挿入できる場所を見つける必要がありますか? このような：

MyTreeComponent extends UIOutput {
    // ...
    UIComponent scriptsContainer = getParent().getParent().getChildren()[2].getChildren()[3];

    // search if scriptsContainer already included the script...
    if (! included) {
        scriptsContainer.addElement("<script>...");
    }
}

まあ、非常に不器用です。これを行うためのエレガントな解決策はありますか?

4

1 に答える 1

1

ページに依存関係を動的にロードするには、 RequireJSに沿ったものが必要なようです。

于 2011-05-11T04:49:35.733 に答える