JQuery на диета Вовед во библиотеката Zepto JavaScript
Освен дебатите за jQuery и JavaScript, кои се неизмерно смешни за класичните компјутерски научници, мора да се напомене дека jQuery е ништо друго освен мало. Во време на мрежи за испорака на содржина, ова можеби не е од особено значење: Ако вклучите широко користена библиотека од популарен CDN, можете да се потпрете на друга веб-страница за да се осигурате дека датотеката е веќе во кешот на прелистувачот на корисникот. Сепак, во пракса, секогаш постојат ситуации каде што е важна максималната изведба. Пример за ова би биле JavaScript-базирани процесни компјутери, каде што достапната меморија за кодови не е неограничена и дали слабиот процесор зависи од секој килобајт код (време на започнување на клучни зборови). Покрај тоа, секогаш постојат сценарија во кои мрежите за испорака на содржина не се дозволени или во кои вие како развивач треба да поддржувате прелистувачи кои повеќе не се опфатени со jQuery со текот на времето.
Во овој момент штрајкува часот на библиотеката наречена Зепто (поле: „Мила на рачниот компјутерски програмер“). Проектот, замислен од Томас Фукс во 2010 година, е зимзелен во светот на JavaScript и, во голема мера, е компатибилен со jQuery. Пред сè, сепак, производот управува со 5 или 10 KB компајлиран код, во зависност од конфигурацијата.
Оваа статија дава краток вовед во библиотеката. И благодарение на многу компактниот дизајн, тука имаме дури и реална опција да го покриеме производот како целина.
Омилен на рачниот компјутерски програмер
Томас Фукс првично го намести Зепто како разочарана алтернатива за работа со PhoneGap. Многу интересен список за компатибилност следи од овој факт. Покрај класиците, библиотеката во голема мера поддржува и некои поретки оперативни системи. Некои особено интересни кандидати вклучуваат Palms WebOS, постари верзии на Android, BlackBerry 10, па дури и стари верзии на Safari за iOS.
Јадрото модул на Зепто има минијатуризирана големина од само пет килобајти. Секогаш има сценарија во кои нема потреба од модули за проширување дискутирани во написот подолу и каде навистина може да поминете со големина на датотека од пет килобајти.
Прашање за модуларизација
Кога авторот на овие редови мораше да расклопи аналоген компјутер направен од Телефункен на австриски технички универзитет од трета класа пред многу години, тој се восхитуваше на високо модуларната структура на аритметичкиот astвер, која беше во процес на уништување. Тоа беше систем што навистина можеше да се расчлене на неговите одделни делови. Корисен и за поправки и за продажба, Телефункен беше во можност да изостави непотребни делови за да може поевтино да го понуди целиот систем.
Во Зепто, тие се потпираат на сличен концепт. Библиотеката се состои од добри десетина модули, кои се накратко сумирани во Табела 1.
| зепто | Основен модул | Да |
| настан | Екстензии за програмирање водено од настани | Да |
| ајакс | XMLHttpRequest | Да |
| форма | Методи за серизација на формулари | Да |
| т.е. | Поддршка за Internet Explorer 10 | Да |
| открие | Откривање на оперативниот систем на прелистувачот и домаќинот | Не |
| fx | Метод "Анимирај ()" | Не |
| fx_методи | Преддефинирани примери на анимации за Animate | Не |
| средства | Подобро управување со меморијата за iOS; експериментален | Не |
| податоци | Метод "Податоци ()" | Не |
| одложено | Можност за користење ветувања | Не |
| повратен повик | Проширува „$. Повици“ со можност за работа во одложен режим | Не |
| селектор | Емулира подмножество на избирачи на CSS на jQuery | Не |
| допир | Основна библиотека со екран осетлив на допир | Не |
| гест | Препознавање на движења за зумирање на нотка за зумирање | Не |
| магацинот | Синџирење на метод | Не |
| ios3 | Функциите на помошникот не се имплементирани според iOS 3 | Не |
Табела 1: Модулите од Зепто
Програмерите заинтересирани за сопствената верзија на Zepto ја постигнуваат оваа возвишена цел на два начина: Прво, целиот изворен код може да се преземе со цел да се состави нивната верзија со помош на алатки засновани на јазли. Алтернативно, може да се користи zepto градителот, кој откако ќе се отвори во кој било веб прелистувач, ин илустрација 1 корисничкиот интерфејс прикажан на екранот.
Сл. 1. Благодарение на градителот на зепто, програмерите не мора да се борат со командната линија на јазолот
Во интерес на едноставноста, сепак сакаме да работиме со стандардната дистрибуција во овој момент, што е доставена од стандардните поставки од страна на градителот или, пак, може да се преземе директно од веб-страницата на проектот.
За следните чекори сакаме да ја користиме минимизирана верзија. За време на притискање, датотеката е zepto.min.js и чека нови сопственици. Преземете го на погодно достапна локација на датотечниот систем и, во следниот чекор, креирајте тест-ремен со кодот прикажан на списокот 1.
Овој - многу едноставен - пример илустрира неколку интересни елементи на библиотеката. Прво, производот секогаш поставува глобална променлива наречена Зепто, која се повикува на библиотечниот код како целина. Второ, преносот на функциите во Zepto резултира со зачувување на референците во внатрешната меморија што се обработува откако ќе се случи настанот DomContentLoaded.
Функциите запишани откако ќе се случи овој настан, во меѓувреме се извршуваат веднаш од рамката. Ако поставите друго поле за пораки во рамките на Зепто (функција ($), што исто така ќе биде во прицврстување на Зепто (функција ($)), на екранот ќе добиете две пораки:
Ова однесување, чудно на прв поглед, се должи на фактот дека рамката е веќе иницијализирана по обработката на F1 и затоа веднаш се извршува одредената носивост. Доволно забавно, полето за „внатрешна“ порака дури се појавува тука пред вашиот колега кој е уште надвор.
Зепто се разликува од jQuery по тоа што го пополнува знакот за долар со сопствен код ако променливата е слободна за време на вчитувањето на библиотеката. Ова доведува до проблеми, особено кога комуницирате со библиотеки, бидејќи тие се користат и во жестокиот оспорен именски простор на доларот. Ако сакате повеќе информации за ова, бидете z. На пример, повикајте се на страницата GitHub на Питер Кинмонд.
Главната и државна задача на Зепто е сигурно ракување со објекти на ДОМ. За да ја испробаме оваа одлика, треба да додадеме неколку тест елементи на телото на нашиот елемент. Како прв пример, да разгледаме група од
Програмерите кои се навикнати на jQuery во овој момент забележуваат неколку работи со кои треба да бидат запознаени: Знакот за долар прифаќа и параметри на низата кои се познати како избирачи и овозможуваат компактна интеракција со дрвото ДОМ.
Ние ја поминуваме низата под овде за да ја упатиме рамката да обезбеди низа од сите нив
Разновидноста е важна - маркетинг преку Интернет 2020 година
со Астрид Крамер (Астрид Крамер Консалтинг)
Право на приватност - можност за UX
со Луц Шмит (Дизајн и консалтинг на Луц Шмит)
Одмазда на структурирани податоци
со Стефан Цифка (Performics Germany GmbH)
Овде е интересно што рамката обезбедува три параметри. Во прилог на реалниот тековен елемент и континуирана индексна променлива, Зепто исто така дава упатување на главната област од причини на погодност со цел да се олесни спроведувањето на логиката.
Вистинскиот товар може да се најде во корпусот. Сепак, Зепто тука става мала стапица што ги фрустрира неискусните програмери. Рамката враќа нормални JavaScript елементи во повторувачи, кои природно не ги изложуваат различните функции и методи декларирани од Zepto. За оваа причина, ние треба да ја користиме синтаксата $ (ставка) во првиот чекор за да создадеме Zepto објект од доставениот елемент DOM. Ова е тогаш html () -компатибилно со сопствената функција на Zepto. Како и да е: Вчитајте ја готовата програма во прелистувач по ваш избор за да уживате во низа од различни броеви.
Разни мали помагачи
Забележете во овој контекст дека парсерот ДОМ испорачан од Зепто содржи само подмножество на функциите и параметрите имплементирани во jQuery. Особено досадно ограничување за програмерите зависни од CSS е недостатокот на наставки за избирање врз основа на стилови што се познати од jQuery. Ако апсолутно треба да ги користите детално опишаните карактеристики во вашата програма, можете да се вратите на модулот наречен селектор. Имајте предвид, сепак, дека овој дел од производот се нарекува експериментален и традиционално работи прилично лошо отколку добро во мобилниот сектор.
Во прилог на парсерот ДОМ, основниот модул од Зепто нуди и разни други помошни функции. На пример, методите isX се секогаш популарни, со кои можете да проверите дали одреден елемент е од одреден тип:
Заради едноставноста на овие функции, не сакаме да примениме пример тука. Многу е поинтересно дополнително да се анализираат функциите за манипулација со ДОМ содржани во основниот модул. Со scrollLeft и scrollTop има група на методи кои овозможуваат одредување и програмска манипулација со позицијата на движење на екранот.
Друг смешен помошник се вика Grep: $ .grep (ставки, функција (ставка)< … >) Ray низа. Програмерите со искуство со Уникс можат да погодат што следува тука: Покрај полето, методот добива функција за повратен повик што се повикува за секој елемент од низата. Резултирачката низа е тогаш поле од оние елементи за кои повратокот се врати точно - убава алатка за десеткување на полињата засновани на сложени критериуми.
Тед му испраќа поздрав
Забелешките на Тед Фајсон за програмирање насочено кон настани треба да бидат класични досега. Дури и по добри десет години откако беше објавена, соодветната книга сè уште е на продажба. Стандардната дистрибуција на Зепто е исто така испорачана со систем за управување со настани, што им ја зачувува на развивачите потребата да интегрираат други рамки како што се Radio.js и Co.
Ние исто така сакаме да спроведеме мала програма насочена кон настани тука. За да го направите ова, креирајте нова верзија на тест-ременот отпечатен погоре, кој сега мора да биде опремен со копче. Бидејќи декларацијата на копчињата не е една од најголемите мистерии на системската технологија, ние не го печатиме потребниот код тука.
Наместо тоа, да ги разгледаме изворите на настанот. Зепто поддржува настани во ДОМ, како и настани создадени од самиот развивач. Ние сакаме да започнеме тука со домашен настан. Регистриран е со рамката користејќи го методот $. Настан:
Првиот параметар пренесен на методот е низа што го специфицира името на настанот. Споредбата помеѓу изворите на настаните и мијалниците на настаните се одвива исклучиво преку споредба на низа. Второто поле одредува како треба да се дистрибуира настанот. Во овој момент ја деактивираме одликата за клокотот, што очигледно само делумно работеше во времето на притискање.
Во следната точка има малку посебна карактеристика. Во принцип, настаните може да се мапираат само со користење на моделот на објект на документ. Ова значи дека и изворите на настаните и мијалниците на настаните во принцип мора да бидат поврзани со елемент ДОМ.
За да се заобиколи овој проблем, препорачливо е да се чуваат домашни настани во „предмет за собирање“. Телото за документи е добро прилагодено за ова, и затоа го користиме за најавување на менаџер на настани користејќи го методот вклучен предвиден за оваа намена:
Во следниот чекор користиме за да го регистрираме настанот со кликнување на копчето што припаѓа на ДОМ и да го поврземе со друг управувач на настани:
Единствената интересна работа во овој контекст е дека настанот исто така мора да се активира со употреба на објект ДОМ. Потоа, отворете ја датотеката во прелистувач по ваш избор и кликнете на копчето. Прозорецот со полето за пораки се појавува на екранот како што се очекуваше.
Една од најинтересните карактеристики на системите управувани од настани е можноста за проследување настани во одредени „канали“. За да го направиме ова, сакаме да го прошириме нашето мало тест-ремен со друг управувач на настани:
Од техничка гледна точка, тука има само неколку разлики. Сега напишуваме управувач со настани и на копчето и на нивото на телото на документот. И едните и другите покажуваат поле за пораки, поради што броењето на прикажаните прозорци дава информации за извршувањето на програмата. Кога се активира со управувачот на настани отпечатен погоре, на екранот се појавуваат две полиња за пораки. Забавно, ова однесување е независно од вредноста на променливата меур. Интересно однесување е прикажано при прилагодување на управувачот со кликнување:
Ако го активирате настанот директно во Документ. Тело, ќе забележите дека на екранот се појавува само порака. Тоа е затоа што Зепто во основа ги пренесува настаните само нагоре, ако воопшто ги има. Атрактивно решение за овој проблем е да се користи методот тригерХендлер:
Настан што се активира со тригест Хандлер е ограничен од Зепто на елементот ДОМ во кој е повикан методот. Во нашиот случај, ова значи дека се користат само оние управувачи на настани што се создадени на ниво на копче.
И сега мобилен!
Како следна задача, сакаме да се свртиме кон справување со настаните на екран осетлив на допир. Дури и ако Zepto првично беше наменет како мобилна рамка, овој модул не е доставен со целокупната рамка и мора да биде интегриран пред да може да се користи за прв пат.
Ако сакате да ја зачувате работата со прилагодување дискутирано погоре, исто така можете да ја преземете датотеката touch.js дадена и да ја интегрирате во рутината за тестирање според следнава шема:
За да ги тестираме различните елементи, треба да создадеме структура составена од неколку елементи во телото: поради погодност, се ограничуваме на две ознаки LI:
Дури и ако овој напис не може да се занимава со употребливоста на екранот на допир како целина, треба експлицитно да се истакне дека контролните елементи во рачните компјутерски апликации треба да се создадат што е можно поголеми. Најлесен начин да го направите ова е да користите некои CSS:
Може да се создаде локален HTTP сервер за да се обезбеди содржина за паметниот телефон. Програмерите што работат под Unix можат да користат мала програма Python според шемата во списокот 2 - под Python 3 тие треба да вчитаат друг пример наместо SimpleHTTPServer.
Потоа, вчитајте ја програмата на паметен телефон по ваш избор и допрете долго. Бојата на позадината на елементите се менува како во Слика 2 прикажано.
Сл. 2: Од светло до темно сина, тука под Chrome за Android
Покрај настанот longTap, програмерите можат да повратат и индивидуални допири. Постојат три настани за ова: допрете ги прифаќа сите настани на допир, додека singleTap и doubleTap таргетираат одредени типови на допир. Со лизгање може да се ракувате користејќи методи за лизгање, удар, лево, удар, право, удар и удари долу. Сепак, тука е потребно тестирање, бидејќи тие не работат подеднакво под сите прелистувачи.
Форма во брзо
Зепто доаѓа со целосна имплементација на Ајакс. Бидејќи управувањето со AccessControl и Co. е во фаза на работа, ние само сакаме да ја претставиме серизализацијата тука. За таа цел се користи модулот Форма, кој е вклучен во стандардната дистрибуција според Табела 1. Следната структура ДОМ треба да служи како тест-ремен:
Резултатите од формата може да се соберат во форма на низа, како и во директно пренослива низа. Зепто нуди сопствен метод што им овозможува на управувачите со настани да бидат запишани во настанот за испраќање. Заради простор, ние тука не произведуваме целосен излез. Слика 3 покажува како изгледаат двата елементи во дебагерот.
Сл. 3: Зепто автоматски ги серизира податоците од формата
Заклучок
Според сите размислувања, не треба да се занемари дека развојот на Зепто масовно забавуваше во текот на изминатите неколку месеци. Додека jQuery продолжува да се ажурира секој ден, сега во Зепто владее скоро целосна тишина.
Ова не е нужно неповолна положба за програмерите, сепак, бидејќи библиотеката, во голема мера, прави што треба. Фактот дека треба да подадете рака во случај на грешка е значителен недостаток. Покрај тоа, компатибилноста со библиотеките на трети страни е секогаш „Можеби“. Ако ажурирањето ја уништува апликацијата, давателот на библиотека заснована на jQuery обично не е многу заинтересиран за вашиот извештај за грешки.
Списание PHP
Оваа статија е објавена во списанието PHP. Списанието PHP опфаќа широк спектар на теми кои се неопходни за успешен веб-развој.