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. 🙂