Создание примера модуля волшебного джинна

Давайте создадим модуль для демонстрации некоторых концепций этой главы. Наша жизнь порой бывает настолько сложной, что было бы просто здорово иметь волшебного джинна, который смог бы давать нам ответы на любые вопросы. (Dojo может выполнять некоторые действия автоматически, что немного похоже на волшебство, но джинны – это настоящее волшебство.)

Прежде чем приступить к созданию модуля, вспомните, что всегда рекомендуется использовать пространства имен. Пример 2.6 помещает программный код ресурса Genie в пространство имен dtdg, которое мы уже использовали в этой книге. Если вы еще не создали локальный каталог с именем dtdg, то сделайте это прямо сейчас. Внутри этого каталога создайте файл с именем Genie.js, куда скопируйте волшебный программный код, представленный в примере 2.6.

Пример 2.6. Реализация модуля волшебного джинна
//всегда начинайте модуль с инструкции dojo.provide
dojo.provide("dtdg.Genie");
//создание пространства имен для джинна
dtdg.Genie = function() {}
//набор предсказаний чемто напоминает 8 волшебных шаров
dtdg.Genie.prototype._predictions = [
"As I see it, yes",
"Ask again later",
"Better not tell you now",
"Cannot predict now",
"Concentrate and ask again",
"Don't count on it",
"It is certain",
"It is decidedly so",
"Most likely",
"My reply is no",
"My sources say no",
"Outlook good",
"Outlook not so good",
"Reply hazy, try again",
"Signs point to yes",
"Very doubtful",
"Without a doubt",
"Yes",
"Yes - definitely",
"You may rely on it"
];
//функция инициализации, конструирующая интерфейс
dtdg.Genie.prototype.initialize = function() {
var label = document.createElement("p");
label.innerHTML = "Ask a question.


The genie knows the answer...";
var question = document.createElement("input");
question.size = 50;
var button = document.createElement("button");
button.innerHTML = "Ask!";
button.onclick = function() {
alert(dtdg.Genie.prototype._getPrediction());
question.value = "";
}
var container = document.createElement("div");
container.appendChild(label);
container.appendChild(question);
container.appendChild(button);
dojo.body().appendChild(container);
}
//основная функция реализации взаимодействия
dtdg.Genie.prototype._getPrediction = function() {
//получить псевдослучайное число в диапазоне от 0 до 19,
//которое будет играть роль индекса предсказания
var idx = Math.round(Math.random()*19)
return this._predictions[idx];
}

Фактически этот пример не делает ничего, кроме как создает объект типа Function с именем dtdg.Genie и определяет одну «общедоступ ную» функцию initialize.

Пример содержит комментарии, и, с точки зрения вебразработчика, его логика должна быть достаточно проста для понимания. (Если это не так, то, прежде чем продолжить чтение, вам стоит ознакомиться с основами HTML и JavaScript с помощью какойнибудь другой книги.) Чтобы ввести джинна в действие, необходимо изменить базовый шаблон вебстраницы, как показано в примере 2.7.
Пример 2.7.


Веб!страница, предназначенная для общения
с волшебным джинном


Fun With the Genie!
type="text/javascript"
src="http://o.aolcdn.com/dojo/1.1/dojo/dojo.xd.js"> djConfig="modulePaths:{dtdg:'./dtdg',baseUrl:'./'}">


(body)
(/body)


Этот пример демонстрирует возможность многократного использова ния и переносимость модуля dtdg.Genie. Вам нужно просто загрузить модуль в странице, и после инициализации он будет «просто работать». (И пока пользователь не увидит исходный текст, он будет считать его понастоящему волшебным.) Наиболее сложная часть сценария, тре бующая дополнительного пояснения, – это использование djConfig для определения параметров настройки Dojo перед загрузкой инструмента рия: параметр modulePaths определяет местоположение модуля относи тельно параметра baseUrl, значение которого соответствует текущему рабочему каталогу..



Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
Аргументы «функции в виде строк»
Блочная модель
Грубое определение типа
Добавление узлов
Зачем управлять беспорядком

Вернуться в раздел: Dojo / Утилиты броузера