jQuery может быть отличным помощником в том, что касается библиотек JavaScript, но есть ряд серьезных соперников, и не в последнюю очередь это библиотека YUI (Yahoo User Interface) от Yahoo. Он включает в себя полный набор функций: манипулирование DOM, помощники Ajax, богатые виджеты интерфейса… все работает!
Когда вы пишете код с помощью YUI, вы используете тонну свободно доступного, проверенного кода с сопроводительной документацией. Вы должны считать себя достаточно безопасным, используя код, поддерживаемый одним из крупнейших игроков в Интернете.
В этой статье мы рассмотрим две отдельные части головоломки YUI и то, как их можно объединить, чтобы создать классную функциональность. В частности, мы будем работать с компонентом YUI TreeView , который представляет собой способ представления динамического иерархического дерева в браузере. Но мы также рассмотрим помощников YUI по Ajax, так как мы будем динамически дополнять ветви дерева с помощью вызовов Ajax.
Проект, который мы предпримем в этой статье, создаст экземпляр компонента TreeView, у которого для начала будет только один текстовый узел. Когда пользователь нажимает на этот узел, запускается Ajax-запрос, чтобы найти список синонимов для слова, по которому щелкнули. Наш код создаст новые узлы на дереве для каждого возвращенного синонима. Каждый новый узел, в свою очередь, будет кликабельным, чтобы создать свое собственное поддерево синонимов.
Перед тем, как приступить к этому проекту, вы должны иметь хотя бы некоторую грамотность или навыки в JavaScript, особенно в объектно-ориентированном JavaScript (для подробного ознакомления с последним вы можете прочитать эту статью Райана Фришберга ).
Полный архив почтовых индексов для этого урока можно скачать здесь .
Основной метод, который мы будем использовать в этом руководстве, — это асинхронный вызов сценария поиска синонимов. Мы используем диспетчер соединений YUI, чтобы сделать этот вызов:
YAHOO.util.Connect.asyncRequest ('GET', stringURL, objectCallBack, null);
Поскольку это асинхронный запрос, после выполнения вызова поток управления немедленно возвращается к выполнению операторов, следующих за asyncRequest .
Давайте посмотрим на аргументы этого метода. Первые два аргумента состоят из типа запроса (в данном случае GET ) и URL-адреса, на который выполняется запрос. Сейчас мы подойдем к третьему аргументу, а четвертый аргумент необходим только для транзакций POST , поэтому для нашего примера он остается null .
Ключевым аргументом является objectCallBack . Вот его структура:
{success: funcToDoOnSuccess, ошибка: funcToDoOnFailure, аргумент: {"argForSuccessOrFailureFuncs": myObject}, время ожидания: 7000};
Сначала нам нужно определить методы, которые будут выполняться по успешному запросу ( success ) или по ошибке ( failure ). В приведенном выше asyncRequest метод asyncRequest вызывает функцию funcToDoOnSuccess если его GET выполнен успешно; для неудачного запроса GET он вызовет функцию funcToDoOnFailure (например, в случае ошибки 404 Page Not Found).
В свойстве аргумента мы размещаем данные, которые понадобятся этим методам для выполнения их работы. Когда метод asyncRequest вызывает любую из наших функций обратного вызова ( funcToDoOnSuccess или funcToDoOnFailure ), он будет использовать все, что вы укажете здесь, в качестве аргумента для передачи этой функции.
Работая над учебником, мы заменим приведенные выше примеры параметров на те, которые необходимы для построения нашего дерева синонимов.
Прежде чем мы сможем использовать какие-либо объекты YUI, мы должны сделать ссылку на библиотеку JavaScript YUI. К счастью, Yahoo предоставляет хостинг Content Delivery Network (CDN) для всех необходимых файлов JavaScript и CSS, а также предоставляет отличный интерфейс для создания настраиваемой ссылки, которая будет включать только необходимые функции.
Перейдите в Yahoo Dependency Configurator и выберите в разделе « Утилиты JavaScript YUI », а также « в разделе « Виджеты пользовательского интерфейса YUI ». В нижней части страницы вам будет предоставлен фрагмент кода, подобный следующему:
<! - CSS-файлы YUI с комбинированной обработкой: -> <link rel = "stylesheet" type = "text / css" href = "…"> <! - JS-файлы YUI с комбинированной обработкой: -> <script type = "text / javascript" src = "…"> </ script>
Я пропустил URL-адреса из приведенного выше примера кода, поскольку они очень длинные, и лучше создать собственный URL-адрес с необходимой вам функциональностью. Преимущество этого состоит в том, что вы можете легко включать любые другие компоненты YUI, которые вам нужны, без добавления дополнительных таблиц стилей или файлов сценариев. Просто вернитесь к приложению конфигурации и создайте новый набор ссылок!
Просто скопируйте полученный фрагмент HTML-кода в заголовок документа, и вы готовы начать работу с YUI.
Первым шагом является создание функции, которая будет создавать объект виджета TreeView. Первоначально он будет содержать только один текстовый узел с меткой «яблоко». Когда пользователь щелкает по этому узлу, наш код создаст под ним поддерево, заполнив его синонимами «яблоко».
В следующем фрагменте кода обратите внимание сначала на строки без жирного шрифта. Мы создаем дерево с помощью конструктора TreeView, аргумент которого является элементом HTML, в котором мы будем строить дерево ( AjaxTreeDiv ). getRoot получает ссылку на корень дерева и передает его конструктору TextNode. Придание корня новому узлу связывает дерево; он создает ссылку на родителя. Мы делаем фактическое рисование дерева с его методом визуализации.
Мы начнем с объявления некоторых переменных. obNode будет объектом узла, obAjaxTree будет объектом дерева, а treeRoot будет использоваться для хранения ссылки на корневой узел дерева.
Мы вызываем конструктор TreeView ( YAHOO.widget.TreeView ), передавая элемент HTML, в котором мы хотим построить дерево ( AjaxTreeDiv ).
Выделенное утверждение должно привлечь наше внимание. Метод setDynamicLoad сообщает дереву, что мы хотим знать, когда пользователь нажимает на один из его узлов, чтобы развернуть его, и сообщает дереву, какую функцию вызывать ( makeMoreNodes , которую мы вскоре makeMoreNodes ), когда эти щелчки происходят:
function buildAjaxTree () {var obNode; var obAjaxTree; var treeRoot; obAjaxTree = new YAHOO.widget.TreeView ("AjaxTreeDiv"); obAjaxTree.setDynamicLoad (makeMoreNodes, 0); treeRoot = obAjaxTree.getRoot (); obNode = new YAHOO.widget.TextNode ("apple", treeRoot, false); obAjaxTree.render ();}
После установки этой опции мы сохраняем ссылку на корень дерева в treeRoot и создаем новый TextNode . Передача переменной TextNode конструктор TextNode соединяет узел с деревом. Наконец, мы вызываем метод render для отображения дерева.
Обратите внимание, что весь этот код находится внутри функции, которую мы назвали buildAjaxTree . Вот утверждение, которое будет называть это:
YAHOO.util.Event.onDOMReady (buildAjaxTree);
Это первое утверждение нашего кода, которое будет выполнено. Метод onDOMReady вызывает buildAjaxTree когда HTML-страница полностью загружена. Запуск нашего скрипта до этого момента вызовет ошибки.
Теперь давайте makeMoreNodes функции makeMoreNodes . Сначала вернемся к обзору объекта обратного вызова, описанному в начале этой статьи. Помните, что нашему вызову Ajax ( asyncRequest ) нужен объект обратного вызова с методами success и failure , поэтому он может вызывать один из этих методов после выполнения своей миссии по сбору данных. Большая часть кода внутри makeMoreNodes работает для создания этого объекта обратного вызова.
Вот объект обратного вызова, который мы будем использовать. Сравните его с универсальным объектом обратного вызова, который мы видели при представлении asyncRequest :
var obMkNodesCb = {success: foundSynonyms, сбой: foundNoSynonyms, аргумент: {"узел": nodeToAddTo}, время ожидания: 7000};
Свойства успеха и неудачи относятся к методам, которые asyncRequest будет вызывать после запроса нашего серверного сценария тезауруса. Мы будем вызывать функцию foundSynonyms если PHP-скрипту удастся получить некоторые синонимы, или foundNoSynonyms вызов foundNoSynonyms если PHP-скрипт потерпит неудачу при поиске. Обратите внимание, что свойство timeout является фактором в этом случае сбоя: asyncRequest отмечает сбой, если ему не удается получить результаты в течение семи секунд (7000 миллисекунд) после asyncRequest .
Метод asyncRequest требует, чтобы свойство аргумента было частью объекта обратного вызова. Помните, что свойство аргумента содержит все данные, необходимые для функций успеха и сбоя, вызываемых asyncRequest . В нашем примере перед вызовом Ajax мы сохраняем узел, по которому пользователь щелкнул в аргументе . Метод успеха нуждается в этом узле по двум причинам. Во-первых, чтобы построить новое поддерево синонимов: для этого нужен корневой узел, и узел, по которому щелкнет пользователь, будет тем корнем. Во-вторых, чтобы сообщить узлу, что мы закончили с его использованием через метод loadComplete . Если бы мы не использовали этот метод, дерево зависло бы, потому что один из его узлов не знал бы, когда возобновить прослушивание щелчков мыши пользователем.
Метод сбоя должен иметь доступ к выбранному узлу по той же причине. Несмотря на то, что метод сбоя не добавляет узлы в дерево, узлу, на котором щелкнул пользователь, по-прежнему требуется loadComplete метод loadComplete , чтобы он мог снова начать прослушивать щелчки пользователей.