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

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");
}

或者，也许我应该搜索组件 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 的东西来动态加载页面上的依赖项。