преди 7 години ...
Изведнъж се движите DOM направи проста
В онези дни, в DOM навигацията е много трудно. Някой може да каже - ако се оказа да се направи нещо в Firefox 1.5, а след това в IE6 тя не работи.
Лекотата, с която можете да разгледате JQuery, стана ми предимство. Всички навигация в DOM се извършва с помощта на CSS-селектори (разбрах, че е някой луд магия на "черната кутия", която излезе Джон Resig) - най-важното е, че спестява ограничените си интелектуален ресурс, а когато аз получавах имах нужда DOM елементи мога да правя с тях каквото си искате (за да се покаже, да се крият, анимиране и т.н.)
разбиране Аякс
Така че, аз трябваше да работя с един обект XMLHttpRequest. Когато го видях за първи път, бях си струва усилията, за да се разбере как onreadystatechange събитието и няколко this.status и this.readyState. на JQuery, както и редица други библиотеки, подредени с ужаса, които бяха XHR-заявки в IE чрез ActiveX ...
JQuery незабавно и окончателно стана обичайната ми инструмент. Това беше моя "Швейцарската армия нож", да заеме заглавието на доклада на Адам!
Назад към бъдещето: днес
Нека да губи лента напред и назад до наши дни. Какво се е случило през годините?
Имаше доста в тези седем години. Вероятно една от най-значимите стъпки напред бе появата в браузърите querySelectorAll.
Андрю Lunney (на PhoneGap и Adobe) е написал изключително проста функция:
Това е просто и красиво.
Взех идеята си, разработен е ли малко и да се използва в редица съвсем конкретни проекти, като добави поддръжка за cheyninga, цикли и опростен синтаксис. В синтезиран вид всичко отнема по-малко от 200 байта. Смисълът на това е, че сега имаме вградена поддръжка браузър за редица функции, както и аз се опитвам да се вземат под внимание на публиката на вашия проект, преди по подразбиране свържете JQuery.
В някои случаи, аз винаги използвайте JQuery
Преди да говорим за това как мога да го направя, без да JQuery, за да бъде "изчистена" - нека ви кажа за това, кога мога да включа JQuery в проекта. Има някои много специфични причини, които ме карат да било започне директно от JQuery, или да го включите с някои специално писмено решение.
Преди това имах резервация за случая, когато аз точно не използвате JQuery: ако се опитам да се възпроизведе бъг в браузъра, никога не използвам библиотеката. Ако се опитвате да намерите бъг, за да може да подадете сигнал за проблем, е необходимо, че в примера възможно най-малки кода (разбира се, с изключение на случаите, когато изпращате съобщение за грешка вътрешно JQuery!).
1. Когато даден проект трябва да работят в по-стари браузъри
BBC съвсем ясно изрази това, което те наричат модерен браузър. и след като си помисля това е знак, чрез който реша да се включат JQuery по подразбиране или не.
Ако аз знам, че трябва да работя с unmodern браузъри, и те са част от основната аудитория, тогава ще започнем с JQuery в кода си.
Какво означава "модерен"? Като цяло, отговорът е прост: ако браузърът поддържа querySelectorAll. Би Би Си се прилага следния тест, за да отговаря на съвременните изисквания:
Знам наизуст, че IE8 не поддържа addEventListener (въпреки че има Полифем), така че ако тази подкрепа браузър е важно да се проектът, осъзнавам, че аз не искам да се започне един проект с хакове за IE8.
Не че искам да кажа, че проектите, които се стартират без JQuery, няма да подкрепят IE8. По-скоро - трябва да започнете малък и да направи за развитието на един прост, за да започнем с това. Ако започна проект с един куп хакове - няма край на проблемите.
И мисля, че това е така ", когато сложността превишава простотата."
2. Когато правя нещо, евтини и весел
Ако се създаде определена концепция, да тествам една идея или просто нещо, което да се закрепи и изпратете в JS Бин. Аз обикновено просто добавете JQuery по подразбиране. Така че не е нужно допълнително време, за да помисли.
Без JQuery!
Може би си мислите: "Така че, Реми използва JQuery, но ако не, тогава просто презапишете всички функции себе си?"
Аз не искам да изобретяваме колелото. Ако намеря, че без развитие на JQuery, аз в крайна сметка се копира от нулата своята функционалност, а след това, разбира се, аз съм просто губите губи времето си.
Не, това не е така. Просто има доста сценарии, при които ще пишат кода за вашата кандидатура, без библиотеката, въз основа на вградения в областта на технологиите браузър. Ако някои от тези технологии не се поддържат в определен браузър, не мога да се прибегне до polyphyly - но само след внимателна преценка и разбиране, че има смисъл.
И така, как мога да живея без JQuery и колко пълен може да се счита за подкрепа на необходимата технология в браузъри?
document.ready
Дори когато използвам JQuery, ако (или за фирмата си) има контрол върху проекта, аз много рядко се използва document.ready (или кратката версия: $ (функция)).
.ATTR ( "стойност") и .attr ( "HREF")
Винаги се чувствам тъжен, когато виждам как JQuery се използва, за да получите стойността на елемента :
Това не е JQuery. Това е просто нормална практика. Необходимо е, че току-що бе написано на кода:
И все пак хората често използват JQuery, за да получите HREF връзка: $ (това) .attr ( "HREF"). но тя може да бъде доста лесно да се измъкнем от пътя и DOM: this.href. Моля, обаче, имайте предвид, че this.href малко по-различен: той е абсолютен път, тъй като ние говорим за него на DOM, а не на самия елемент. Ако искате да получите стойността на атрибута (тъй като работи в случай на JQuery), можете да използвате this.getAttribute ( "HREF").
И все пак има един сценарий, в който инсталирате класа на елемента, и тук също, че не е нужно на JQuery, ако просто добавите клас. Колко пъти съм виждал:
Но защо когато можеш?
ако
вече не може да бъде всеки клас, лесно да се припише на нов ред (JQuery, също трябва да се свържат с хотела име на класа): document.body.className + = 'hasJS ".Тук ние започваме да се удрят в проблеми с имената на класовете и да следите какво елементи в един клас е и какво не е. Но има и такива браузъри функционалност.
classList - добавяне, изтриване, изключете
classList собственост на спецификацията на HTML5 се поддържа от всички нови браузъри (с изключение на IE9 - но в този случай мога да използвам Полифем).
Красива е, нали? А изтриете?
Или, можете да го направите:
Но най-впечатляващата вграден ключ подкрепа клас:
За да добавите още класове трябва да ги добавите като аргументи, разделени със запетаи:
Разбира се, има някои проблеми, като например този, с празен низ:
Ужасно! Но, от друга страна, знам, че проблемните области и да ги заобиколят от. По принцип, ние сме израснали, работа с браузъри е на тези принципи.
съхранение на данни
Магазин произволна точка данни се появява в JQuery до версия 1.2.3, и складови помещения - в 1.4, което е, за дълго време.
В HTML5, има вграден съхранение на данни в рамките на елементите, но между JQuery и вградена поддръжка е основна разлика: набор от данни в HTML5 не поддържа съхранение на предмети.
Но ако се съхранява низ или JSON, тогава вградена поддръжка работи перфектно:
За съжаление, няма вградена поддръжка в IE10 (разбира се, можете да добавите Полифем и всичко работи добре - но трябва да се вземат под внимание, когато се използва набор от данни).
Както вече казах, JQuery Аякс ми помогна да разбера напълно. Сега Аякс - това е доста проста. Разбира се, аз не разполагат с никакви допълнителни опции, но по-голямата част Аз съм просто правиш XHR GET или POST-заявки с JSON.
Кратко и ясно. XHR - това не е трудно, но сега има добра документация. Разбирането за това как XHR всъщност работи и че тя може да се направи, ни дава повече опции.
Какво ще кажете за напредъка на събитията? Събития, свързани с напредъка на изтеглянето? Какво ще кажете за изпращане ArrayBuffer. А ако искате да се справят с CORS горен и XML-поискана-с?
За да направите това, трябва да имате директен достъп до обекта на XHR (знам, че тя може да бъде получена от JQuery), а вие трябва да знаете как XHR и какво да правя с него, защото такива неща като, например, изтегляне на файлове чрез плъзгане и пускане Сега безумно лесно да се приложи с помощта на вградени функции.
И накрая, под формата!
JQuery-плъгин за плъгин форма валидиране е стабилен от първите дни на JQuery, и честно казано не работеше с форми много по-лесно.
Но независимо от потвърждаване от страна на клиента все пак ще трябва да се валидира на сървъра страна - това е необходимо във всеки случай, без значение какво правите валидиране.
Искаш ли да го направи задължително поле?
Искате ли да се даде възможност на потребителя да въвежда само определени символи?
Дори когато пиша за себе си кода, аз избирам requestAnimationFrame, вместо да използват анимации на базата на setInterval.
Джейк Арчибалд произвежда отлични пързалки, които се показват на проблема - не setInterval направи анимацията гладка, а съвсем скоро започва да се понижава рамки:
В допълнение, CSS-анимация преминават през една и съща таймера като requestAnimationFrame - ние искаме това да се използва.
Така че, ако браузъра ви го позволява, използвайте CSS-анимацията. Разбира се, това е по-трудно, отколкото $ foo.animate ( "бавно",
Но ако просто правим foo.classList.add ( "живата"). CSS класа анимация изпълни плавен преход позиция лява точка на елемента. И ако знаете, че това е само стойността на ляво, можете да използвате хардуерно ускорение, като направите translateX с translateZ (0).
Но това, което аз ви чуват да плача, как да извикаме функцията след края на анимацията? Също така е възможно. Въпреки, че синтаксисът малко гадно:
Моля, имайте предвид, че на е в края малки букви ...
Чифт хубави хора в Twitter ми показа един вид Полифем за JQuery. който допълва .animate функция, ако браузъра е достъпно CSS-анимация.
Затова моят въпрос: защо е тази приставка изисква задължително JQuery?
Освен: JQuery-плъгини - просто
Не знам защо, но аз наистина искам да се удари боли хората, които пишат тези JQuery-плъгин, който всъщност не се нуждаеше от JQuery. / Необходимо е да контролира емоциите,
@rem имам едно и също нещо. Мисля, че някъде там е група, в която тази помощ - и, според мен, е доста голям.
Аз наскоро е работил по проект и научих за fitText.js. Реших да го включи в своя код, но след това забелязах, че JQuery изисква.
Този проект използва следните методи JQuery:
- .удължи
- .всеки
- .широчина
- .CSS
- .на (над капацитета няма конкретна мисъл)
Всъщност, това е код на проекта:
използва за разширяване на съоръжението, в което само две възможности, така че да мога да го пренапише, както следва:
върнете this.each използва за обхождане на елементите. Да предположим, че искаме този код да работи, без да е JQuery: ако нашата функция fitText получите списък с елементи (от cheyninga ние не правим):
$ This.width () извлича ширината на контейнера, за да преоразмерите текст. За да направите това, ние трябва да се проектирани стилове и да вземат от тях ширината:
$ This.css използва за задаване на стойности, така че има нужда само да зададете стилове:
$ (Window) .От ( "преоразмеряване", преоразмеряване) придава на събитието манипулатор (ако искате да подкрепите в IE8, тя трябва да включва и addEvent):
В действителност, аз ще отида още по-далеч и да запази функцията за преоразмеряване на масива, и по време на преоразмеряване операции са преминали през масива, извършване на всички тези функции.
Разбира се, има нужда от малко повече работа, но тези промени са сравнително лесни за навигация, така че работата като JQuery-плъгин ще бъде за този проект допълнителна функционалност, а не изискване.
Моят тирада скоро да свърши: все още ме убива, когато видя Полифем, което изисква JQuery - но аз се признае и контра-аргумент: изключителната разпространението на JQuery, най-вероятно, не може да оправдае факта, че много проекти, написани с зависимостта от него.
заключение
Спра да мисля в парадигмата на «X не работи в браузъра Y". Излезте с различна перспектива. Какъв е проблемът да реша? Кой инструмент е най-подходящ? За кого е направил? Аз все още вярвам в методиката на прогресивно подобрение, но аз не разбирам забавно боричкане за да се поддържа една въображаема аудитория от потребители (по причина, че ние нямаме данни, които браузърите на потребителите ни).
Google (според моите последни данни) поддържа най-новите и предпоследните версии на браузъри. Аз също се опита да започне с подкрепата на тези версии.
Аз ще продължи да използва JQuery, както ми е удобно, а аз ще продължа да убеди своите читатели и слушатели, че предния край на разработчиците трябва да са наясно, че може браузъри, с които те работят.
Така че в крайна сметка по този въпрос и се надявам, че този текст е била полезна за вас.
Може би някои от вас вече знаят всичко (макар че, в този случай, аз имам един въпрос, защо четете това), но се надявам, че поне някой ми показа, че извън JQuery има цял един свят, а вие може да започнем да го овладеят в момента в един от своите проекти.
Въпреки това, повечето от вас, аз донесе снега през зимата. Вие вече сте се съгласи с мен. Вече вярвам в стандартите, направете го прави, учат и форма. Но вие трябва да помогне на хората, които не получават тази информация.
Трябва да споделят чувствата си с други хора. Сега - на експертите и трябва да помагат на другите, за да се постигне нивото си и да го надмине.
Конференцията ще се нуждаят от нови говорители и нови експерти: това сте вие.
Материали за статията
Zepto.js като алтернатива.
В действителност, има още един важен детайл за JQuery - това е 99% от вече кеширани в браузъра.
Всъщност, това е едно нещо - да напише прост функционалност, а другият - не е твърде проста. Той е тук, че рамката и спасяването, спестяване на време, намаляване на обема на кода и увеличаване на разбираемостта на кода някой друг. Когато кодът е много сложно, проектът често се влачат тези чудовища, които след това се оказва не проект, а дори и за непосредствените lagalovo машините. Особено тези, страдащи ExtJS и подобни неща. Колкото по-високо нивото на рамката, толкова по-надареният трябва да е на разработчика, тъй като той не само ще пишат алгоритмите, но също така могат да се преодолеят слабостите, присъщи на инструмент, използван. JQuery в този смисъл - тя е на ниско ниво и като цяло незабавно.
Съгласен съм с Вася. Въпреки това, както JQuery може да се пренебрегне, когато тя се използва от почти всички.
От друга страна аз съм все още се учат и аз не разбирам защо не може да замести polyphyly използване в IE, както и за нови браузъри, за да се пишат програми на вътрешния API.
И какъв е смисълът в JQuery 2 е още по-трудно да се разбере, тъй като той не поддържа старите ите.
Както пее в песента: "Jquery е нещо, което не можем да пренебрегнем Напиши по-малко, направи повече :).".
Статии от Tag
Свързани статии