18 несподіванок при читанні вихідного коду jQuery

      Переклад статті «18 Surprises From Reading jQuery's Source Code», David Aragon
 
Я люблю jQuery, і хоча я вважаю себе просунутим JavaScript розробником, я ніколи, до цих пір, не читав исходники jQuery з початку і до кінця. Ось кілька речей, які я при цьому дізнався:
 
 Примітка: Я використовую синтаксис
$.fn.method()
щоб вказати виклик
method
на вибірці елементів. Наприклад, коли я пишу
$.fn.addClass
, це позначає використання як
$(‘div’).addClass(‘blue’)
або
$(‘a.active’).addClass(‘in-use’)
.
$.fn
це прототип для jQuery обгорток елементів.

 
 
     
Вага Sizzle: Sizzle це движок jQuery для вибірок з DOM по CSS селекторам. Це те що перетворює
$(‘div.active’)
в масив елементів, якими ви можете оперувати. Я знав, що Sizzle становить більшу частину jQuery, але я був здивований дізнавшись, наскільки він величезний, насправді. Це найбільша фіча, в плані кількості рядків, у вихідному коді jQuery. За моїми розрахунками він становить 22% всієї кодової бази. Це затьмарює наступну за величиною річ в jQuery —
$.ajax
, який займає всього лише 8% коду бібліотеки.
 
 
 $. grep: Цей метод схожий на Underscore метод
_.filter
, він також приймає два аргументи, масив елементів і функцію, і повертає елементи, які пройшли тест функції.
 
 
 Bubbling застереження: jQuery забороняє спливання (bubbling) одного типу подій. Ця подія
load
. Всередині, jQuery передає спеціальний прапор
noBubble: true
, для всіх
load
подій, так щоб image.load події не могли спливати вгору до об'єкта window (які можуть помилково сприйматися, як window.load).
 
 
 Дефолтна швидкість анімації: jQuery анімує елементи змінюючи їх стилі у швидкій послідовності. Кожне з цих швидких змін називається "тик (tick)". Швидкість за замовчуванням для анімації, це тик кожні 13 мілісекунд, ви можете налаштувати це, перевизначивши
jQuery.fx.interval
на своє власне число.
 
 
 $. fn.addClass приймає функцію: Ми зазвичай передаємо рядок з іменами класів у функцію $. fn.addClass. Але вона також бере функцію. Передана функція повинна повертати рядок з іменами класів розділеними пропуском. Як бонус, ця функція приймає індекс елемента зі списку елементів, до яких вона застосовується, що дозволяє вам будувати розумні імена класів.
 
 
 Те ж може і $. fn.removeClass: Цей метод також бере функцію, як у методі вище. Передана функція також бере індекс елемента.
 
 
 Псевдо-селектор: empty Цей зручний псевдо-селектор вибирає елементи без дочірніх вузлів.
 
 
 Псевдо-селектори: lt і: gt: Ці псевдо-селектори вибирають елементи по їх індексом у вибірці. Наприклад,
$(‘div:gt(2)’)
поверне все div'и, крім перших трьох (індексація починається з нуля). Якщо ви передасте в аргумент негативний число, JQuery порахує назад з кінця вибірки.
 
 
 $ (document). ready () використовує обіцянки (promises): Виявляється, що jQuery використовує свій власний продукт. Всередині, старого доброго
$(document).ready()
використовується jQuery deferred, для визначення, коли DOM повністю завантажений.
 
 
 $. type: Я впевнений, ви всі знайомі з використанням
typeof
, але чи знали ви, що jQuery надає метод
.type()
? jQuery версія більш розумна, ніж нативна браузерна версія. Наприклад,
typeof (new Number(3))
повертає "object," тоді як
$.type(new Number(3))
повертає "number." Додано: Як ShirtlessKirk вказав у коментарях, $. Type повертає тип повернення методу. ValueOf (). Так що правильніше сказати, що $. Type скаже вам тип значення об'єкта.
 
 
 $. fn.queue: Ви можете отримати чергу ефектів елемента, за допомогою наступного коду:
$(‘div’).queue()
. Це корисно, якщо вам потрібно дізнатися, скільки ефектів ще мають бути застосовані до елементу. Навіть більш корисно самому додавати ефекти в чергу. З доків jQuery:
 
 
$( document.body ).click(function() {
$( "div" )
  .show( "slow" )
  .animate({ left: "+=200" }, 2000 )
  .queue(function() {
    $( this ).addClass( "newcolor" ).dequeue();
  })
  .animate({ left: "-=200" }, 500 )
  .queue(function() {
    $( this ).removeClass( "newcolor" ).dequeue();
  })
  .slideUp();
});

 
 Click події заборонені на неактивних (disabled) елементах: jQuery і не виконує жодних події кліка по відключеним елементам, хороша оптимізація, яка знімає з вас обов'язок перевіряти це самому.
 
 
 $. fn.on приймає об'єкт: А ви знали, що
$.fn.on
приймає об'єкт для підключення до безлічі подій одночасно? Приклад з доків jQuery:
 
 
$( "div.test" ).on({
click: function() {
  $( this ).toggleClass( "active" );
}, mouseenter: function() {
  $( this ).addClass( "inside" );
}, mouseleave: function() {
  $( this ).removeClass( "inside" );
}
});

 
 $. camelCase: Цей допоміжний метод перетворює тире-рядки в camelCase.
 
 
 $. active: Виклик
$.active
повертає кількість активних XHR запитів. Це може стати в нагоді для обмеження кількості одночасно активних AJAX викликів.
 
 
 $. fn.parentsUntil / $. fn.nextUntil / $. fn.prevUntil: Я добре знайомий з методами
.parents()
,
.next()
і
.prev()
, але я не знав про існування Until версій цих методів. По суті, ці методи будуть відбирати parents / next / prev елементи, поки не дійдуть до переданого зупинкового елемента.
 
 
 Аргументи $. fn.clone: ​​Коли ви клонуєте елемент, ви можете також клонувати його data атрибути та події, передавши
true
першим аргументом на метод
clone
.
 
 
 Інші аргументи $. fn.clone: ​​На додаток, ви можете клонувати data атрибути та події дочірніх елементів, передавши
true
в другій аргумент. Це називається «глибинне клонування». Другий аргумент за замовчуванням дорівнює першому (який, за замовчуванням, дорівнює false). Таким чином, якщо перший аргумент
true
і ви хочете, щоб другий дорівнював
true
, ви можете опустити другий аргумент.
 
 
 
 У більш ранній версії цієї статті було сказано, що повертається значення функції-аргументу з прикладу № 5 має бути рядок розділена комами. Виявляється, це повинна бути рядок розділена пропусками. Спасибі, Джонатан!
  
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.