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

例如，我创建了一些自定义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>

file1.xhtml
... 
file2.xhtml
... 
file3.xhtml
... 

这是非常不方便的，我必须知道哪个组件依赖于哪个库，以及依赖项的依赖项

将所有依赖项放在模板文件中肯定会使事情更简单，但这会加载太多的脚本，并在移动电话中耗尽内存

那么，是否有类似“UIAutoOrganizedScriptsComponent”的东西

我是否应该使用类似于请求范围的哈希集，它包含由当前请求中使用的组件填充的依赖项，如下所示

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

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

静态线程本地请求范围依赖；
静态地图库URL；
MyTreeComponent扩展UIOutput{
// ...
dependencies=requestScopeDependencies.get（）；
添加（“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>...");
    }
}

MyTreeComponent扩展UIOutput{
// ...
UIComponent scriptsContainer=getParent（）.getParent（）.getChildren（）[2].getChildren（）[3]；
//搜索scriptsContainer是否已包含脚本。。。
如果（！包括在内）{
scriptsContainer.addElement（“…”）；
}
}

---

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

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

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