如何自动组织自定义 Facelets 组件使用的脚本？

Question

例如，我创建了一些自定义 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 以找出可以在哪里注入

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

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

嗯，非常笨拙。有什么优雅的解决方案可以做到这一点吗？

Answer 1

听起来您需要类似 RequireJS 的东西来在页面上动态加载依赖项。