Это последняя часть моей серии, которая следует из « Действительно ли вам нужен jQuery?» В этой статье мы рассмотрим эквиваленты JavaScript для более продвинутых методов, которые предоставляет jQuery…
Запуск скриптов при загрузке страницы
В недалёком прошлом разработчики помещали скрипты в заголовок HTML и использовали window.onload = start; запустить начальную функцию. Это работало, но window.onload срабатывает только после того, как все внедренные файлы, такие изображения были полностью загружены; Вы могли бы ждать некоторое время для запуска кода.
jQuery предоставляет гораздо более эффективный метод:
$(start)
Функция start () выполняется, как только HTML-файл загружен и DOM готов, но он не будет ждать других ресурсов. За кулисами он использует собственное событие DOMContentLoaded с отступлениями в jQuery 1.x для IE6 / 7/8:
document.addEventListener("DOMContentLoaded", start);
Я имел обыкновение беспокоиться о такой ерунде. Это не нужно: просто загрузите ваш скрипт внизу страницы непосредственно перед закрывающим </body> и вы будете знать, что DOM готов.
для каждого
jQuery позволяет запускать пользовательские функции для всех элементов в массиве. (Это включает в себя наборы узлов. Хотя они могут начать жизнь как NodeList, jQuery копирует их в массивоподобный объект, прежде чем они будут возвращены):
$("p").each(function(i) { console.log("index " + i + ": " + this); });
each них используется внутри, когда вы применяете несколько методов к цепочке jQuery. Эта команда зациклила бы все узлы <p> дважды:
$("p").addClass("newclass").css({color:"#f00"});
Нативный forEach поддерживается в большинстве браузеров, включая IE9 +. Тем не менее, это относится только к массивам, поэтому нам нужно преобразовать NodeLists, просматривая все элементы или используя прототип среза Array:
Array.prototype.slice.call(document.getElementsByTagName("p"));
Ughh. Лично я предпочитаю короткую пользовательскую функцию, которой можно передать массив, NodeList или объект с обратным вызовом. Он перебирает элементы, передавая каждый со своим индексом этой функции. Этот пример автоматически отменяет дальнейшую обработку, когда обратный вызов возвращает false:
function Each(obj, fn) { if (obj.length) for (var i = 0, ol = obj.length, v = obj[0]; i < ol && fn(v, i) !== false; v = obj[++i]); else for (var p in obj) if (fn(obj[p], p) === false) break; };
События
Обработка событий была ужасной в дни до jQuery. IE6 / 7/8 реализовал другую модель событий, и даже те браузеры, которые предположительно следовали стандартам W3C, имели достаточно несоответствий, чтобы сделать разработку неудобной. JQuery по-прежнему делает события легче понять:
$("#clickme").on("click", function(e) { console.log("you clicked " + e.target); e.preventDefault(); });
Но нативный эквивалент не слишком сложен:
document.getElementById("clickme").addEventListener("click", function(e) { console.log("you clicked " + e.target); e.preventDefault(); });
Это не будет работать в IE6 / 7/8, но не будет работать и в jQuery 2.x. Большинство библиотек предоставляют обходной путь, который регистрирует события, используя метод oldIE attachEvent. В качестве альтернативы, если вам требуется только одно событие определенного типа на узле, просто примените кросс-браузерный метод DOM1 ‘on’, например
document.getElementById("clickme").onclick = runSomething;
(Не забудьте включить строку, например, e = e ? e : window.event; в верхней части функции-обработчика, чтобы справиться с объектом события oldIE). Помните, ничего из этого не требуется, если вы поддерживаете IE9 +.
jQuery предоставляет нестандартные типы, такие как события ‘focusin’ и ‘live’, т.е. к сопоставленным элементам, добавленным на страницу при будущих операциях, также будет применено событие. jQuery достигает этого, присоединяя обработчик к родительскому элементу (например, к телу страницы) и анализируя объект события, когда он всплывает через DOM. Вы можете сделать это самостоятельно — это более эффективно, использует меньше кода и является стандартной практикой JavaScript, например, вместо того, чтобы прикреплять событие hover к каждой строке таблицы, вы присоединяете его к таблице, анализируете объект и реагируете соответственно.
Если вы предпочитаете синтаксис jQuery, почему бы не использовать min.js Реми Шарпа ? Он предоставляет селектор $ , связанный on событиями, функциональность trigger и поддержку forEach . Общий вес: 617 символов для минимизированной версии.
Ajax
Когда в последний раз вы разрабатывали проект, который требовал XMLHttpRequest, внедрение сценариев, запросы GET, отправку POST, обработку JSON и загрузку изображений? jQuery справляется со многими ситуациями, и, хотя он и гибкий, вам редко понадобятся все эти опции. Типичный код jQuery Ajax:
$.ajax({ url: "webservice", type: "POST", data: "a=1&b=2&c=3", success: function(d) { console.log(d); } });
Нативный эквивалент:
var r = new XMLHttpRequest(); r.open("POST", "webservice", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; console.log(r.responseText); }; r.send("a=1&b=2&c=3");
Есть и другие варианты, такие как тайм-ауты, поэтому я бы предложил обернуть нативный код в простую в использовании функцию. Тем не менее, вы можете оптимизировать его для своего проекта и реализовать некоторые из лучших функций XMLHttpRequest2, такие как двоичные данные, процесс загрузки и запросы из разных источников, которые jQuery не (непосредственно) не реализует.
Вы должны использовать JQuery?
Только вы можете принять это решение, но использование jQuery в качестве отправной точки по умолчанию для каждого проекта не обязательно будет эффективным или приведет к созданию элегантного кода.
jQuery был чрезвычайно полезен и стал одной из основных причин возрождения фронт-энда. Однако, в отличие от специализированных библиотек для обработки холста, SVG или других сфокусированных задач, jQuery предоставляет общий набор инструментов — они вам никогда не понадобятся. Поставщики браузеров догнали, и, если вам не требуется поддержка oldIEs, jQuery не является основным ресурсом, которым он когда-то был. Чтобы поместить это в контекст, если вы перешли на jQuery 2.0, вам, вероятно, не нужен jQuery.
Я оставлю вам ссылку на Vanilla JS ; библиотека, используемая многими ведущими веб-компаниями, которая имеет модульную архитектуру и меньше, чем все ее конкуренты. Сайт издевательский, но прекрасно иллюстрирует суть.