Блог

Например, я создал несколько пользовательских компонентов пользовательского интерфейса, некоторые зависят от 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, чтобы узнать, куда я могу внедрить <script>? вот так:

 MyTreeComponent extends UIOutput {
    // ...
    UIComponent scriptsContainer = getParent().getParent().getChildren()[2].getChildren()[3];

    // search if scriptsContainer already included the script...
    if (! included) {
        scriptsContainer.addElement("<script>...");
    }
}
  

Ну, очень неуклюже. Есть ли какое-нибудь элегантное решение для этого?

Похоже, вам нужно что-то вроде RequireJS для динамической загрузки зависимостей на страницу.