[Перевод] 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 должна быть строка разделенная запятыми. Оказывается, это должна быть строка разделенная пробелами. Спасибо, Джонатан!
