Следващите примери показват два начина да се инициализира на елемента "Избор на дати". Първият начин ще бъде "Инициализиране всички в един ред", а втория пример ще използваме принципа на "инициализира в точното време"
Разделяне пример
За да се обясни по-добре идеята, аз ще се опитам да покажа първия примерен код, а след това да обясни какво се случва в него. Ние ще използваме следния HTML маркирането за нашия код.
Аз използвам Twitter за първоначално зареждане, за да създадете потребителски интерфейс приличен външен вид и затова имам допълнителни часове в кода по-горе.
Код показва проста форма с различни входни елементи. Под формата ще имаме различни полета за данни, които искаме да се инициализира с помощта datepicker джаджа JQuery UI.
Initialize всички в един ред
Следващият JQuery кода изглежда познат от много фрагменти, които трябва да се видят в интернет в класната стая, в своите приложения.
Аз използвам една малка moment.js библиотека за работа с дати. Това е доста удобно библиотека, която е богата на различни функции.
Ние ще се разбере с кода:- Чакаме, докато документът е готов, преди да започне до края на нашия код.
- Веднага след DOM е готов изберете всички входни елементи на страницата с датата на класа.
- JQuery е имплицитно обхождане чрез вътрешното си набор от елементи, и инициализира всеки използване datapicker JQuery UI джаджа.
Предимства на техниката
- Когато потребителят взаимодейства с някой от input.date елементи, те ще са вече инсталирани и затова ще реагира много бързо.
Недостатъците на тази техника
- Вашият код следва да изпреварват желание DOM, преди той да бъде в състояние да изберете елементи. Би било хубаво, ако бихте могли да използвате времето между JQuery се извършва и когато DOM е готов.
- В селектор не Konteksa, така че той гледа на целия DOM входни елементи с датата на класа. Тя ще е най-оптималната за избор, тъй като няма ограничение за границите или контекста, че ischotsya.
- Код инициализира всички елементи (латентна цикъл), които се нуждаят от тях, или не. Разбира се, приспособления готови, когато имате нужда от тях, но ако имате нужда от всичко това код на лицевата страна на сайта?
- Купчина код на програмата, която не е необходима на всички, докато страницата се зареди напълно. Всичко това се отразява на скоростта на зареждане на страница, която е от ключово значение за потребителите.
Инициализация в точното време
Следващият фрагмент е малко по-различен от предишния пример, но резултатът е един и същ и плюс или минус другия. Разгледайте внимателно и да намерят разликите.
Аз използвам toastr библиотека, за да покажете на индикатора инициализация елемент съобщение. Библиотеката е създадена от Ханс Fj? Llemark и Джон татко.
- Ние веднага се създаде манипулатор събитие да се изчака, преди инициализиране потребителят въведе датата - datepicker. Това позволява на код, за да действа веднага след JQuery на страницата, дори преди вие ще бъдете готови да DOM. Ние не трябва да се очаква, DOM готова, защото ние делегира нашето събитие в контекста на документа - документ.
- Ние не се инициализира всички input.date елементи, просто следвайте фокуса на събитието. Това събитие ще се разпространява нагоре (балон) на DOM дървото, докато стигнете до документ - документ, и в този момент, да съвпада JQuery определи дали фокусирания обект с съхраняват метаданни в него. Е да се намери подходящ метаданни е много бързо, защото тя сравнява само "луд" за избор с един DOM елемент, който бе в центъра, а не всички DOM дървото.
- Нашата модерна селектор input.date търси позиция, която не прави hasDatepicker клас. Ако тя съвпада, а след това на елемента DOM ще се инициализира. След това, ако даден елемент е посетил във фокуса, а по-късно селектора няма да го съпоставим защото JQuery е добавил hasDatepicker клас при създаването на една джаджа за него.
Предимства на техниката
- Много бързо скорост на изтегляне, защото просто добавете манипулатор събитие към документа за документ с метаданни, които ще бъдат използвани по-късно
- Не е желанието на ваше Изберете JQuery DOM
- Няма скрити цикъл да се инициализира елементите
- Само продукти, които трябва да се използват, се инициализира, така че няма изпълнение на излишък
- Инициализира с елементите, която е в центъра, след като
- Тази техника работи и за динамично добавени полета "дата на влизане", добавя към DOM
Недостатъците на тази техника
- Има някои капаци, които се фокусират събитие трябва да се изкачи на документа и да JQuery метаданни документ за проверка на елемент за избор в молбата, но това е само капка роса, тъй като изпитва само един елемент.
заключение
Постоянно искате да ограничите общата сума на всички инициализация. Това ще бъде от полза, ако започнем да мислим за забавянето на инициализиране до момента, когато това е необходимо, или точно преди този момент. По този начин, можете да използвате времето непосредствено след JQuery и без да се чака DOM е готов, а след това можете да използвате тази ценно време по време на зареждане на страницата. В допълнение, ще имате странно бездомно JQuery за избор, това е много бързо, защото тя проверява само един елемент, който дойде на фокус, а не всички DOM дървото.
Благодаря ви много за вашата помощ.
Свързани статии