Статьи

5 малоизвестных деталей о методах jQuery

jQuery – наиболее используемая библиотека JavaScript в мире, но мы все это уже знали. Несмотря на то, что в последние месяцы было много критики, это все же привлекает большое внимание разработчиков. Если вы новичок в jQuery или эксперт по JavaScript (Дейв Метвин и другие члены команды исключены), вы можете не знать некоторые особенности jQuery. В этой статье мы обсудим пять из них.

Возвращение false

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

Иногда, хотя это редкие исключения, jQuery слегка отличается от стандартного поведения. Примером является то, что возвращение falseon()

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

Напротив, возвращение falseaddEventListener()

 event.preventDefault();

Это поведение можно проверить, посмотрев на соответствующую часть исходного кода jQuery:

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

Псевдоселекторы делают больше, чем вы думаете

В документации jQuery для многих псевдоселекторов вы можете найти следующее примечание (в данном случае относительно псевдоселектора :checkbox

$ («: Checkbox») эквивалентно $ («[type = checkbox]»). Как и в случае других селекторов псевдоклассов (те, которые начинаются с «:»), рекомендуется ставить перед ним имя тега или некоторые другие селекторы; в противном случае подразумевается универсальный селектор («*»). Другими словами, пустой $ (‘: checkbox’) эквивалентен $ («*: checkbox»), поэтому вместо него следует использовать $ («input: checkbox»).

Теперь давайте посмотрим на реальный код в jQuery:

 function createInputPseudo( type ) {
	return function( elem ) {
		var name = elem.nodeName.toLowerCase();
		return name === "input" && elem.type === type;
	};
}

Как видно из кода, документация немного некорректна. $(':checkbox')$('input[type="checkbox"]')name === "input"

Имея это в виду, у вас может возникнуть искушение больше не вставлять селектор элемента при использовании таких фильтров и писать:

 var $checkboxes = $(':checkbox');

Однако по соображениям производительности стоит использовать его, чтобы jQuery не сканировал каждый элемент страницы. Таким образом, вы все равно должны написать заявление вроде:

 var $checkboxes = $('input:checkbox');

jQuery.type()

Название этого раздела уже может быть чем-то новым для вас. Знаете ли вы, что в jQuery есть метод для определения внутреннего JavaScript [[Class]] объекта ?

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

 // prints object
console.log(typeof null);

// prints object
console.log(typeof [1, 2, 3]);

// prints object
console.log(typeof new Number(3));

Используя jQuery.type()

 // prints null
console.log($.type(null));

// prints array
console.log($.type([1, 2, 3]));

// prints number
console.log($.type(new Number(3)));

Поэтому, если вы разрабатываете плагин jQuery, вы можете использовать jQuery.type()

attr()removeAttr()

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

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

Не веришь мне? Давайте посмотрим на относительную часть исходного кода:

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

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

Как видите, метод проверяет, определено ли заданное значение ( if ( value !== undefined )nullremoveAttr()

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

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

вместо того

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

Должны ли вы действительно использовать этот трюк в своем коде или нет? Решение остается за вами, но на вашем месте я бы не использовал его для ясности кода. В настоящее время это поведение не задокументировано, и, если вам интересно, есть обсуждение этого вопроса .

Превращение массивоподобных объектов в массивы

Как вы, наверное, знаете, в JavaScript есть типы, такие как nodeListargumentsпохожи на массивы, но не на массивы. Это означает, что мы можем получить доступ к их элементам, используя обозначения, подобные массиву (например, arguments[0]forEach()join()

Допустим, у нас есть список nodeList

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

Мы хотим перебрать этот массивоподобный объект, используя метод forEach() Если мы вызываем forEach()list.forEach(...) Чтобы избежать этой проблемы, одним из наиболее часто используемых методов является использование свойства prototypecall()

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

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

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

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

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

Намного лучше, не так ли?

Выводы

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

Другой урок состоит в том, что вам должно быть интересно узнать о фреймворках и библиотеках, которые вы принимаете, время от времени читать исходные тексты и стараться как можно больше изучать новые полезные приемы и приемы.

В качестве последнего предложения, если вы любите jQuery, как и я, внести свой вклад в проект. Даже сообщение об ошибке или исправление небольшой проблемы с документацией может иметь огромное значение для миллионов разработчиков.

О, и в случае, если вам интересно, откуда я знаю эти тонкие детали, причина в том, что я написал пару книг о jQuery и потому, что слежу за трекерами jQuery. 🙂