Въведение в YUI

Понастоящем има две версии на YUI. YUI 2 стартира през 2006 г. и включва лъвския дял от всички функции на YUI. YUI 3 е издаден през 2009 г. с изцяло нов синтаксис, доказващ лесната употреба на библиотеката (особено при обработка на събития и обработка на DOM).

  • Огромна библиотека с инструменти, включително една от най-модерните таблици с данни.
  • Удобна документация: всеки инструмент и компонент се доставят с подробни инструкции и примери. (api документация)
  • Инструменти за разработка: профилиране, вградена конзола на браузъра и рамка за тестване.
  • Удобно управление на събития с вградени събития с докосване и жестове.

Така че сега сте чули нещо или две за YUI, така че можете да погледнете кода!

Много е лесно да заредите YUI. Нека разгледаме няколко метода.

Метод 1: Файл с прототип на YUI 3

YUI.use () иска необходимите модули и връща YUI обект с всички модули. Компонентите YUI 2 също могат да бъдат активирани, като напишете yui2- към името на модула. Ако сте свързали YUI 2 компоненти, тогава можете да получите достъп до тях чрез Y.YUI2.

Метод 2: YUI конфигуратор 3

Този уеб инструмент ви позволява да събирате всички необходими модули и да изтегляте или свързвате файл с всички зависимости (като jQuery UI). Той също така предоставя информация за това как файловете ще повлияят на изтеглянията.

Метод 3: опростен YUI

Чрез Simple YUI все още можете да използвате динамично други YUI модули, като ги свързвате с YUI.use ().

Простият YUI може да помогне на програмистите на jQuery да преминат към YUI.

В YUI 3 работата с DOM е много проста. Синтаксисът ще звучи познато, ако сте работили с jQuery в тази посока.

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

  1. Y.one ('selecter') връща YUI елемент, който е DOM елемент.
  2. Y.all ('selecter') връща списък на съвпадащи YUI елементи.

YUI също има метод „тест“, който проверява дали даден елемент има даден селектор.

YUI предоставя методи за получаване и задаване за управление на атрибути на елементи, както и много удобни функции addClass и removeClass.

Можете да добавите събитие, като използвате метода on. Можете да приложите метода към елемент (Node) или YUI обект. Например:

Интересното е, че ако използвате метода в първия пример, не е необходимо съвпадението да бъде намерено незабавно. YUI продължава да търси съвпадения за още 15 секунди, след като страницата приключи зареждането, тоест не е нужно да чакате зареждането на документа, за да използвате този метод (не е необходимо да предавате манипулатор на събития в документа. функция на натоварване).

Забележете също така, че сме присвоили незадължителен низ на типа събитие, който определя пространството от имена на събитието. Можете да използвате това, за да отделите събитието по-късно, ако е необходимо.