Статьи

Начало работы с MooTools

Декабрь 26, 2018

Это руководство знакомит с одной из самых популярных на сегодняшний день платформ 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);
});

Выбор элементов по шаблонам атрибутов

В следующих примерах выбираются элементы, чьи атрибуты idclass 

 $$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});

Аналогично, следующие примеры соответствуют элементам, чьи атрибуты idclass 

 $$('[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);

Когда этот код будет выполнен, вы можете увидеть новый divbody

Привязка событий

Привязка событий приводит к выполнению кода при выполнении определенных событий для элемента. Щелчок, двойной щелчок и зависание — примеры общих событий. Вы также можете создавать свои собственные события, но это выходит за рамки этой статьи. В качестве примера привязки события 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 .

33
Share: