Наступні приклади покажуть два способи ініціалізації елемента "вибір дати". Першим способом будемо "ініціалізувавши все підряд" і другий приклад буде використовувати принцип "ініціалізувавши в потрібний момент"
приклад розмітки
Для кращого пояснення ідеї, я постараюся показати спочатку приклад коду, а далі пояснити, що в ньому відбувається. Ми будемо використовувати наступний HTML для розмітки нашого коду.
Я використовую Twitter Bootstrap для створення презентабельного UI виду і ось чому у мене є додаткові класи в наведеному вище коді.
Код показує просту форму з різними елементами введення. У формі у нас будуть різні поля даних, які ми б хотіли ініціювати використовуючи jQuery UI datepicker віджет.
Ініціалізіруем все підряд
Наступний jQuery код виглядає знайомим з багатьох фрагментів, які ви має бути бачили в інеті, в уроках, в своїх програмах.
Я використовую маленьку moment.js бібліотеку для роботи з датами. Це досить-таки зручна бібліотека, яка багата різними функціями.
Розберемося з кодом:- Чекаємо поки документ не буде готовий перед запуском решти нашого коду.
- Відразу після готовності DOM вибираємо все input елементи сторінки з класом date.
- jQuery буде неявно ітерованих через свій внутрішній набір елементів і форматувати кожен за допомогою datapicker jQuery UI віджета.
Переваги даної техніки
- При взаємодії користувача з будь-яким з input.date елементів, вони будуть вже встановлені і тому будуть відповідати дуже швидко.
Недоліки даної техніки
- Ваш код повинен очікувати готовності DOM перед тим, як він зможе вибирати елементи. Було б непогано, якби ви могли використовувати час між тим, коли jQuery виконується і коли DOM готова.
- У селектора немає ніякого КОНТЕКС, тому він шукає по всій DOM input елементи з класом date. Це буде полуоптімальний селектор, так як немає обмеження по межах або контексту того, що іщётся.
- Код инициализирует всі елементи (прихований цикл) потрібні вам вони чи ні. Звичайно ж, віджети готові, коли вам вони потрібні, але чи потрібен весь цей код на фронті сайту?
- Купа коду виконується, який взагалі не потрібен, поки не завантажилася повністю сторінка. Все це впливає на швидкість завантаження сторінки, що є ключовим моментом для користувачів.
Ініціалізація в потрібний час
Наступний сниппет трохи відрізняється від попереднього прикладу, але результат той же і плюси-мінуси інші. Подивіться уважно і знайдіть відмінності.
Я використовую toastr бібліотеку для виведення повідомлень-індикаторів про ініціалізації елементів. Бібліотека була створена Hans Fj? Llemark і John Papa.
- Ми негайно встановлюємо оброблювач подій в очікування вводу користувача перед ініціалізацією введення дати - datepicker. Це дозволить коду виконуватися відразу ж після виконання jQuery на сторінці, навіть перед тим, як буде готова DOM. Нам не треба чекати готовності DOM, тому що ми делегуємо наше подія до контексту документа - document.
- Ми не инициализируем все input.date елементи, тільки стежимо за подією focus. Ця подія буде поширюватися вгору (як міхур) по DOM дереву, поки не дійде до документа - document і в цій точці jQuery визначить чи співпадає сфокусований предмет з збереженими в ньому метаданими. Це знаходження відповідності метаданих є дуже швидким, тому що порівнюється тільки цей "шалений" селектор з одним DOM елементом, на який потрапив фокус, а не все DOM дерево.
- Наш просунутий селектор шукає input.date елемент, який не має класу hasDatepicker. Якщо він збігається, то цей DOM елемент буде инициализирован. Після цього, якщо на елементі побував фокус, то пізніше селектор нічого очікувати йому відповідати, бо jQuery додала клас hasDatepicker при створенні віджету для нього.
Переваги даної техніки
- Дуже швидка швидкість завантаження, тому що ви тільки додаєте обробник подій до документа document з деякими метаданими, які будуть використані пізніше
- Немає ніяких СЕЛЕКТА jQuery при готовності DOM
- Немає прихованого циклу для ініціалізації елементів
- Тільки елементи, які повинні використовуватися, не започатковано, тому немає виконання надлишкового коду
- Ініціалізувалися елементи, на які потрапив фокус, тільки один раз
- Ця техніка також працює для динамічно додаються полів "введення дати", що додаються до DOM
Недоліки цієї техніки
- Є деякі накладки в тому, що фокус події потрібно підніматися нагору документа document і змушувати jQuery перевіряти метадані на відповідність селекторам елементу в запиті, але це всього лише росинка, так як тестується лише один елемент.
висновок
Ви постійно хочете обмежити повну ініціалізацію всього. Буде корисним, якщо ви почнете думати про затримку ініціалізації до того моменту, коли це необхідно або прямо перед цим моментів. Роблячи так, ви можете використовувати час прямо після виконання jQuery і не чекаючи готовності DOM, далі ви можете використовувати цей дорогоцінний час під час завантаження сторінки. На додаток у вас з'явиться дивний шалений jQuery селектор, дуже швидкий, тому що він тільки перевіряє один елемент, який потрапив у фокус, а не все DOM дерево.
Велике дякую за допомогу.