- PVSM.RU - https://www.pvsm.ru -
Перевод статьи «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 оберток элементов.
$(‘div.active’)
в массив элементов, которыми вы можете оперировать. Я знал, что Sizzle составляет большу́ю часть jQuery, но я был удивлен узнав, насколько он огромен, на самом деле. Это самая большая фича, в плане количества строк, в исходном коде jQuery. По моим расчетам он составляет 22% всей кодовой базы. Это затмевает следующую по величине вещь в jQuery — $.ajax
, который занимает всего лишь 8% кода библиотеки.
_.filter
, он также принимает два аргумента, массив элементов и функцию, и возвращает элементы, которые прошли тест функции.
load
. Внутри, jQuery передает специальный флаг noBubble: true
, для всех load
событий, так чтобы image.load события не могли всплывать вверх к объекту window (которые могут ошибочно восприниматься, как window.load).
jQuery.fx.interval
на свое собственное число.
$(‘div:gt(2)’)
возвратит все div'ы, кроме первых трех (индексация начинается с нуля). Если вы передадите в аргумент негативное число, JQuery посчитает обратно с конца выборки.
$(document).ready()
используется jQuery deferred, для определения, когда DOM полностью загружен.
typeof
, но знали ли вы, что jQuery предоставляет метод .type()
? jQuery версия более разумна, чем нативная браузерная версия. Например, typeof (new Number(3))
возвращает “object,” тогда как $.type(new Number(3))
возвращает “number.” Добавлено: Как ShirtlessKirk указал в комментариях, $.type возвращает тип возврата метода .valueOf(). Так что правильнее сказать, что $.type скажет вам тип возвращаемого значения объекта.
$(‘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();
});
$.fn.on
принимает объект для подключения к множеству событий одновременно? Пример из доков jQuery:
$( "div.test" ).on({
click: function() {
$( this ).toggleClass( "active" );
}, mouseenter: function() {
$( this ).addClass( "inside" );
}, mouseleave: function() {
$( this ).removeClass( "inside" );
}
});
$.active
возвращает количество активных XHR запросов. Это может пригодиться для ограничения количества одновременно активных AJAX вызовов.
.parents()
, .next()
и .prev()
, но я не знал о существовании Until версий этих методов. По существу, эти методы будут отбирать parents/next/prev элементы, пока не дойдут до переданного остановочного элемента.
true
первым аргументом в метод clone
.
true
во второй аргумент. Это называется «глубинное клонирование». Второй аргумент по умолчанию равен первому (который, по умолчанию, равен false). Таким образом, если первый аргумент true
и вы хотите, чтобы второй был равен true
, вы можете опустить второй аргумент.
В более ранней версии этой статьи было сказано, что возвращаемое значение функции-аргумента из примера №5 должна быть строка разделенная запятыми. Оказывается, это должна быть строка разделенная пробелами. Спасибо, Джонатан!
Автор: jojo97
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/65436
Ссылки в тексте:
[1] Sizzle: http://sizzlejs.com/
[2] Этот метод: http://api.jquery.com/jquery.grep/
[3] Источник: http://habrahabr.ru/post/230449/
Нажмите здесь для печати.