При написании веб-приложений, которые интенсивно используют javascript, становится трудно отслеживать используемый javascript, особенно когда веб-приложение загружает контент динамически, как в приложениях AJAX. Проблема состоит в том, что каждая страница контейнера должна знать о javascript, необходимом для всех динамически загружаемых разметок компонентов.
Проблемы:
- Какой javascript должен быть загружен
- Как предотвратить повторяющиеся присвоения переменных
- зависимости между библиотеками JavaScript
В таких случаях удобна инфраструктура для динамической загрузки javascript, поскольку она освобождает контейнер от необходимости знать, какой сценарий необходим в компоненте. Компонент объявляет необходимый скрипт и вызывается после того, как скрипт доступен.
В этой статье описывается, как создавать динамические веб-приложения с поддержкой javascript с помощью веб-структуры Java ztemplates. Начиная с версии 2.3.0 ztemplates включает в себя небольшую библиотеку JavaScript с именем zscript, которая упрощает динамическую загрузку JavaScript. zscript полностью интегрирован в ztemplates.
См. Динамическая загрузка Javascript с помощью zscript и jquery, опубликованные в dzone, для краткого введения в zscript.
Библиотека использует jquery, поэтому обязательно укажите предпочитаемую версию.
Чтобы использовать, добавьте следующие строки в раздел заголовка html:
<head>
<script type="text/javascript" src="jquery-x.x.x.js"></script>
<script type="text/javascript" src="${contextPath}/ztemplates/zscript.js"></script>
<script type="text/javascript" src="${contextPath}/ztemplates/zscript-definitions.js"></script>
</head>
Теперь для каждой повторно используемой части функциональности javascript, которую вы хотите сделать доступной для своего веб-приложения, добавьте аннотированный класс и шаблон, содержащий javascript. Аннотация гарантирует, что ztemplates может найти javascript. ztemplates делает скрипт доступным для библиотеки zscript и добавляет его в zscript-definitions.js
Определите Java-класс и аннотируйте его с помощью @ZScriptDefinition. Укажите название для аннотации. Имя
должно совпадать с именем переменной, определенной в фрагменте javascript. Имя класса не имеет значения, но вам может быть полезно назвать ваши классы скриптов ZScript_name, чтобы вы могли легко их найти.
Например, чтобы определить переменную javascript (с сохранением объекта службы) с именем «user», создайте класс java.
@ZRenderer(ZVelocityRenderer.class)
//this defines a javascript object called 'user'
@ZScriptDefinition("user")
public class ZScript_user
{
}
и шаблон JavaScript в ZScript_user.vm в том же месте, что и класс:
if(typeof user=='undefined') {
var user = function() {
//private area
var loggedIn;
function isLoggedIn() {
return loggedIn;
}
function setLoggedIn(loggedInParam) {
loggedIn = loggedInParam;
}
//public area contains methods that can be used from outside
return {
isLoggedIn: function () {
return isLoggedIn();
},
setLoggedIn: function (loggedIn) {
setLoggedIn(loggedIn);
}
};
}();
}
Этот код вызывает метод и присваивает возвращаемое значение переменной с именем user. Это происходит, только если переменная еще не была создана. Возвращаемое значение представляет собой набор функций, доступных для вызова. Другие функции являются частными.
Чтобы использовать javascript со своей html-страницы, напишите это в свой тег javascript:
<script>
zscript.requires(['user'], function(){
user.setLoggedIn(true);
if(user.isLoggedIn()){
alert('logged in!');
}
});
zscript.requires(['mylib'], function(){
mylib.doSomething();
});
</script>
Это говорит о том, что библиотека javascript ‘user’ является обязательной в теле обратного вызова, поэтому передайте имя в качестве первого параметра методу require. Второй параметр — это обратный вызов, который будет вызван, как только библиотека ‘user’ станет доступной (что также может быть немедленно, если библиотека уже была загружена).
Если код содержит более одного вызова zscript.requires (), порядок, в котором вызываются обратные вызовы, сохраняется. В этом примере обратный вызов для «пользователя» всегда вызывается перед обратным вызовом для «mylib».
Вы можете определить другие javascripts, как это:
zscript.define('mylib', '/js/mylib.js'); //map the name 'mylib' to the url
ztemplates обеспечит загрузку javascript всякий раз, когда вы используете его в вызове zscript.requires ([‘mylib’], function () {}).
Помните о междоменных ограничениях, накладываемых на расположение ваших скриптов, поэтому лучше всего загружать их с того же сервера, что и ваш html.
Поскольку не существует определенного порядка загрузки сценариев во время выполнения, библиотеки не должны содержать логику, которая ссылается на другие динамически загружаемые библиотеки:
var user = function() {
var loggedIn;
//Declare all the libraries used by this library here, will be executed before requires callbacks
zscript.requiresInScript(['dialog', 'mylib' ]);
//wrong, mylib may not be loaded
mylib.doSomething();
function isLoggedIn() {
//OK, because dependency has been declared above and call is in function mylib.doSomething();
return loggedIn;
}
function setLoggedIn(loggedInParam) {
//OK, as dependency has been declared above.
dialog.show('Something');
loggedIn = loggedInParam;
}
return {
isLoggedIn: function () {
return isLoggedIn();
},
setLoggedIn: function (loggedIn) {
return setLoggedIn(loggedIn);
}
};
}();
Обратите внимание на условие if (typeof user == ‘undefined’), которое гарантирует, что переменная создается только один раз.
Используя этот шаблон, вы получаете четкое разделение между java, javascript и html, и вам не нужно беспокоиться о тегах скрипта в разметке заголовка html или дублировании экземпляров переменных. Весь необходимый javascript загружается по требованию, или, если вы этого не хотите, вы можете указать ztemplates собрать весь javascript в zscript-definitions.js.
Веб ссылки:
- http://www.ztemplates.org основанная на аннотациях веб- структура java.
- Динамическая загрузка Javascript с помощью zscript и jquery, опубликованных в dzone для краткого введения в zscript.