» » » 18 неожиданностой при чтении исходного кода jQuery

 

18 неожиданностой при чтении исходного кода jQuery

Автор: admin от 20-07-2014, 14:15, посмотрело: 488

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

    Источник: Хабрахабр

    Категория: Программирование » Веб-разработка

    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
    Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

    Добавление комментария

    Имя:*
    E-Mail:
    Комментарий:
    Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
    Введите два слова, показанных на изображении: *