4 наблюдения о методах jQuery

jQuery является наиболее используемой javascript библиотекой в мире, это всем известно. Несмотря на то, что в последние месяцы было озвучено много критических замечаний, jQuery по-прежнему привлекает много внимания со стороны разработчиков. Неважно кто вы: эксперт javascript или новичок jQuery, вы можете не знать некоторые особенности jQuery. В этой статье мы обсудим некоторые из них.

Возвращается false в обработчике события

Как мы все знаем, первая цель jQuery заключается в определении одного стандарта для всех браузеров при работе с единым набором методов. Где это возможно jQuery расширяет особенности браузера, интегрирую то, что не поддерживалось изначально. Поразмышляйте о селекторах, которые можно использовать благодаря jQuery и которые изначально не поддерживаются IE6/7 (атрибуты селекторов, например, :not, :last-child и т.д.).

Иногда, хотя это редкое исключение, jQuery слегка отклоняется от стандартного поведения. Например, возвращается false в обработчике события jQuery, что равнозначно вызову:

jQuery

event.stopPropagation();
event.preventDefault();

Напротив, возврат false в родном обработчике события, например, таком как addEventListener() эквивалентно записи:

jQuery

event.preventDefault();

В доказательство такого поведения можете взглянуть на соответствующий код автора jQuery.

jQuery

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
      event.preventDefault();
      event.stopPropagation();
   }
}

Отличие preventDefault, stopPropagation

jQuery.type()

Может быть так, что вы видите конструкцию jQuery.type() в первый раз. И уже один этот момент дает вам новое знание. Знаете ли вы, что у jQuery есть метод, который определяет внутренний JavaScript [[Class]] объекта.

Даже если вы уже знали про метод jQuery.type(), вы могли проигнорировать разницу между этим методом и родным оператором javascript typeof. Фактически jQuery.type() более точное обозначение переданного аргумента. Давайте рассмотрим несколько примеров:

Javascript

// выведет object
console.log(typeof null);

// выведет object
console.log(typeof [1, 2, 3]);

// выведет object
console.log(typeof new Number(3));

Используя те же аргументы, но с методом jQuery.type() мы имеем:

jQuery

// выведет null
console.log($.type(null));

// выведет array
console.log($.type([1, 2, 3]));

// выведет number
console.log($.type(new Number(3)));

Таким образом, если вы разрабатываете, например, плагин jQuery вы можете использовать jQuery.type(), чтобы иметь более точное представление о типе параметров, с которыми вы имеете дело.

attr() может работать как removeAttr()

Название этого раздела может показаться странным, но, по крайней мере, здесь не утверждается ничего кроме истины. Для тех кто не знаком с методом jQuery attr() поясню: метод attr() извлекает значение атрибута для первого элемента в наборе соответствующих элементов, или устанавливает один или несколько атрибутов для каждого элемента.

Хотя можно было бы игнорировать данное поведение, однако в добавок к Number и String метод attr() также может принимать null в качестве второго параметра. В этом случае метод attr() фактически работает как removeAttr(). Последний, как следует из названия, удаляет атрибут из каждого элемента в наборе соответствующих элементов.

Не верите? Давайте взглянем на исходники:

jQuery

attr: function( elem, name, value ) {
    ...
    if ( value !== undefined ) {

        if ( value === null ) {
            jQuery.removeAttr( elem, name );
    ...
}

Как вы можете видеть, метод проверяет определенно ли передаваемое значение (if ( value !== undefined )) и затем явно проверяет значение на null, и в случае положительного ответе вызывает метод removeAttr().

Это может быть удобно, когда вам надо установить или удалить атрибут в зависимости от какого-либо состояния, при этом вы не хотите расширять код. Так, например, вы могли бы написать:

jQuery

$(selector).attr(anAttr, condition ? value : null);

Вместо:

jQuery

condition ? $(selector).attr(anAttr, value) : $(selector).removeAttr(anAttr);

Решение использовать или нет данный трюк остается за вами. Но явно не улучшает понимание кода. В данный момент это поведение не документировано.

Включение массивоподобных объектов в массивы

Как вы знаете javascript имеет такие “штуки” как nodeList (специальный объект, который похож на массив: есть длина и нумерованы элементы, но на самом деле это динамический объект DOM) или arguments (переменная внутри функции), которые похожи на массивы, но это не массивы. Это означает, что мы можем получить доступ к их элементам используя массивоподобную нотацию (например, arguments[0]), но мы не можем использовать методы массива, например, forEach() и join().

Допустим, мы имеем nodeList из DOM элементов, извлеченных следующим образом:

Javascript

var list = document.getElementsByClassName('book');

Мы хотим перебрать этот массивоподобный объект, используя метод forEach(). Но если мы вызовем forEach() непосредственно на переменную (list.forEach(…)), то получим ошибку: “Uncaught TypeError: undefined is not a function”. Чтобы избежать этой проблемы, наиболее часто используют технику, основанную на свойстве prototype и методе call() как показано ниже.

Javascript

Array.prototype.forEach.call(list, function() {...});

Как вариант вы можете написать так:

Javascript

[].forEach.call(list, function() {...});

Какое бы решение вы не выбрали это не очень элегантно в плане чтения или записи. К счастью для нас jQuery приходит к нам на помощь. Благодаря методу jQuery.makeArray(), мы можем написать просто:

jQuery

$.makeArray(list).forEach(function() {...});

Лучше, Неправда ли?

источник