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以找出我可以在哪里注入＆lt; script＆gt;？像这样：

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的内容来动态地在页面上加载依赖项。

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

1 个答案: