javascript - How to auto organize the scripts used by custom Facelets components? -

for example, have created custom ui components, depend on jquery-min.js, depend on jquery ui, depend on jstree, depend on dojo, etc.

i can import 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 inconvenient, have know component depends on library, , dependencies of dependencies.

to put dependencies in template file make things simpler, load scripts, , memory out in mobile phone.

so, there "uiautoorganizedscriptscomponent"?

should use request-scoped hash set, contains dependencies filled components used in current request, this?

static threadlocal<hashset> requestscopeddependencies; static map<string, url> libraryurls;  mytreecomponent extends uioutput {     // ...     dependencies = requestscopedependencies.get();     dependencies.add("jstree"); } 

or, maybe should search component dom find out can inject <script>? this:

mytreecomponent extends uioutput {     // ...     uicomponent scriptscontainer = getparent().getparent().getchildren()[2].getchildren()[3];      // search if scriptscontainer included script...     if (! included) {         scriptscontainer.addelement("<script>...");     } } 

well, clumsy. there elegant resolution this?

it sounds need along lines of requirejs load dependencies dynamically on page.