JQuery на дієті Вступ до бібліотеки Zepto JavaScript
Окрім суперечок про jQuery та JavaScript, які надзвичайно смішні для класичних комп'ютерних вчених, слід зазначити, що jQuery - це щось, крім малого. У часи мереж доставки контенту це може не мати особливого значення: якщо ви включите широко використовувану бібліотеку з популярного CDN, ви можете покластися на інший веб-сайт, щоб переконатися, що файл уже знаходиться в кеші браузера користувача. Однак на практиці завжди бувають ситуації, коли важлива максимальна продуктивність. Прикладом цього можуть бути технологічні комп’ютери на базі JavaScript, де доступна пам’ять коду не необмежена і чи слабкий процесор залежить від кожного кілобайта коду (часу запуску ключового слова). Крім того, завжди існують сценарії, в яких мережі доставки вмісту заборонені або в яких розробник повинен підтримувати браузери, які з часом більше не охоплюються jQuery.
У цей момент наступає година бібліотеки під назвою Zepto (графа: «Улюблений портативний програміст»). Проект, задуманий Томасом Фуксом у 2010 році, є вічнозеленим у світі JavaScript і, за великим рахунком, сумісним з jQuery. Однак, перш за все, продукт обробляє 5 або 10 КБ скомпільованого коду, залежно від конфігурації.
У цій статті подано короткий вступ до бібліотеки. І завдяки дуже компактному дизайну, ми навіть маємо тут реалістичний варіант охопити продукт у цілому.
Улюблений портативний комп'ютерний програміст
Томас Фукс спочатку замислював Zepto як позбавлену альтернативу для роботи з PhoneGap. З цього факту випливає дуже цікавий список сумісності. На додаток до класики, бібліотека за великим рахунком також підтримує деякі рідкісніші операційні системи. Серед особливо цікавих кандидатів - Palms WebOS, старіші версії Android, BlackBerry 10 і навіть старі версії Safari для iOS.
Ядровий модуль Zepto має мініатюризований розмір лише п’ять кілобайт. Завжди існують сценарії, в яких вам не потрібні модулі розширення, розглянуті в статті нижче, і ви дійсно можете обійтись розміром файлу в п’ять кілобайт.
Питання модуляризації
Коли автору цих рядків довелося демонтувати аналоговий комп’ютер, виготовлений компанією Telefunken, у австрійському технічному університеті третього класу багато років тому, він захопився надзвичайно модульною структурою арифметичного звіра, який був у процесі знищення. Це була система, яку справді можна було розбити на окремі її частини. Корисний як для ремонту, так і для продажу, Telefunken зміг залишити непотрібні деталі, щоб запропонувати всю систему дешевше.
У Zepto покладаються на схожу концепцію. Бібліотека складається з доброго десятка модулів, які коротко узагальнені в таблиці 1.
| зепто | Основний модуль | Так |
| подія | Розширення для керованого подіями програмування | Так |
| ajax | XMLHttpRequest | Так |
| форму | Методи серіалізації форм | Так |
| тобто | Підтримка Internet Explorer 10 | Так |
| виявити | Виявлення операційної системи браузера та хоста | Ні |
| fx | Метод "Animate ()" | Ні |
| fx_methods | Попередньо визначені зразки анімації для Animate | Ні |
| активів | Покращене управління пам’яттю для iOS; експериментальний | Ні |
| даних | Метод "Data ()" | Ні |
| відстрочений | Вміння користуватися обіцянками | Ні |
| зворотні дзвінки | Розширює "$ .Callbacks" завдяки можливості роботи в відкладеному режимі | Ні |
| селектор | Емулює підмножину CSS-селекторів jQuery | Ні |
| дотик | Основна бібліотека сенсорного екрану | Ні |
| жест | Розпізнавання жестів для зменшення масштабу | Ні |
| стек | Прив'язка методів | Ні |
| ios3 | Допоміжні функції, не реалізовані під iOS 3 | Ні |
Таблиця 1: Модулі від Zepto
Розробники, зацікавлені у власній версії Zepto, досягають цієї високої мети двома способами: По-перше, можна завантажити весь вихідний код, щоб потім скомпілювати власну версію за допомогою інструментів на основі вузлів. Крім того, можна використовувати конструктор zepto, який після відкриття в будь-якому веб-браузері в ілюстрація 1 користувальницький інтерфейс, показаний на екрані.
Рис. 1. Завдяки конструктору zepto розробникам не доводиться боротися з командним рядком Node
В інтересах простоти, ми все ще хочемо працювати зі стандартним дистрибутивом, який постачається з налаштуваннями за замовчуванням розробником, або ж його можна завантажити безпосередньо з веб-сайту проекту.
Для наступних кроків ми хочемо використовувати зменшену версію. На момент натискання файл має файл zepto.min.js і чекає нових власників. Завантажте його у зручно доступне місце у файловій системі та на наступному кроці створіть тестовий джгут із кодом, наведеним у лістингу 1.
Цей - дуже простий - приклад ілюструє деякі цікаві елементи бібліотеки. По-перше, продукт завжди встановлює глобальну змінну під назвою Zepto, яка посилається на бібліотечний код у цілому. По-друге, передача функцій до Zepto призводить до того, що посилання зберігаються у внутрішній пам'яті, яка обробляється після того, як відбулася подія DomContentLoaded.
Функції, записані після цієї події, тим часом виконуються безпосередньо фреймворком. Якби ви розмістили інше вікно повідомлення в Zepto (функція ($), яке також було б у Zepto (функція ($)), ви отримаєте два повідомлення на екрані:
Така дивна на перший погляд поведінка пов’язана з тим, що фреймворк вже повністю ініціалізований після обробки F1 і, отже, негайно виконує вказане корисне навантаження. Як не дивно, "внутрішнє" вікно повідомлення з'являється навіть перед вашим колегою, який знаходиться далі.
Zepto відрізняється від jQuery тим, що він заповнює знак долара лише своїм кодом, якщо змінна вільна на момент завантаження бібліотеки. Це призводить до проблем, особливо при взаємодії з бібліотеками, оскільки вони також використовуються у гаряче оскаржуваному просторі імен доларів. Якщо ви хочете отримати більше інформації про це, будьте z. Наприклад, зверніться до сторінки GitHub Пітера Кінмонда.
Основним і державним завданням Zepto, безумовно, є обробка об'єктів DOM. Щоб випробувати цю функцію, нам потрібно додати кілька елементів тесту до тіла нашого елемента. Як перший приклад, давайте розглянемо групу
Розробники, які звикли jQuery, помічають кілька моментів, з якими вони повинні бути знайомі: Знак долара також приймає параметри рядків, які відомі як селектори, і забезпечують компактну взаємодію з деревом DOM.
Ми передаємо тут рядок div, щоб доручити фреймворку надати їх масив
Різноманітність має значення - Інтернет-маркетинг 2020
з Астрід Крамер (Astrid Kramer Consulting)
Право на приватність - можливість для UX
з Лутцем Шміттом (Lutz Schmitt Design & Consulting)
Помста структурованих даних
зі Стефаном Цифкою (Performics Germany GmbH)
Тут цікаво, що структура забезпечує три параметри. На додаток до фактичного поточного елемента та безперервної змінної індексу, Zepto також надає посилання на основне поле з міркувань зручності, щоб полегшити реалізацію логіки.
Фактичне корисне навантаження можна знайти в корпусі. Однак Зепто розміщує тут невелику пастку, яка засмучує недосвідчених розробників. Фреймворк повертає звичайні елементи JavaScript в ітераторах, які, природно, не піддають різні функції та методи, оголошені Zepto. З цієї причини ми повинні використовувати синтаксис $ (item) на першому кроці, щоб створити об’єкт Zepto з поданого елемента DOM. Тоді це html () -сумісно з власною функцією Zepto. У будь-якому випадку: завантажте готову програму у вибраний вами браузер, щоб насолоджуватися послідовністю різних номерів.
Різні маленькі помічники
Зверніть увагу, у цьому контексті, що синтаксичний аналізатор DOM, наданий Zepto, містить лише підмножину функцій та параметрів, реалізованих у jQuery. Особливо прикрим обмеженням для розробників, що залежать від CSS, є відсутність розширень селектора на основі таблиць стилів, відомих з jQuery. Якщо вам абсолютно необхідно використовувати функції, докладно описані у вашій програмі, ви можете повернутися до модуля, який називається селектор. Однак зауважте, що ця частина продукту називається експериментальною і традиційно працює досить слабо, ніж добре в мобільному секторі.
Окрім аналізатора DOM, основний модуль від Zepto також пропонує різні інші допоміжні функції. Наприклад, завжди популярні методи isX, за допомогою яких ви можете перевірити, чи є певний елемент певним типом:
Через простоту цих функцій ми не хочемо реалізовувати приклад тут. Набагато цікавішим є подальший аналіз функцій маніпулювання DOM, що містяться в основному модулі. За допомогою scrollLeft і scrollTop існує група методів, які дозволяють визначати і програмно маніпулювати положенням прокрутки на екрані.
Ще один кумедний помічник називається Grep: $ .grep (items, function (item)< … >) ⇒ масив. Досвідчені розробники Unix можуть здогадатися, що тут далі: окрім поля, метод отримує функцію зворотного виклику, яка викликається для кожного елемента масиву. Отриманий масив тоді є полем тих елементів, для яких зворотний виклик повернув true - приємний інструмент для децимації полів на основі складних критеріїв.
Тед передає свої привітання
Зауваження Теда Файсона щодо програмування, орієнтованого на події, на сьогодні мають стати класикою. Навіть через добрі десять років після першої публікації відповідна книга все ще продається. Стандартний дистрибутив Zepto також постачається з системою управління подіями, що позбавляє розробників від необхідності інтегрувати інші фреймворки, такі як Radio.js та Co.
Ми також хочемо реалізувати тут невелику програму, орієнтовану на події. Для цього створіть нову версію тестового джгута, надрукованого вище, який тепер повинен бути оснащений кнопкою. Оскільки оголошення кнопок не є однією з найбільших таємниць системних технологій, ми не друкуємо тут необхідний код.
Натомість давайте подивимось на джерела подій. Zepto підтримує події в DOM, а також події, створені самим розробником. Ми хочемо розпочати тут з домашнього заходу. Він реєструється у фреймворку методом $ .Event:
Першим параметром, що передається методу, є рядок, який вказує назву події. Порівняння між джерелами подій та поглинаннями подій відбувається виключно за допомогою порівняння рядків. Друге поле визначає спосіб розподілу події. На даний момент ми деактивуємо функцію бульбашок, яка, мабуть, лише частково працювала на момент натискання.
У наступному пункті є невеличка особливість. В принципі, події можна зіставити лише за допомогою об'єктної моделі документа. Це означає, що як джерела подій, так і поглиначі подій в принципі повинні бути підключені до елемента DOM.
Щоб обійти цю проблему, доцільно зберігати внутрішні події у "об'єкті колекції". Тіло документа добре підходить для цієї мети, саме тому ми використовуємо його для входу в менеджер подій, використовуючи для цього передбачений для цього метод:
На наступному кроці ми використовуємо для реєстрації події натискання кнопки, що належить DOM, і для підключення її до іншого обробника подій:
Єдиним цікавим у цьому контексті є те, що подія також повинна запускатися за допомогою об'єкта DOM. Потім відкрийте файл у вибраному вами браузері та натисніть кнопку. Вікно вікна повідомлення з'явиться на екрані, як очікувалося.
Однією з найцікавіших особливостей керованих подіями систем є можливість пересилання подій за певними «каналами». Для цього ми хочемо розширити наш невеликий тестовий джгут за допомогою іншого обробника подій:
З технічної точки зору, тут є лише кілька відмінностей. Тепер ми пишемо обробник події до події як на кнопці, так і на рівні тіла документа. На обох відображається вікно повідомлення, саме тому підрахунок відображених вікон надає інформацію про виконання програми. При активації обробника подій, надрукованого вище, на екрані з’являються два вікна повідомлень. Забавно, що ця поведінка не залежить від значення змінної бульбашки. Цікава поведінка виникає під час налаштування обробника кліків:
Якщо ви ініціюєте подію безпосередньо в Document.Body, ви помітите, що на екрані з’являється лише повідомлення. Це пояснюється тим, що Зепто в основному передає події лише вгору, якщо взагалі. Привабливим вирішенням цієї проблеми є використання методу triggerHandler:
Подія, ініційована за допомогою triggerHandler, обмежується Zepto елементом DOM, в якому був викликаний метод. У нашому випадку це означає, що використовуються лише ті обробники подій, які були створені на рівні кнопки.
А тепер мобільний!
Як наступне завдання ми хочемо звернутися до обробки подій із сенсорним екраном. Навіть якщо Zepto спочатку задумувався як мобільний фреймворк, цей модуль не постачається із загальним фреймворком і повинен бути інтегрований перед тим, як його можна використовувати вперше.
Якщо ви хочете заощадити роботу з налаштування, про яку йшлося вище, ви також можете завантажити наданий файл touch.js та інтегрувати його в процедуру тестування згідно з наведеною нижче схемою "на додаток" до звичайного фреймворку:
Щоб протестувати різні елементи, нам потрібно створити структуру, що складається з декількох елементів у тілі: з міркувань зручності ми обмежуємось двома тегами LI:
Навіть якщо ця стаття не може стосуватися зручності використання сенсорного екрану в цілому, слід чітко зазначити, що елементи управління в портативних комп’ютерних додатках повинні бути спроектовані якомога більшими. Найпростіший спосіб зробити це - використовувати деякі CSS:
Для забезпечення вмісту для смартфона можна створити локальний HTTP-сервер. Розробники, що працюють під Unix, можуть використовувати невелику програму Python згідно зі схемою з лістингу 2 - під Python 3 вони повинні завантажувати інший приклад замість SimpleHTTPServer.
Потім завантажте програму на вибраний вами смартфон і довго торкайтеся. Колір фону елементів змінюється як у Малюнок 2 показано.
Рис. 2: Від світлого до темно-синього, тут під Chrome для Android
На додаток до події longTap, розробники можуть також отримувати окремі крани. Для цього існує три події: натискання приймає всі події натискання, тоді як singleTap та doubleTap націлюються на певні типи натискання. Проведення свайпів можна обробляти за допомогою методів swipe, swipeLeft, swipeRight, swipeUp та swipeDown. Однак тестування тут необхідне, оскільки вони працюють не однаково в усіх браузерах.
Форма швидко
Zepto поставляється з повною реалізацією Ajax. Оскільки обробка AccessControl and Co. працює, ми хочемо лише представити серіалізацію тут. Для цього використовується модуль Form, який входить до стандартного розподілу згідно з таблицею 1. Наступна структура DOM повинна служити тестовим джгутом:
Результати форми можна збирати як у вигляді масиву, так і у прямо передаваному рядку. Zepto пропонує свій власний метод, який дозволяє записувати обробники подій у подію подання. З міркувань простору ми не даємо тут повного результату. Малюнок 3 показує, як виглядають два елементи в налагоджувачі.
Рис. 3: Zepto автоматично серіалізує дані форми
Висновок
З огляду на все, не слід ігнорувати, що розвиток Zepto значно сповільнився за останні кілька місяців. Поки jQuery продовжує оновлювати кілька щодня, у Zepto зараз майже повна тиша.
Це не обов'язково є недоліком для розробників, однак, оскільки бібліотека, за великим рахунком, робить те, що повинна. Той факт, що вам доведеться протягнути руку у випадку помилки, є помітним недоліком. Крім того, сумісність із сторонніми бібліотеками - це завжди "можливо". Якщо оновлення знищує додаток, постачальник бібліотеки на основі jQuery зазвичай не дуже цікавиться звітом про помилку.
Журнал PHP
Ця стаття була опублікована в журналі PHP. Журнал PHP охоплює широкий спектр тем, які є важливими для успішної веб-розробки.