Статьи

Введение в YUI

Март 21, 2019

Поскольку jQuery доминирует в среде разработки JavaScript, многие новички не знакомы с другими системами JavaScript. Правда в том, что существует множество отличных JavaScript-фреймворков, таких как MooTools, Prototype, Ext JS и … YUI! Хотя YUI не так хорошо известен, как некоторые другие библиотеки, он предоставляет множество инструментов для веб-разработчиков. Сегодня мы кратко рассмотрим некоторые из его возможностей.

Что такое YUI?

YUI (сокращение от Yahoo User Interface и произносится YUI) — это библиотека JavaScript и CSS с открытым исходным кодом, разработанная в основном Yahoo.com . YUI включает в себя утилиты JavaScript, среду CSS (сброс, сетку и шрифты), виджеты и инструменты JavaScript, помогающие включать и управлять вашими модулями.

В настоящее время есть две поддерживаемые версии YUI. YUI 2 , запущенный в 2006 году, содержит львиную долю виджетов YUI. YUI 3 был выпущен в 2009 году и имеет совершенно новый синтаксис, значительно улучшающий его простоту использования (особенно в обработке событий и обходе DOM).

Почему YUI?

Так что вы можете быть удивлены, зачем мне вообще изучать другой фреймворк JavaScript? У каждой структуры есть свои сильные стороны, поэтому выбор, который вы выберете, будет зависеть от ваших потребностей. Вот пара вещей, которые действительно есть у YUI:

Хорошо, теперь, когда вы немного узнали о YUI, давайте начнем смотреть на некоторый код!

Включая библиотеку

YUI обеспечивает большую гибкость при загрузке библиотеки; давайте посмотрим на пару способов, которыми вы можете сделать это.

Способ 1: исходный файл YUI 3

Начальный файл является предпочтительным способом получения YUI на вашей странице. Просто включите исходный файл YUI (всего ~ 6 КБ), а затем включите нужные модули через JavaScript. Давайте посмотрим на пример:

