JQuery на диета Въведение в Zepto JavaScript библиотеката
Освен дебатите за jQuery и JavaScript, които са изключително забавни за класическите компютърни учени, трябва да се отбележи, че jQuery е всичко друго, но не и малък. По време на мрежи за доставка на съдържание това може да не е от особено значение: Ако включите широко използвана библиотека от популярен CDN, можете да разчитате на друг уебсайт, за да сте сигурни, че файлът вече е в кеша на браузъра на потребителя. На практика обаче винаги има ситуации, при които максималното представяне е важно. Пример за това биха били базираните на JavaScript процесни компютри, където наличната кодова памет не е неограничена и дали слабият процесор зависи от всеки килобайт код (начално време на ключовата дума). В допълнение, винаги има сценарии, при които мрежите за доставка на съдържание не са разрешени или в които разработчикът трябва да поддържа браузъри, които вече не са обхванати от jQuery с течение на времето.
В този момент настъпва часът на библиотека, наречена Zepto (клетка: „Скъпата на ръчния компютърен програмист“). Проектът, замислен от Томас Фукс през 2010 г., е вечнозелен в света на JavaScript и като цяло е съвместим с jQuery. Преди всичко обаче продуктът се справя с 5 или 10 KB компилиран код, в зависимост от конфигурацията.
Тази статия предоставя кратко въведение в библиотеката. И благодарение на много компактния дизайн, тук дори имаме реалистична възможност да покрием продукта като цяло.
Любимият ръчен компютърен програмист
Томас Фукс първоначално е замислил Zepto като съкратена алтернатива за работа с PhoneGap. От този факт следва много интересен списък за съвместимост. В допълнение към класиката, библиотеката като цяло поддържа и някои по-рядко срещани операционни системи. Някои особено интересни кандидати включват Palms WebOS, по-стари версии на Android, BlackBerry 10 и дори стари версии на Safari за iOS.
Основният модул Zepto има миниатюризиран размер от само пет килобайта. Винаги има сценарии, при които модулите за разширения, обсъдени в статията по-долу, не са необходими и следователно наистина могат да се справят с размер на файла от пет килобайта.
Въпрос на модуларизация
Когато авторът на тези редове трябваше да демонтира аналогов компютър, направен от Telefunken в третокласен австрийски технически университет преди много години, той се възхищаваше на силно модулната структура на аритметичния звяр, който беше в процес на унищожаване. Това беше система, която наистина можеше да бъде разделена на отделни части. Полезно както за ремонт, така и за продажби, Telefunken успя да остави ненужни части, за да може да предложи цялата система по-евтино.
Подобна концепция се използва в Zepto. Библиотеката се състои от дузина модули, които са обобщени накратко в Таблица 1.
| зепто | Основен модул | Да |
| събитие | Разширения за програмиране, управлявано от събития | Да |
| ajax | XMLHttpRequest | Да |
| форма | Методи за сериализиране на форми | Да |
| т.е. | Поддръжка на Internet Explorer 10 | Да |
| откривам | Откриване на операционна система на браузър и хост | Не |
| валута | Метод "Animate ()" | Не |
| fx_methods | Предварително дефинирани примерни анимации за Animate | Не |
| активи | По-добро управление на паметта за iOS; експериментален | Не |
| данни | Метод "Data ()" | Не |
| отложено | Възможност за използване на обещания | Не |
| обратно извикване | Разширява "$ .Callbacks" от възможността за работа в отложен режим | Не |
| селектор | Емулира подмножество от CSS селектори на jQuery | Не |
| докосване | Основна библиотека със сензорен екран | Не |
| жест | Разпознаване на жестове за увеличение с щипка | Не |
| стек | Верига на методите | Не |
| ios3 | Помощни функции, които не са приложени под iOS 3 | Не |
Таблица 1: Модулите от Zepto
Разработчиците, които се интересуват от собствената си версия на Zepto, постигат тази възвишена цел по два начина: Първо, целият изходен код може да бъде изтеглен, за да може след това да се компилира собствена версия с помощта на инструменти, базирани на възли. Като алтернатива може да се използва zepto builder, който след отваряне във всеки уеб браузър в илюстрация 1 потребителският интерфейс, показан на екрана.
Фиг. 1. Благодарение на zepto builder, разработчиците не трябва да се борят с командния ред Node
В интерес на простотата, все още искаме да работим със стандартното разпространение на този етап, което се доставя с настройки по подразбиране от строителя или, като алтернатива, може да бъде изтеглено директно от уебсайта на проекта.
За следващите стъпки искаме да използваме умалената версия. По време на пресата файлът е zepto.min.js и чака нови собственици. Изтеглете го на удобно достъпно място във файловата система и в следващата стъпка създайте тестова сбруя с кода, показан в Листинг 1.
Този - много прост - пример илюстрира някои интересни елементи на библиотеката. Първо, продуктът винаги задава глобална променлива, наречена Zepto, която се позовава на библиотечния код като цяло. Второ, прехвърлянето на функции към Zepto води до това, че препратките се съхраняват във вътрешна памет, която се обработва след настъпване на събитието DomContentLoaded.
Функциите, записани след това събитие, се изпълняват междувременно от рамката. Ако трябва да поставите друго поле за съобщение в Zepto (функция ($), което също ще бъде в Zepto (функция ($) сбруя), ще получите две съобщения на екрана:
Странно на пръв поглед това поведение се дължи на факта, че рамката вече е напълно инициализирана след обработката на F1 и следователно изпълнява посочения полезен товар незабавно. Забавно е, че "вътрешното" поле за съобщения дори се появява тук пред вашия колега, който е по-навън.
Zepto се различава от jQuery по това, че попълва знака за долар със собствен код само ако променливата е свободна в момента на зареждане на библиотеката. Това води до проблеми, особено при взаимодействие с библиотеки, тъй като те също се използват в горещо оспорваното пространство от имена на долари. Ако искате повече информация за това, бъдете z. Например, обърнете се към Peter Kinmonds GitHub-Page.
Основната и държавна задача на Zepto със сигурност е обработката на DOM обекти. За да изпробваме тази функция, трябва да добавим някои тестови елементи към тялото на нашия елемент. Като първи пример, нека разгледаме група от
Разработчиците, които са свикнали с jQuery, забелязват в този момент няколко неща, с които трябва да са запознати: Знакът долар също така приема низови параметри, които са известни като селектори и позволяват компактно взаимодействие с DOM дървото.
Предаваме низа div тук, за да инструктираме рамката да предостави масив от всички тях
Разнообразието има значение - онлайн маркетинг 2020
с Astrid Kramer (Astrid Kramer Consulting)
Правото на неприкосновеност на личния живот - възможност за UX
с Lutz Schmitt (Lutz Schmitt Design & Consulting)
Отмъщението на структурирани данни
със Стефан Цифка (Performics Germany GmbH)
Тук представлява интерес, че рамката предоставя три параметъра. В допълнение към действителния текущ елемент и непрекъсната променлива на индекса, Zepto предоставя и препратка към основното поле от съображения за удобство, за да улесни прилагането на логиката.
Действителният полезен товар може да се намери в корпуса. 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 елемент.
За да се заобиколи този проблем, препоръчително е да съхранявате вътрешни събития в „обект за събиране“. Тялото на документа е подходящо за това, поради което го използваме, за да влезем в мениджър на събития, използвайки метода on, предвиден за тази цел:
В следващата стъпка използваме, за да регистрираме събитието за щракване на бутона, принадлежащо на DOM, и да го свържем с друг манипулатор на събития:
Единственото интересно нещо в този контекст е, че събитието също трябва да се задейства с помощта на DOM обект. След това отворете файла в избран от вас браузър и щракнете върху бутона. Прозорецът на полето за съобщения се появява на екрана, както се очаква.
Една от най-интересните характеристики на управляваните от събития системи е възможността за препращане на събития в определени „канали“. За да направим това, искаме да разширим нашата малка тестова сбруя с друг манипулатор на събития:
От техническа гледна точка тук има само няколко разлики. Сега ще напишем манипулатор на събития към събитието на нивото на бутона, както и на нивото на тялото на документа. И двете показват поле за съобщение, поради което преброяването на броя на показаните прозорци предоставя информация за изпълнението на програмата. Когато се задейства с отпечатания по-горе манипулатор на събития, на екрана се появяват две полета за съобщения. Забавно е, че това поведение не зависи от стойността на променливата балон. Показано е интересно поведение при персонализиране на манипулатора на кликвания:
Ако задействате събитието директно в Document.Body, ще забележите, че на екрана се появява само съобщение. Това е така, защото Zepto основно предава събитията само нагоре, ако изобщо. Атрактивно решение за този проблем е използването на метода triggerHandler:
Събитие, задействано с triggerHandler, е ограничено от Zepto до елемента DOM, в който е извикан методът. В нашия случай това означава, че се използват само тези манипулатори на събития, които са създадени на ниво бутон.
И сега мобилен!
Като следваща задача искаме да се обърнем към обработката на сензорни събития. Дори ако Zepto първоначално е бил предназначен за мобилна рамка, този модул не се доставя с цялостната рамка и трябва да бъде интегриран, преди да може да се използва за първи път.
Ако искате да си спестите работата по персонализиране, обсъдена по-горе, можете също да изтеглите предоставения файл touch.js и да го включите в тестовата рутина съгласно следната схема "в допълнение" към нормалната рамка:
За да тестваме различните елементи, трябва да създадем структура в тялото от няколко елемента: от съображения за удобство се ограничаваме до два LI маркера:
Дори тази статия да не може да се занимава с използваемостта на сензорния екран като цяло, трябва изрично да се посочи, че контролните елементи в ръчните компютърни приложения трябва да бъдат създадени възможно най-големи. Най-лесният начин да направите това е да използвате някои CSS:
Локален HTTP сървър може да бъде създаден, за да предостави съдържанието за смартфона. Разработчиците, работещи под Unix, могат да използват малка програма на Python съгласно схемата в Листинг 2 - под Python 3 трябва да заредят друг пример вместо SimpleHTTPServer.
След това заредете програмата на избран от вас смартфон и направете дълго натискане. Цветът на фона на елементите се променя както в Фигура 2 показани.
Фиг. 2: От светло до тъмно синьо, тук под Chrome за Android
В допълнение към събитието longTap, разработчиците могат да извличат и отделни кранове. Има три събития за това: докосването приема всички събития докосване, докато singleTap и doubleTap насочват към определени видове докосване. Swipes могат да бъдат обработвани с помощта на методите swipe, swipeLeft, swipeRight, swipeUp и swipeDown. Тук обаче е необходимо тестване, тъй като те не работят еднакво във всички браузъри.
Форма бързо
Zepto идва с пълно изпълнение на Ajax. Тъй като обработката на AccessControl and Co. работи, ние искаме само да представим сериализацията тук. За тази цел се използва модулът Form, който е включен в стандартното разпределение съгласно таблица 1. Следната структура на DOM трябва да служи като тестов сноп:
Резултатите от формуляр могат да бъдат събрани под формата на масив, както и в директно прехвърляеми низ. Zepto предлага собствен метод, който позволява на обработващите събития да бъдат записани в изпратеното събитие. От съображения за пространство ние не произвеждаме пълен резултат тук. Фигура 3 показва как изглеждат двата елемента в дебъгера.
Фиг. 3: Zepto автоматично сериализира данни от формуляри
Заключение
Във всички съображения не трябва да се пренебрегва, че развитието на Zepto се забави значително през последните няколко месеца. Докато jQuery продължава да актуализира по няколко всеки ден, сега в Zepto цари почти пълна тишина.
Това не е непременно недостатък за разработчиците, тъй като библиотеката като цяло прави това, което трябва. Фактът, че трябва да си подадете ръка в случай на грешка, е забележим недостатък. Освен това съвместимостта с библиотеки на трети страни винаги е „Може би“. Ако актуализацията унищожи приложението, доставчикът на jQuery-базирана библиотека обикновено не се интересува много от вашия доклад за грешка.
Списание PHP
Тази статия е публикувана в списание PHP. Списанието PHP обхваща широк спектър от теми, които са от съществено значение за успешното уеб развитие.