Это руководство знакомит с одной из самых популярных на сегодняшний день платформ JavaScript, MooTools. MooTools, что означает My Object Oriented Tools , совместим с Internet Explorer 6+, Firefox, Opera и Chrome. MooTools разработан, чтобы быть компактным, модульным и, конечно, объектно-ориентированным. MooTools предназначен для опытных и опытных программистов на JavaScript, поэтому убедитесь, что у вас достаточно опыта, прежде чем погрузиться.
Получение MooTools
Получить MooTools довольно просто. MooTools состоит из двух частей, известных как Core и More. Core содержит базовые классы и модули инфраструктуры, а More содержит дополнительные классы, которые могут быть включены в зависимости от потребностей приложения. У MooTools есть мощные страницы компоновщика, которые могут настраивать Core и More в соответствии с нашими потребностями. Текущая стабильная версия (на момент написания этой статьи) MooTools Core — 1.4.5, а More — 1.4.0.1.
Селектор элементов
Одной из самых основных операций любого JavaScript-фреймворка является выбор элементов. MooTools использует Slick в качестве механизма выбора. MooTools поддерживает множество различных типов селекторов. В этом разделе рассматриваются некоторые из наиболее полезных и важных селекторов.
Выбор элемента по идентификатору
Если мы хотим выбрать элемент по ID в простом JavaScript, нам нужно использовать длинный синтаксис document.getElementById('id_of_element')
MooTools, как и многие другие JavaScript-фреймворки, сокращает это, используя $
Ваш код в конечном итоге выглядит так:
var element = $('id_of_element');
Это создаст проблемы, если вы включите MooTools и другие библиотеки, которые используют $
Чтобы преодолеть эту ситуацию, MooTools предоставил document.id()
Ваш код для выбора элементов по id
var element = document.id('id_of_element');
Выбор элементов по классу
Это вернет массив элементов определенного класса. Чтобы получить каждый отдельный элемент, нам нужно пройти массив, как показано ниже.
$$('.class_name').each(function(ele){
console.log(ele);
});
Выбор элементов по шаблонам атрибутов
В следующих примерах выбираются элементы, чьи атрибуты id
class
$$('[id^=id_start_]').each(function(ele){
console.log(ele);
});
$$('[class^=class_start_]').each(function(ele){
console.log(ele);
});
Аналогично, следующие примеры соответствуют элементам, чьи атрибуты id
class
$$('[id$=_end_id]').each(function(ele){
console.log(ele);
});
$$('[class$=_end_class]').each(function(ele){
console.log(ele);
});
DomReady Event
DomReady — это событие, которое может быть привязано только к объекту окна. DomReady выполняется, как только загружается DOM, что может быть намного раньше, чем событие window.load
Я предлагаю прочитать это в глубоком сравнении DomReady и window.load
. В следующем примере DomReady использует ожидание загрузки DOM, прежде чем запрашивать его.
window.addEvent('domready', function(){
if(document.id('id_of_element'))
{
alert('Element Exists');
}
});
Создание элемента
MooTools может создавать новые элементы HTML и вставлять их в DOM. Создать новый элемент HTML в MooTools очень просто. Например, следующий код создает новый элемент div
var new_div = new Element('div', {'class': 'new_div'});
Предыдущий код создает новый элемент, но не внедряет его в DOM. Чтобы выполнить внедрение, вам нужно вызвать метод adopt()
В следующем примере показано, как это сделать.
var new_div = new Element('div', {'class': 'new_div'});
$$('body').adopt(new_div);
Когда этот код будет выполнен, вы можете увидеть новый div
body
Привязка событий
Привязка событий приводит к выполнению кода при выполнении определенных событий для элемента. Щелчок, двойной щелчок и зависание — примеры общих событий. Вы также можете создавать свои собственные события, но это выходит за рамки этой статьи. В качестве примера привязки события MooTools следующий код добавляет простой обработчик события click к элементу.
document.id('id_of_ele').addEvent('click', function(){
console.log('I was just clicked');
});
Вы также можете добавлять события в динамически созданные элементы. Следующий код добавляет обработчик щелчка к динамически созданному элементу.
var new_div = new Element('div', {'class': 'new_div'});
$$('body').adopt(new_div);
new_div.addEvent('click', function(){
console.log('I was just clicked');
});
Обнаружение браузера
Последнее, но не менее важное, это обнаружение браузера с помощью MooTools. Это необходимо, когда вы хотите написать условный код на основе браузера пользователя. MooTools предоставляет объект Browser
В следующем примере используется оператор switch
switch(Browser.name)
{
case "safari":
console.log('I am Safari');
break;
case "chrome":
console.log('I am Chrome');
break;
case "firefox":
console.log('I am FireFox');
break;
case "opera":
console.log('I am Opera');
break;
case "ie":
console.log('I am IE');
break;
}
Вывод
Эта статья охватила много основ MooTools. Есть несколько отличных ресурсов для обучения эффективному использованию MooTools. Я многому научился из Документов MooTools и блога Дэвида Уолша . Вы также можете обратиться к моей работе MooTools .