How to auto organize the scripts used by custom Facelets components?
For example, I have created some custom UI components, some depend on jquery-min.js
, some depend on jQuery UI
, some depend on jsTree
, some depend on Dojo
, etc.
I can import the required libraries in each xhtml files:
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>
This is very inconvenient, I have to know which component depends on which library, and the dependencies of the dependencies.
To put all dependencies in the template file will certainly make things simpler, but that will load too much scripts, and memory out in mobile phone.
So, is there something like "UIAutoOrganizedScriptsComponent"?
Should I use something like request-scoped hash set, which contains the dependencies filled by components used in the current request, like this?
static ThreadLocal<HashSet> requestScopedDependencies;
static Map<String, URL> libraryURLs;
MyTreeComponent extends UIOutput {
// ...
dependencies = requestScopeDependencies.get();
dependencies.add("jstree");
}
Or, maybe I should search the Component DOM to find out where I can inject the <script>? like this:
MyTreeComponent extends UIOutput 开发者_运维知识库{
// ...
UIComponent scriptsContainer = getParent().getParent().getChildren()[2].getChildren()[3];
// search if scriptsContainer already included the script...
if (! included) {
scriptsContainer.addElement("<script>...");
}
}
Well, very clumsy. Is there any elegant resolution to do this?
It sounds like you need something along the lines of RequireJS to load the dependencies dynamically on the page.
精彩评论