1
2
3
4
5
6
7
<script src=»http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js»></script>
<script>
YUI().use(‘node’, ‘anim’,’yui2-calendar’, function(Y) {
    var YAHOO = Y.YUI2;
    Y.one(‘#test’);
});
</script>

YUI.use () сделает запрос на получение необходимых модулей и передаст вам экземпляр YUI в обратном вызове со всеми необходимыми модулями. Компоненты YUI 2 также могут быть включены путем передачи имени модуля с добавлением yui2- . Если вы включите компонент YUI 2, то вы можете получить доступ к экземпляру YUI 2 через Y.YUI2.

Способ 2: Конфигуратор YUI 3

Этот веб-инструмент позволяет вам выбрать нужные вам модули и загрузить или связать минимизированный файл со всеми этими зависимостями (это похоже на инструмент jQuery UI ). Он также предоставляет статистику того, как файлы будут влиять на загрузку страниц.

Способ 3: SimpleYUI

SimpleYUI — это недавно выпущенный инструмент, который упрощает включение YUI для тех, кто привык просто включать библиотеку JavaScript и иметь доступ ко всему. Просто включите файл SimpleYUI, и вы получите глобальный экземпляр YUI, сопоставленный с переменной Y, с доступными модулями манипулирования DOM, AJAX и UI.

1
2
3
4
5
6
7
<script type=»text/javaScript»
 src=»http://yui.yahooapis.com/3.2.0pr2/build/simpleyui/simpleyui-min.js»></script>
 
<script>
 //Y is a global variable set up by the SimpleYUI script.
 Y.one(«#test»).addClass(«my class»);
</script>

С SimpleYUI вы все равно можете динамически использовать все другие модули YUI, загружая их с помощью метода YUI.use.

1
2
3
Y.use(‘dd-drag’, function(Y) {
    // set up drag and drop
});

SimpleYUI имеет потенциал, чтобы действительно помочь принятию YUI, потому что это делает его намного более доступным и знакомым для программистов из таких библиотек, как jQuery.

DOM Manipulation

В YUI 3 очень легко манипулировать DOM, и синтаксис должен быть достаточно знаком, если вы использовали jQuery в прошлом.

YUI предоставляет два метода для получения узлов DOM через свой модуль Node .

  1. Y.one (‘selecter’) — возвращает узел YUI, представляющий узел DOM.
  2. Y.all (‘selecter’) — возвращает YUI NodeList всех совпадений

Вот пример.

01
02
03
04
05
06
07
08
09
10
11
// Y.one
var node = Y.one(‘#test-div’);
var node2 = Y.one(document.body);
Y.one(‘#my-list’).get(‘id’);
 
// Y.all
var nodes = Y.all(‘#my-list li’);
 
// chaining
var nodes2 = Y.one(‘#my-list’).all(‘li’);
var parent = Y.one(‘#my-list’).get(‘parentNode’);

YUI также предоставляет метод test соответствия элемента селектору.

1
2
3
4
5
var node = Y.one(‘#test-div’);
// if node has the primary class
if(node.test(‘.primary’)) {
    doSomething();
}

YUI также предоставляет методы get и set для управления атрибутами Node и addClass функции, такие как addClass и removeClass .

1
2
3
4
5
6
7
// get and set
Y.one(‘#test-div’).get(‘id’);
Y.one(‘#test-div’).set(‘innerHTML’, ‘Test Content’);
 
// addClass, removeClass
Y.one(‘#test-div’).addClass(‘highlighted’);
Y.all(‘p’).removeClass(‘highlighted’);

События

События прикрепляются с помощью метода YUI. Вы можете вызвать этот метод на узле или на экземпляре YUI. Например:

1
2
3
4
5
6
// called on YUI instance
// myevent|click namespaces this onclick handler to myevent (used for removal later)
Y.on(«myevent|click», function() { // do something }, «#test p»);
 
// called on NodeList
Y.all(«#test p»).on(«myevent|click», function() { // do something });

Одна интересная особенность YUI состоит в том, что, если вы используете метод из первого примера, селектору не нужно сразу иметь совпадение. YUI будет продолжать опрос на совпадение в течение 15 секунд после завершения загрузки страницы, а это означает, что вам не нужно ждать загрузки документа, чтобы использовать его (вам не нужно переносить обработчики событий в функции document.load).

Также обратите внимание, что мы добавили тип события с необязательной строкой, которая содержит пространство имен события. Вы можете использовать это, чтобы позже отсоединить событие, если хотите.

1
Y.all(«#test p»).detach(«myevent|click»);

Вы также можете моделировать события …

1
Y.one(«#test»).simulate(«click»);

… и запускать пользовательские события.

1
Y.one(«#test»).fire(«myevents:custom_event_one»);

YUI 3 также поддерживает сенсорные события, что позволяет добавить поддержку вашего приложения JavaScript для мобильных устройств. Одна потенциальная ошибка заключается в том, что вам нужно включить модуль «event-touch», используя YUI.on, чтобы сенсорные события работали.

1
2
3
Y.one(«#test»).on(‘touchstart’, function() {
    // a touch event started
});

AJAX

AJAX-запросы обрабатываются через модуль ввода-вывода YUI 3. Вызов AJAX выполняется с использованием функции io , как показано ниже.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
Y.io(‘/url/to/call’, {
    // this is a post
    method: ‘POST’,
    // serialize the form
    form: {
        id: «my_form»,
        useDisabled: true
    },
    // ajax lifecycle event handlers
    on: {
        complete: function (id, response) {
            var data = response.responseText;
        }
    }
});

Метод IO принимает URL-адрес и объект конфигурации в качестве параметров. Объект конфигурации легко настраивается, но я включил несколько наиболее распространенных вариантов в приведенном выше примере.

  1. метод — какой метод HTTP использовать
  2. form — если указана эта опция, форма с указанным идентификатором будет сериализована и передана вместе с запросом.
  3. on — этот объект устанавливает обработчики событий для различных этапов жизненного цикла запроса.

Модуль io YUI также позволяет отправлять запросы между доменами, используя файл на основе Flash, предоставленный Yahoo. Однако есть несколько предостережений. Во-первых, у вас должна быть копия флеш-файла YUI на вашем сервере, чтобы фактически выполнить запрос, а во-вторых, домен, к которому вы обращаетесь, должен иметь файл междоменной политики, который предоставляет вам доступ.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
Y.io(‘http://www.somedomain/web/service/’, {
    method: ‘POST’,
    data: ‘data=123’,
    // use flash
    xdr: {
        use: ‘flash’,
        dataType: ‘xml’
    }
    // ajax lifecycle event handlers
    on: {
        complete: function (id, response) {
            var data = response.responseText;
        }
    }
});

JSONP также поддерживается, но через модуль YUI JSONP , а не модуль IO .

1
2
3
Y.jsonp(someurl, function(response) {
    // handle jsonp response
});

Еще один модуль, который весьма полезен в сочетании с AJAX, — это модуль JSON. Это позволяет вам легко анализировать запрос AJAX, который возвращает JSON. JSON может быть проанализирован с помощью метода JSON.parse

1
var obj= Y.JSON.parse(response.responseText);

Анимация

YUI 3 содержит модуль анимации, который можно использовать для выполнения практически любой анимации. Синтаксис немного отличается от синтаксиса jQuery, поэтому давайте посмотрим.

Анимация происходит в пару шагов в YUI. Сначала вы устанавливаете новый объект анимации, который описывает вашу анимацию, а затем запускаете его.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
// animate a div from no size to a height and width of 100
var animation = new Y.Anim({
   node: ‘#my-div’, // selector to the node you want to animate.
   // values to animate from (optional)
   from: {
      height: 0,
      width: 0
   },
   // values to animate too
   to: {
      height: 100,
      width: 100
   },
   duration: 0.5, // set duration
   easing: Y.Easing.easeOut // set easing
});
 
animation.run();

Все свойства можно изменить с помощью .get() и .set() объекта анимации, что позволяет изменять анимацию или элементы DOM для анимации. Анимации также запускают события, которые тоже можно слушать.

1
2
3
4
// animation is a Y.Anim object
animation.on(‘end’, function() {
    // fired after animation finishes
});

В совокупности объект анимации YUI можно использовать для создания всевозможных анимаций в вашем приложении.

Виджеты

Одна из самых приятных особенностей YUI — это виджеты. YUI 3 в настоящее время имеет ограниченный набор виджетов (вкладки, слайдер и оверлей, чтобы назвать несколько), но предоставляет мощную основу для создания собственных виджетов YUI 3. YUI 2, с другой стороны, имеет огромную библиотеку виджетов. Вот некоторые из них:

  • DataTable — полный виджет таблицы данных с загрузкой и разбиением на страницы ajax, поддержкой редактируемых ячеек, изменяемых размеров столбцов и прогрессивным улучшением.
  • ImageCropper — виджет, который помогает с обрезкой изображения.
  • LayoutManager — виджет для создания сложных макетов с помощью JavaScript.
  • Календарь — всплывающий виджет календаря.

Есть еще много виджетов, которые вы можете использовать, и вы можете найти их все на веб-сайте разработчиков YUI 2

,

Библиотеки CSS

Последний компонент, который мы собираемся кратко рассмотреть, — это библиотеки CSS YUI. YUI 3 предоставляет четыре CSS-ресурса.

  • CSS Reset — основные правила сброса CSS. У каждого есть свое представление о том, что должен делать файл сброса, поэтому вам может понравиться или не понравиться этот.
  • CSS Base — эти стили основаны на стилях Reset для обеспечения согласованного рендеринга во всех поддерживаемых браузерах. Этот файл содержит такие вещи, как стили ввода, размеры заголовков и стили таблиц.
  • Шрифты CSS — нормализует размеры шрифтов во всех поддерживаемых файлах. После применения этой таблицы стилей размеры шрифтов изменяются в процентах в соответствии с таблицей YUI. Ресурс YUI CSS Fonts используется популярной платформой HTML5Boilerplate .
  • CSS Grids — CSS сетка, помогающая с макетом. Я вообще не фанат гридов, но если вы хотите узнать больше, у Эндрю Берджесса есть хорошая статья на Nettuts +.

Вывод

Это был лишь краткий обзор некоторых компонентов и модулей, которые предлагает YUI. Если эта статья заинтересовала вас, я рекомендую вам обратиться к документации разработчика YUI и найти то, что еще предлагает YUI. Какие у вас впечатления? Если вы использовали YUI в прошлом, что вы об этом думаете?

59
Share: