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 оберток элементов.

1. Вес Sizzle: Sizzle ^[1] это движок jQuery для выборок из DOM по CSS селекторам. Это то что превращает $(‘div.active’) в массив элементов, которыми вы можете оперировать. Я знал, что Sizzle составляет большу́ю часть jQuery, но я был удивлен узнав, насколько он огромен, на самом деле. Это самая большая фича, в плане количества строк, в исходном коде jQuery. По моим расчетам он составляет 22% всей кодовой базы. Это затмевает следующую по величине вещь в jQuery — $.ajax, который занимает всего лишь 8% кода библиотеки.
2. $.grep: Этот метод ^[2] похож на Underscore метод _.filter, он также принимает два аргумента, массив элементов и функцию, и возвращает элементы, которые прошли тест функции.
3. Bubbling предостережения: jQuery запрещает всплывание(bubbling) одного типа событий. Это событие load. Внутри, jQuery передает специальный флаг noBubble: true, для всех load событий, так чтобы image.load события не могли всплывать вверх к объекту window (которые могут ошибочно восприниматься, как window.load).
4. Дефолтная скорость анимации: jQuery анимирует элементы изменяя их стили в быстрой последовательности. Каждое из этих быстрых изменений называется “тик(tick)”. Скорость по умолчанию для анимации, это тик каждые 13 миллисекунд, вы можете настроить это, переопределив jQuery.fx.interval на свое собственное число.
5. $.fn.addClass принимает функцию: Мы обычно передаем строку с именами классов в функцию $.fn.addClass. Но она также принимает функцию. Переданная функция должна возвращать строку с именами классов разделенными пробелом. В качестве бонуса, эта функция принимает индекс элемента из списка элементов, к которым она применяется, что позволяет вам строить умные имена классов.
6. То же может и $.fn.removeClass: Этот метод также принимает функцию, как в методе выше. Переданная функция также принимает индекс элемента.
7. Псевдо-селектор :empty Этот удобный псевдо-селектор выбирает элементы без дочерних узлов.
8. Псевдо-селекторы :lt и :gt: Эти псевдо-селекторы выбирают элементы по их индексу в выборке. Например, $(‘div:gt(2)’) возвратит все div'ы, кроме первых трех (индексация начинается с нуля). Если вы передадите в аргумент негативное число, JQuery посчитает обратно с конца выборки.
9. $(document).ready() использует обещания(promises): Оказывается, что jQuery использует свой собственный продукт. Внутри, старого доброго $(document).ready() используется jQuery deferred, для определения, когда DOM полностью загружен.
10. $.type: Я уверен, вы все знакомы с использованием typeof, но знали ли вы, что jQuery предоставляет метод .type()? jQuery версия более разумна, чем нативная браузерная версия. Например, typeof (new Number(3)) возвращает “object,” тогда как $.type(new Number(3)) возвращает “number.” Добавлено: Как ShirtlessKirk указал в комментариях, $.type возвращает тип возврата метода .valueOf(). Так что правильнее сказать, что $.type скажет вам тип возвращаемого значения объекта.
11. $.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();
    });
    

12. Click события запрещены на неактивных (disabled) элементах: jQuery не обрабатывает события клика по отключенным элементам, хорошая оптимизация, которая снимает с вас обязанность проверять это самому.
13. $.fn.on принимает объект: А вы знали, что $.fn.on принимает объект для подключения к множеству событий одновременно? Пример из доков jQuery:

    $( "div.test" ).on({
    click: function() {
      $( this ).toggleClass( "active" );
    }, mouseenter: function() {
      $( this ).addClass( "inside" );
    }, mouseleave: function() {
      $( this ).removeClass( "inside" );
    }
    });
    

14. $.camelCase: Этот вспомогательный метод превращает тире-строки в camelCase.
15. $.active: Вызов $.active возвращает количество активных XHR запросов. Это может пригодиться для ограничения количества одновременно активных AJAX вызовов.
16. $.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil: Я хорошо знаком с методами .parents(), .next() и .prev(), но я не знал о существовании Until версий этих методов. По существу, эти методы будут отбирать parents/next/prev элементы, пока не дойдут до переданного остановочного элемента.
17. Аргументы $.fn.clone: Когда вы клонируете элемент, вы можете также клонировать его data атрибуты и события, передав true первым аргументом в метод clone.
18. Другие аргументы $.fn.clone: В дополнение, вы можете клонировать data атрибуты и события дочерних элементов, передав true во второй аргумент. Это называется «глубинное клонирование». Второй аргумент по умолчанию равен первому (который, по умолчанию, равен false). Таким образом, если первый аргумент true и вы хотите, чтобы второй был равен true, вы можете опустить второй аргумент.

В более ранней версии этой статьи было сказано, что возвращаемое значение функции-аргумента из примера №5 должна быть строка разделенная запятыми. Оказывается, это должна быть строка разделенная пробелами. Спасибо, Джонатан!

Автор: jojo97

Источник ^[3]