JS без jQuery 10 примеров кода, которыми можно обойтись без jquery


Содержание

Примеры jQuery для начинающих

Главная → JavaScript → Примеры jQuery для начинающих

jQuery — javascript библиотека, состоящая из кроссбраузерных функций — оплеток для манипулирования элементами DOM (Document Object Model — Объектная модель документа). Главный ее принцип это автоматическое применение нужного механизма, в зависимости от браузера. К примеру, получение элемента html документа по ID, в разных браузерах происходит по разному. До появления jquery, я использовал такую функцию:

Чтобы это же действие совершить в jquery, достаточно сделать так:

Обращение к функции $() равносильно jQuery(), так как первая является алиасом для второй. Если Вы не используете других библиотек, подобных jquery, то можете смело обращаться к пространству имен через $(). В противном случае лучше использовать непосредственное имя объекта — jQuery. Далее, считаем что нет других библиотек.

Начало работы с jQuery

Итак, начинаем работу. Первым делом необходимо получить новейшую версию библиотеки jquery с официального сайта проекта http://jquery.com/ или скачать jquery здесь. В архиве и на официальном сайте лежат две версии: сжатая и девелоперская. На сайте лучше использовать сжатую, а если захочется поэкспериментировать воспользуйтесь второй. Первым делом подключаем библиотеку jquery в тело страницы:

После этого пространство имен javascript, определено таким образом, что обращение к функции $() занято jquery и получить любой элемент документа html в виде объекта, можно выражением $(‘#objID’). Где objID — ID объекта.

jQuery и CSS

В качестве первого примера рассмотрим работу jquery и CSS. Существует два основных способа манипулирования CSS с помощью jquery: изменение одного атрибута или сразу нескольких. Выполняются они через функцию css(). Выглядит в теории это примерно так:

Пример изменения одного атрибута CSS

Пример изменения одного атрибута удался!

Пример изменения нескольких атрибутов CSS

Пример изменения нескольких атрибутов!

Изменение текста и html

Для изменения текста или html кода существуют функции text() и html().

Причем, если попытаетесь с помощью функции text() вставить html код, то получите его в исходном виде. Функция text() все экранирует.

Пример использования text()

Пример использования html()

Управление атрибутами с помощью jQuery

Функция attr() манипулирует любыми атрибутами элемента. С ее помощью можно добавить или изменить title, href, value, src и так далее.

Возможно вам больше не потребуется jQuery

С момента выпуска jQuery в 2006 году DOM и нативное API браузеров значительно улучшились. Статьи о том, что вполне можно обходиться без jQuery, выходят с 2013 года. Не хотелось бы пересказывать уже старые тезисы, но с тех пор в браузерной стране многое изменилось. Браузеры продолжают внедрять новые API-интерфейсы, которые избавляют от проблем при разработке без использования JavaScript библиотек, многие из которых напрямую скопированы из jQuery.

Давайте рассмотрим несколько новых ванильных альтернатив методам jQuery.

Удалить элемент со страницы

Помните безумно окольный способ, которым вы должны были удалить элемент со страницы в ванильном DOM? Тогда надо было создать весьма громоздкую конструкцию типа el.parentNode.removeChild(el);. Вот сравнение способа jQuery и нового улучшенного способа «из коробки».

Внимание! В этой статье мы будем предполагать, что $elem — набор элементов, выбранный jQuery, а elem является нативным элементом DOM, выбранным в JavaScript.

Добавить элемент

Вставить элемент перед другим элементом

Заменить элемент другим элементом

Найти ближайшего предка, который соответствует данному селектору

Поддержка браузерами методов манипуляции DOM

Эти методы в настоящее время довольно активно поддерживаются большинством браузерами.

Согласно данным с сайта Caniuse на сегодня мы имеем следующее положение дел. Число показывает версию браузера, начиная с которой поддерживается данные функции.

Chrome Opera Firefox IE Edge Safari
54 41 49 Нет 17 10
iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
10.0-10.2 46 Нет 67 75 67

Также на текущий момент эти методы реализованы в Edge.

Исчезновение элемента

Написав собственный CSS, вы можете в большей степени контролировать анимацию элемента:

Разовый вызов обработчика события

В прошлом при написании чистого JavaScript приходилось вызывать функцию removeEventListener внутри функции обратного вызова:

Теперь все намного чище. Возможно, вы видели третий необязательный параметр, иногда передаваемый в addEventListener. Это логическое значение, которое определяет тип события — захват или всплытие. Теперь же этот третий параметр также может быть объектом конфигурации:

Если же вы все еще хотите использовать тип события захват, а также вызывать функцию обратного вызова только один раз, то вы можете указать это в объекте конфигурации:

Анимация

jQuery метод .animate() довольно ограничен.

В документации говорится: «Все анимированные свойства должны быть анимированы по одному числовому значению, за исключением случаев, указанных ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовых функций jQuery.» Это делает невозможным какие-либо преобразования, и, например, для анимации цветов вам потребуется специальный плагин. Вам было бы намного проще с новым API веб-анимации.

Еще одним важным достоинством фреймворка jQuery была работа с Ajax. jQuery отлично абстрагируется от уродства XMLHttpRequest:

Тем не менее, в настоящее время новый API выборки стал великолепной заменой XMLHttpRequest. К тому же он поддерживается всеми современными браузерами.

По общему признанию использование механизма выборки может быть немного сложнее, чем представлено в этом небольшом примере кода. Например, возвращаемое «обещание» Promise от fetch() не будет отклонено из-за ошибки HTTP. Тем не менее, данный API гораздо более универсален, чем что-либо построенное поверх XMLHttpRequest.

Если мы хотим простоты использования, есть более простой вариант, который приобрел популярность — но он не является родным для браузера, и это приводит нас к .

Использование микробиблиотек

Axios — это популярная библиотека для Ajax. Это отличный пример микробиблиотеки — библиотеки, предназначенной только для одной цели. Хотя большинство библиотек не будут так хорошо тестироваться, как jQuery, они часто могут стать привлекательной альтернативой бегемоту jQuery.

(Почти) Все можно возместить

Итак, теперь вы знаете, что с DOM теперь приятно работать! Но, возможно, посмотрев на все эти новшества, вы только вздохнете и скажете: «Ну что ж, все это хорошо, но мне все равно нужно поддерживать IE 9, поэтому я лучше останусь с jQuery». Однако, в большинстве случаев не имеет значения, что говорит сервис CANIUSE о доступности определенной функции, которую необходимо использовать. Вы можете использовать все, что вам нравится, а полифилы помогут заполнить пробелы. Было время, когда, если вы хотели использовать необычную новую функцию браузера, вам нужно было найти полифил, а затем подключить его на свою страницу. Делать это для всех функций, отсутствующих в IE9, было бы трудной задачей. Теперь же все гораздо проще. Достаточно добавить одну строку:

Этот простой скрипт может заполнить все что угодно. Если вы не слышали об этом сервисе полифила от Financial Times, вы можете прочитать об этом на polyfill.io.

Итерация NodeList в 2020

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

Вполне разумно, что списки NodeList нельзя перебирать (итерировать). Разработчикам до сих пор приходится прыгать через обручи, чтобы сделать их такими. Классический цикл for может быть наиболее оптимизированным по производительности подходом, но не всякому понравится набирать кучу текста. И вот мы уже приходим к такому безобразию:

Совсем недавно появился Array.from, предоставивший более изящный способ превратить nodeList в массив.

Но вот пришла грандиозная новость — списки NodeList теперь могут перебираться по умолчанию!

Теперь достаточно написать:

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

jQuery медленная?

Библиотека jQuery может быть гораздо быстрее коряво написанного чистого JS. Но это только лишний повод лучше изучить JavaScript! Один из создателей jQuery Пол Айриш в свое время писал в Twitter, что лучше на работающем сайте отказаться от использования методов show()/hide() в пользу классов, так как они снижают скорость работы сайта.

Вот что написал создатель jQuery о изучении нативного DOM в своей книге по Javascript «Secrets of the JavaScript Ninja»:

«Зачем вам нужно понимать, как это работает, если библиотека позаботится об этом за вас? Наиболее убедительной причиной является производительность. Понимание того, как модификация DOM работает в библиотеках, позволяет вам писать более качественный и быстрый код.»

Что мне не нравится в jQuery

Вместо того, чтобы сглаживать только остающиеся уродливые части некоторых браузерных API, jQuery стремится заменить их все оптом. Возвращая объект jQuery, а не NodeList, библиотека по сути закрывает встроенные методы браузера, что означает, что вы вынуждены абсолютно все делать через jQuery. Для новичков то, что когда-то было доступно посредством интерфейсных скриптов, теперь является препятствием, поскольку по сути это означает, что есть два дублирующих способа все сделать. Если вы хотите легко читать чужой код и применять его как к заданиям, требующим чистого JS, так и к заданиям, требующим jQuery, вам придется учиться вдвое больше. Однако есть библиотеки, которые приняли API, который будет достаточно знаком поклонникам jQuery, но который возвращает NodeList, а не объект jQuery.

Не можете жить без $?

Возможно, вы полюбили этот $ от jQuery. К счастью, есть ряд микробиблиотек, которые эмулируют API jQuery.

  • Леа Веру, приглашенный эксперт из рабочей группы W3C CSS, написавшая статью о вреде jQuery, является автором Bliss.js. Bliss использует знакомый синтаксис $, но возвращает NodeList.
  • Тем временем, Пол Ирриш выпустил Bling.js «потому что вы хотите получить $ jQuery без jQuery».
  • А Реми Шарп предложил аналогичную микробиблиотеку, метко названную min.js.

Тем не менее, не стоит думать, что мы ярые противники jQuery. Некоторые великие разработчики все еще предпочитают использовать именно эту библиотеку. Если вы комфортно чувствуете себя, используя jQuery, и вы знаете его API как свои пять пальцев, то нет никакой значительной причины выкидывать его в мусорное ведро. В конце концов, есть люди, которые используют jQuery и знают, что такое замыкание, и которые пишут веб-приложения корпоративного уровня, и есть люди, которые используют чистый JS, но не лезут в разработку сверх-приложений. При этом, множество вакансий программистов числят его среди необходимых навыков. Хотя для любого, кто только начинает свой путь на этом поприще, jQuery все чаще выглядит плохим выбором. Internet Explorer 11, к счастью, является окончательной версией этого адского устройства. Как только IE умрет, весь ландшафт браузеров станет вечно зеленым, а jQuery будет все больше и больше восприниматься как пережиток грязного прошлого DOM.

Анимация без jQuery

Есть ошибочное мнение среди веб-разработчиков, что CSS анимация — единственный производительный способ анимирования в сети. Этот миф принудил много разработчиков отказаться от основанной на JavaScript анимации в целом. Таким образом:

  1. Вынудили себя управлять сложным взаимодействием UI в таблицах стилей
  2. Блокировали себя в поддержке Internet Explorer 8 и 9
  3. Воздерживаются от возможности построения физики движения, которая возможна только в JavaScript

Проверка в реальных условиях: основанная на JavaScript анимация так же быстра, как и анимация, основанная на CSS — иногда еще быстрее. Анимация CSS имеет преимущество, как правило, только по сравнению с $.animate() jQuery, которая является, по сути, очень медленным. Однако библиотеки для анимации JavaScript, которые обходят jQuery, показывают невероятную производительность, избегая манипулирования DOM насколько это возможно. Эти библиотеки могут быть до 20 раз быстрее, чем jQuery.

Так, давайте развеем некоторые мифы, погрузимся в некоторые реальные примеры анимации и улучшим наши навыки программирования в процессе. Если вы любите разрабатывать практичные UI анимации для своих проектов, то эта статья для вас.

Почему JavaScript?

CSS анимации удобны, когда вы должны сделать переходы свойств в свои таблицы стилей. Плюс, они показывают фантастическую производительность из коробки — без добавления библиотеки на страницу. Однако, когда вы используете переходы CSS, чтобы привести в действие богатый проект движения (подобное вы увидите в последних версиях IOS и Android), они становятся слишком трудными в управлении, или их функции просто сыпятся ошибками.

В конечном счете, CSS анимации ограничивают вас определенной спецификацией. В JavaScript, по самой природе любого языка программирования, у вас есть бесконечное количество логического контроля. Механизмы JavaScript анимации усиливают этот факт, чтобы обеспечить новые функции, которые позволяют вам осуществлять некоторые очень полезные приемы:

Примечание: Если вас интересует тема производительности, то можете почитать Джулиана Шапиро “CSS vs. S Animation: что быстрее?” и Джека Дойла: “Разрушение мифа: CSS Animations vs. JavaScript”. Для демо производительности, обратитесь к панели производительности в документации Velocity и демо GSAP «Библиотека сравнения скорости».

Velocity и GSAP

Две самых популярных библиотеки для JavaScript анимации — Velocity.js и GSAP. Обе работают с и без jQuery. При использовании этих библиотек совместно с jQuery, нет никакого ухудшения производительности, потому что они полностью обходят стек jQuery анимации.

Если jQuery присутствует на вашей странице, вы можете использовать Velocity и GSAP точно так же как и $.animate() jQuery. Например, $element.animate(< opacity: 0.5 >); просто становится $element.velocity(< opacity: 0.5 >) .

Эти две библиотеки также работают, когда jQuery не присутствует на странице. Это означает, что вместо того, чтобы объединить вызов анимации в цепочку в элемент jQuery объекта — как просто показано — вы передали бы целевой элемент(ы) к вызову анимации:

/* Работа без jQuery */

Velocity ( element , < opacity : 0.5 >, 1000 ) ; // Velocity

TweenMax. to ( element , 1 , < opacity : 0.5 >) ; // GSAP

Как видно Velocity сохраняет тот же синтаксис что и $.animate () jQuery, даже когда это используется без jQuery; просто сместите все параметры вправо на одну позицию, чтобы создать место для передачи в предназначенных элементах в первой позиции.

GSAP, напротив, использует объектно-ориентированный API проект, а также удобные статические методы. Так, вы можете получить полный контроль над анимациями.

В обоих случаях вы больше не анимируете объект элемента jQuery ,а скорее необработанный DOM узел. Как напоминание, вы получаете доступ к необработанным DOM узлам при помощи document.getElementByID , document.getElementsByTagName , document.getElementsByClassName или document.querySelectorAll (который работает так же к селекторному механизму jQuery). Мы будем работать с этими функциями в следующем разделе.

Работа без jQuery

(Примечание: если вы нуждаетесь в базовом учебнике для начинающих в работе с $.animate() jQuery, обратитесь к первым нескольким разделам в документации Velocity.)

Давайте исследовать querySelectorAll потому что, вероятно, вы будете использовать именно это оружие при выборе элементов без jQuery:

Как показано вы просто передаете querySelectorAll CSS селектор (те же селекторы, которые Вы использовали бы в своих таблицах стилей), и он возвратит все соответствующие элементы в массив. Следовательно, вы можете сделать это:

Поскольку мы больше не присоединяем анимации к объектам элемента jQuery, вы можете задаться вопросом, как мы можем объединить анимации в цепочку:

В Velocity вы просто вызываете анимации одну за другой:

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

(Подсказка: С пакетом Velocity UI вы можете создать свои собственные анимации мультивызова и дать им пользовательские имена, которые сможете использовать в дальнейшем как первый параметр Velocity. См. UI Pack документацию Velocity для получения дополнительной информации.)

Velocity вызов-обработки-за-один-раз, обладает огромным преимуществом: если вы будете использовать promises со своими Velocity анимациями, то каждый Velocity вызов возвратит действенный promise объект. Можно узнать больше о работе с promises в статье Джейка Арчибальда. Они невероятно сильны.

В случае GSAP его выразительный объектно-ориентированный API позволяет вам помещать свои анимации во временную шкалу, давая вам контроль над планированием и синхронизацией. вы не ограничены цепочечными анимациями; можно вложить временные шкалы, заставить анимации наложиться, и т.д.:

Удивительность JavaScript: Workflow

Анимация является по сути экспериментальным процессом, в котором необходимо играть с timing и easing для получения правильного ощущения, в котором нуждается приложение. Конечно, даже если вы будете считать дизайн прекрасным, клиент будет часто запрашивать нетривиальные изменения. В этих ситуациях управляемый workflow становится важным.

В то время как CSS переходы довольно просто вставить в проект для эффектов, таких как парение, они становятся неуправляемыми, когда вы пытаетесь упорядочить даже умеренно сложные анимации. Вот почему CSS обеспечивает анимацию по ключевым кадрам, которая позволяет вам группировать анимационную логику по разделам.

Однако базовый недостаток API ключевых кадров — в том, что вы должны определить разделы в процентах, который не интуитивен. Например:

@ keyframes myAnimation <
0 % <
opacity : 0 ;
transform : scale ( 0 , 0 ) ;
>
25 % <
opacity : 1 ;
transform : scale ( 1 , 1 ) ;
>
50 % <
transform : translate ( 100px , 0 ) ;
>
100 % <
transform : translate ( 100px , 100px ) ;
>
>

#box <
animation : myAnimation 2.75s ;
>

Что происходит, если клиент просит, чтобы вы сделали translateX анимацию на секунду длиннее? Это требует восстановления математики и изменения всех (или большинства) процентов.

У Velocity есть свой UI пакет, чтобы иметь дело со сложностью мультианимации, и GSAP предлагает nestable временные шкалы. Эти функции допускают полностью новые возможности потока операций.

Но давайте прекратим проповедь о потоке операций и погрузимся в забавные примеры анимации.

Удивительность JavaScript: физика

Много мощных эффектов достижимы исключительно через JavaScript. Давайте исследуем некоторые анимации запускающиеся с физической основой.

Утилита физики в проекте движения наталкивается на базовый принцип того, что делает для UX: интерфейсы, которые естественно плывут от ввода пользователя — другими словами, интерфейсы, которые придерживаются движения подобного реальному миру.

GSAP предлагает физики плагины, которые адаптируются к ограничениям пользовательского интерфейса. Например, ThrowPropsPlugin отслеживает динамическую скорость пальца пользователя или мыши, и когда пользователь отпускает, ThrowPropsPlugin выбирает соответствующую скорости и заставляет элемент естественно остановиться. Получающаяся анимация — стандартный промежуточный кадр, который может управляться временем (приостановленный, инвертированный, и т.д.):

Velocity предлагает тип упрощения на основе физики упругости. Обычно с упрощением опций вы передаете в именованном типе упрощения; например, ease , ease-in-out или easeInOutSine . С физикой упругости вы передаете массив с двумя элементами, состоящий из силы и значений трения (в скобках ниже):

Более высокая сила (значение по умолчанию 500) увеличивает общую скорость и упругость. Более низкое трение (значение по умолчанию 20) увеличивает конечную скорость вибрации. Настраивая эти значения, вы можете отдельно подстроить свои анимации.

Удивительность JavaScript: скроллинг

В Velocity вы можете позволить пользователю прокрутить браузер к краю любого элемента, передавши scroll как первый параметр Velocity (вместо карты свойств). Команда scroll ведет себя тождественно стандартному Velocity вызову; можно выбрать варианты и можно поставить в очередь.

Вы можете также прокручивать элементы в контейнерах, и вы можете прокручивать горизонтально. См. документацию прокрутки Velocity для получения дополнительной информации.

У GSAP есть ScrollToPlugin, который предлагает подобную функциональность и может автоматически оставить управление, когда пользователь взаимодействует с полосой прокрутки.

Удивительность JavaScript: реверс

И у Velocity и e GSAP есть обратные команды, которые позволяют вам анимировать элемент назад к значениям до его последней анимации.

В Velocity, передайте reverse как первый параметр Velocity:

Щелкните по вкладке “JS”, чтобы увидеть код, который приводит в действие этот пример:

В GSAP Вы можете сохранить ссылку на объект анимации, затем вызвать его reverse() метод в любое время:

Удивительность JavaScript: преобразование управления

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

Для создания сложного движения, независимое управление свойствами обязательно. Давайте смотреть на динамическое управление преобразованием, это достижимо только в JavaScript. Нажмите кнопки в любой точке во время анимации:

И Velocity и GSAP позволяют индивидуально анимировать преобразовываете компоненты:

// Velocity
/* First animation */
Velocity ( element , < translateX : 500 >, 1000 ) ;
/* Trigger a second (concurrent) animation after 500 ms */
Velocity ( element , < rotateZ : 45 >, < delay : 500 , duration : 2000 , queue : false >) ;

// GSAP
/* First animation */
TweenMax. to ( element , 1 , < x : 500 >) ;
/* Trigger a second (concurrent) animation after 500 ms */
TweenMax. to ( element , 2 , < rotation : 45 , delay : 0.5 >) ;

Подведение итогов

  • По сравнению с CSS анимацией у JavaScript анимации есть лучшая поддержка браузера и больше функций, и это обеспечивает более управляемый поток операций для последовательностей анимации.
  • Анимация в JavaScript не влечет за собой принесение скорости в жертву (или аппаратное ускорение). И Velocity и GSAP поставляют скорость и аппаратное ускорение. Никакого смешения с null-transform хаками.
  • Вы не должны использовать jQuery, чтобы использовать в своих интересах преданные библиотеки анимации JavaScript. Однако, если вы это сделаете, то вы не будете жертвовать производительностью.

ЗАКЛЮЧИТЕЛЬНОЕ ПРИМЕЧАНИЕ

Обратитесь к Velocity и GSAP документации, чтобы освоить JavaScript анимацию.

AJAX запрос без jQuery, отправка простой формы

Скажу сразу, я вовсе не против этой библиотеки, но возникла идея написать простой AJAX запрос без jQuery. Давайте для начала попробуем,

Ajax запрос c помощью jQuery

Размещаем json-файл с такими тестовыми данными:

AJAX запрос ссылается на json-файл, надо подчеркнуть необходимость установки dataType: «json», чтобы избежать проблем обработки данных в ответе сервера:

В данном случае это простой REST-запрос и нет разницы в типе отправляемого запроса GET или POST.
Данные формы требуют сериализации в строку JSON или мы бы могли предоставить свой массив с данными.
Нам нужно получить ответ от сервера и сделать что-нибудь, например показать сообщение в зависимости от успеха / неудачи. Следуя этим шагам, мы получим что-то вроде:

Ajax запрос Без jQuery

Теперь попробуем реализовать форму, но не использовать jQuery.

Преимущество without jQuery для меня было в том, чтобы сохранить быстроту и простоту кода. Тем не менее, с точки зрения UX мне кажется, что форма AJAX нужна, поэтому я приступил к достижению результата, который мне нужен, используя старый добрый JavaScript или native JS, помня о том, что решение без jQuery не должно быть громоздким.

Обработка несогласованности браузера

Это область, в которой jQuery “лучше всех”, надо учитывать, когда вы планируете отказаться от изящества кода. Это действительно нужно обрабатывать в каждом конкретном случае, но решение здесь действительно просто – мы можем обернуть наш код в условной инструкции, проверяющей поддержку того, что нам нужно, и если какая-либо проблема здесь, форма будет отбрасываться на ее основную Выполнение POST. Вы можете рассматривать использование AJAX как прогрессивное усовершенствование или возврат к POST как изящное деградация, это действительно не имеет значения здесь.

То, что мы собираемся проверить, это интерфейс FormData. Это упрощает работу, но не поддерживается в IE 9 или ниже.

Проверяя поддержку FormData, мы также проверим, есть ли форма в коллекции форм документа. Обратите внимание, что

ищет только первый экземпляр формы – вам нужно будет его адаптировать, если на странице, вероятно, будет больше одной формы.

На самом деле это можно разделить на три простые части:

  1. Некоторые простые назначения (определение сообщений о статусе и создание контейнера для них)
  2. Создание нового экземпляра XMLHttpRequest, задающего тип запроса с его методами .open и .setRequestHeader
  3. Прослушивание события отправки, а затем:
    • Предотвращение отправки по умолчанию
    • Присоединение контейнера, который мы создали ранее для наших сообщений о статусе
    • Схват данных из нашей формы с помощью объекта FormData. Отправка данных с помощью метода .send XMLHttpRequest .
    • Прослушивание ответа с помощью метода .onreadystatechange и отображение соответствующего сообщения о статусе.

Результат

На изображении ниже вы можете увидеть заполненную форму слева, и ответ будет отображаться, если передача будет выполнена справа.

namespace sansys.net <

public class Blog: ISite <
// TODO: Сделать мир лучше
>

13 июня 2015 by Alexander Pascal

JavaScript без jQuery — несколько примеров

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

Ниже вы увидите примеры для следующих ситуаций:

  • Подписывание на окончание загрузки документа
  • Выборка элементов используя css-селекторы
  • Добавление/удаление подписчиков на события
  • Манипуляция с классами элемента
  • Работа с аттрибутами элементов
  • Управление контентом
  • Добавление/удаление элементов
  • Проход по DOM
  • Использование анимации
  • AJAX

Окончание загрузки документа

Но стоит заметить, что в IE8 и ниже событие это не поддерживается, и если вам не посчастливилось их поддерживать, то рекомендую к использованию jquery.documentReady.js

Выборка элементов

Вполне спокойно заменяются на простом JS:

И да, первый элемент в jQuery можно было выбрать через first, т.е. $(‘.monsters:first’)

Если вы поддерживаете старые браузеры и хотите использовать jQuery только для выборки элементов, то стоит заюзать Sizzle, но позволит использовать CSS3-селекторы для поиска элементов DOM.
Использование довольно простое: Sizzle(‘div.someClassName’), т.е. как и в jQuery, только помните — если элементов нет, то Sizzle вернёт пустой массив:

Добавление и удаление подписчиков на события:

jQuery предоставляет нам целый зоопарк методов, для подписки на события, некоторые из них являются упрощением вызова метода on:

  • one:
  • hover, bind/unbind, delegate/undelegate

Но в большинстве случаев вам нужно лишь навесить событие на элемент или контейнер элементов примерно так:

Как обойтись без jQuery:

Кода стало не на много больше, а работает и без жквери
Только стоит иметь ввиду разницу в контексте в методе onItemClick и всё, а разница получается совсем небольшая. Да — больше клавиш нажать нужно, но intellisence вам в помощь да сниппеты )

Манипуляция классами

И потому предпочитают использовать jQuery, оборачивая this в jQuery и вызывая метод hasClass (см. работу с классами в jQuery по адресу https://github.com/jquery/jquery/blob/master/src/attributes/classes.js)

Несколько примеров работы с классами на jQuery:

Собственно да — ничего сложного, но не менее сложно использовать нативный JS:

Работа с атрибутами

Управление контентом

Добавление и удаление элементов


Проход по дереву DOM

jQuery.parent() заменяется element.parentNode
jQuery.prev() => element.previousElementSibling
jQuery.next() => element.nextElementSibling
jQuery.children() => element.children

Здесь всё просто, но сложнее с методом closest
Предлагается реализовывать свою функцию хождения по родительским элементам, что я, бывало, и делал:

Использование анимации

Безусловно, во времена, когда не было CSS3 анимационный функционал jQuery был очень удобен, сейчас же можно многие вещи делать на простом css, а через js просто добавлять/удалять нужные классы

На github есть замечательный проект Animate.css, с заранее подготовленными многими css-анимациями, которые, естественно, не обязательно все включать в проект

Вставляю оригинальный исходник, см. вкладку Result:

Использование AJAX в jQuery довольно удобно, тем более, что есть множество упрощённых методов (get, post, getJSON), но опять таки — если нужен от jQuery только ajax, то не следует его подключать, а можно использовать классический XMLHttpRequest или один из множества готовых скриптов, реализующих упрощённый ajax
В примере ниже используются XMLHttpRequest и библиотека reqwest, которая очень даже напоминает jQuery в использовании )

Как отказаться от jQuery в современном фронтенде: опыт команды GitHub

Не так давно GitHub полностью перестал использовать jQuery в своём фронтенд-коде. Мы перевели пост, в котором разработчики рассказывают, с чего началась их работа с jQuery, как они поняли, что пора от него отказываться, и как они смогли сделать это без использования других библиотек или фреймворков.

Зачем jQuery был нужен раньше?

jQuery 1.2.1 вошёл в число зависимостей GitHub в конце 2007 года. Это произошло за год до того, как Google выпустил первую версию браузера Chrome. На тот момент не было общепринятого способа обращаться к элементам DOM с помощью CSS-селектора, не было стандартного способа добавить анимацию к стилю элемента, а интерфейс XMLHttpRequest, предложенный Internet Explorer, как и многие API, был плохо совместим с браузерами.

С jQuery стало гораздо проще управлять DOM, создавать анимации и делать AJAX-запросы. У веб-разработчиков появилась возможность создавать более современные, динамические сайты, которые выделялись среди остальных. Самое главное, все функции JavaScript, проверенные в одном браузере с помощью jQuery, как правило, работали и в других браузерах. На заре GitHub, когда большинство его функций только обретали форму, появление jQuery позволило небольшой команде разработчиков быстро создавать прототипы и представлять новые функции без необходимости подстраивать их отдельно под каждый браузер.

Простой интерфейс jQuery также послужил основой для создания библиотек, которые в будущем стали компонентами остальной части фронтенда GitHub.com: pjax и facebox.

Веб-стандарты в последующие годы

С течением времени GitHub превратился в компанию с сотнями разработчиков и постепеннно сформировалась команда, которая отвечала за размер и качество JavaScript-кода, который мы отправляем браузерам. Одна из вещей, за которыми мы постоянно следим, — технический долг, порой вырастающий из некогда полезных зависимостей, которые потеряли свою актуальность по прошествии времени.

Когда очередь дошла до jQuery, мы сравнили его с развивающимся веб-стандартом в браузерах и поняли, что:

  • Шаблон $(selector) можно легко заменить на querySelectorAll() ;
  • Переключение CSS-классов теперь можно осуществить с помощью Element.classList;
  • CSS теперь поддерживает создание анимации в таблицах стилей, а не в JavaScript;
  • $.ajax -запросы можно выполнять с помощью Fetch Standard;
  • Интерфейс addEventListener() достаточно стабилен для кроссплатформенного использования;
  • Шаблон делегирования событий легко инкапсулировать с помощью легковесной библиотеки;
  • С эволюцией JavaScript часть синтаксического сахара jQuery устарела.

Кроме того, синтаксис цепочек команд не удовлетворял нашим представлениям о коде, который мы хотели бы писать в будущем. Например:

Такой синтаксис прост в написании, однако по нашим стандартам не очень хорошо передаёт намерения автора. Сколько элементов js-widget , по его задумке, должно быть на странице: один или больше? А если мы обновим разметку страницы и случайно оставим имя класса js-widget , будет ли выброшено исключение, которое сообщит нам, что что-то пошло не так? По умолчанию jQuery молча пропускает всё выражение, когда нет совпадений по начальному селектору; однако для нас такое поведение было больше багом, нежели фичей.

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

В конечном счёте отказ от jQuery означает, что мы можем больше полагаться на веб-стандарты, использовать веб-документацию MDN в качестве официальной документации для наших фронтендеров, поддерживать более гибкий код в будущем и уменьшить вес наших зависимостей на 30 Кбайт, что в итоге увеличит скорость загрузки страницы и выполнения JavaScript.

Постепенный переход

Хотя наша конечная цель была не за горами, мы знали, что было бы нецелесообразно направить все имеющиеся ресурсы на переписывание всего с jQuery на чистый JS. Во всяком случае, такое поспешное решение негативно бы сказалось на функциональности сайта, от которой нам бы пришлось отказаться. Вместо этого мы:

  • Начали отслеживать количество вызовов jQuery на строку кода и следили за графиком на протяжении времени, чтобы убедиться, что он либо не меняется, либо падает, но не растёт.
  • Отказались от использования jQuery в новом коде. Чтобы достичь этого с помощью автоматизации, мы создали eslint-plugin-jquery, который проваливал CI-тесты при попытке использовать возможности jQuery вроде $.ajax .
  • В старом коде появилось много нарушений правил eslint, которые мы пометили с помощью специальных правил eslint-disable в комментариях. Для того, кто будет это читать, такие комментарии должны были служить явным сигналом того, что здесь не отражаются наши текущие методы написания кода
  • Мы написали бота, который при отправке pull request’а оставлял комментарий, сигнализирующий нашей команде каждый раз, как кто-то хотел добавить новое правило eslint-disable . Таким образом мы могли провести ревью кода на ранней стадии и предложить альтернативы.
  • Большая часть старого кода была явно связана с внешними интерфейсами jQuery-плагинов pjax и facebox, поэтому мы оставили их интерфейсы почти без изменений, в то время как изнутри заменили их реализацией на чистом JS. Наличие статической проверки типов вселило в нас уверенность в проводимом рефакторинге.
  • Много старого кода было связано с rails-behaviors, нашим адаптером для Ruby on Rails, таким образом, что он присоединял обработчик жизненного цикла AJAX к определённым формам:

Вместо того чтобы переписывать все эти вызовы согласно новому подходу, мы решили использовать ложные события жизненного цикла ajax* , и формы продолжали отправлять данные асинхронно, как и раньше; только теперь изнутри использовался fetch() .

  • Мы поддерживали свою сборку jQuery, из которой убирали ненужные нам модули и заменяли более лёгкой версией. Например, после избавления от всех jQuery-специфичных CSS-псевдоселекторов вроде :visible или :checkbox мы смогли убрать модуль Sizzle; а когда мы заменили $.ajax -вызовы на fecth() , мы смогли отказаться от модуля AJAX. Мы убивали двух зайцев разом: уменьшали время выполнения JavaScript, параллельно гарантируя то, что никто не напишет код, который будет пытаться использовать удалённую функциональность.
  • Глядя на статистику нашего сайта, мы старались прекратить поддержку Internet Explorer настолько быстро, насколько это возможно. Как только использование определённой версии IE падало ниже определённого порога, мы прекращали её поддержку и фокусировались на более современных браузерах. Отказ от поддержки IE 8-9 на раннем этапе позволил нам использовать многие нативные возможности браузеров, которые в противном случае было бы сложно «заполифиллить».
  • В рамках нашего усовершенствованного подхода к написанию фронтенда GitHub мы сосредоточились на использовании обычного HTML по-максимуму, добавляя JavaScript в качестве последовательного улучшения. В итоге даже те формы и другие элементы интерфейса, которые были улучшены с помощью JS, как правило, могли работать даже с выключенным в браузере JavaScript. В некоторых случаях нам даже удалось удалить определённую устаревшую функциональность вместо её переписывания на чистом JS.
  • Благодаря этим и аналогичным усилиям с течением времени мы постепенно смогли уменьшить нашу зависимость от jQuery вплоть до того момента, когда не осталось ни одной строки кода, ссылающейся на эту библиотеку.

    Custom Elements: пользовательские элементы

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

    Мы создали несколько пользовательских элементов на основе спецификации v0 с 2014 года. Однако, поскольку стандарты в то время постоянно менялись, мы сильно в это не вкладывались. А начали только с 2020 года, когда была выпущена спецификация Web Components v1, реализованная как в Chrome, так и в Safari.

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

    Наша общая философия прогрессивного улучшения относится и к пользовательским элементам. Это значит, что мы стараемся хранить как можно больше контента в разметке и только добавлять поведение поверх неё. Например, по умолчанию показывает исходную временную метку, но с улучшением может переводить время в местный часовой пояс, а , расположенный внутри элемента , интерактивен даже без JavaScript, но может быть улучшен до расширенных возможностей доступа.

    Вот пример того, как можно реализовать элемент :

    Один из аспектов Web Components, который мы очень хотим перенять, — Shadow DOM. У Shadow DOM есть потенциал для раскрытия множества возможностей для веба, однако он также усложняет полифиллинг. Так как его полифиллинг на данный момент приведёт к снижению производительности даже для кода, который управляет частями DOM, не относящихся к веб-компонентам, для нас нецелесообразно использовать его в продакшне.

    Полифиллы

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

    Зачем вам jQuery

    Пред­ставь­те, что вам нуж­но на сайт доба­вить фор­му обрат­ной свя­зи и кноп­ку быст­ро­го зака­за. Вы пише­те 200 строк на JavaScript: нуж­но, что­бы поля про­ве­ря­лись, дан­ные отправ­ля­лись, если чело­век не запол­нил — на него выпа­да­ла выпа­дай­ка и т. д. Всё это нуж­но вни­ма­тель­но опи­сать, запро­грам­ми­ро­вать и про­те­сти­ро­вать. На это ухо­дит, допу­стим, полтора-два часа. Рабо­та­ет? Да. Полу­чи­лось быст­ро? Не очень. Что­бы было быст­рее, мно­гие исполь­зу­ют jQuery.

    jQuery — спе­ци­аль­ная биб­лио­те­ка, напи­сан­ная на JavaScript, в кото­рой мно­гие типо­вые дей­ствия про­пи­са­ны как одна коман­да. Пред­ставь­те, что это набор гото­вых дета­лей кон­струк­то­ра, из кото­ро­го собрать про­грам­му полу­ча­ет­ся быст­рее. Прав­да, не все зада­чи реша­ют­ся дета­ля­ми кон­струк­то­ра…

    Что­бы было понят­но, насколь­ко jQuery может уско­рить напи­са­ние кода, вот при­мер. Двум про­грам­ми­стам дали зада­чу: сде­лать так, что­бы по кли­ку в самом низу стра­ни­цы она сама плав­но про­кру­чи­ва­лась до само­го вер­ха. Один решил эту зада­чу на чистом JavaScript:

    Дру­гой исполь­зо­вал jQuery. У него код состо­ит из одной стро­ки:

    У обо­их про­грам­ми­стов код рабо­та­ет оди­на­ко­во, но вто­рой решил зада­чу гораз­до быст­рее.

    Эта коман­да гово­рит бра­у­зе­ру: «Иди на сер­вер Яндек­са по вот тако­му пути, най­ди там файл jquery.min.js, будем рабо­тать с этой биб­лио­те­кой и писать на ней скрип­ты». Даль­ше мы собра­ли спи­сок плю­сов и самых вес­ких при­чин исполь­зо­вать jQuery в про­ек­тах. Это будет полез­но знать тем, кто хочет делать что-то для веба или луч­ше пони­мать, как устро­е­ны сай­ты изнут­ри.

    Плюс: простой синтаксис

    jQuery чита­ет­ся несколь­ко про­ще, чем JavaScript, мно­гие вещи сде­ла­ны понят­нее. Напри­мер, нам нуж­но скрыть на стра­ни­це вто­рой по сче­ту заго­ло­вок уров­ня H2.

    Плюс: плагины на любой случай

    Что бы вы ни хоте­ли сде­лать на веб-странице, ско­рее все­го, для это­го уже есть гото­вые пла­ги­ны на jQuery. Фор­мы под­пис­ки, всплы­ва­ю­щая рекла­ма, захват теле­фон­но­го номе­ра — всё это уже есть и доступ­но за пару команд.

    Scrollpane — кроссбра­у­зер­ный скрол­бар любо­го эле­мен­та на стра­ни­це;

    jReject — про­ве­ря­ет, не уста­рел ли исполь­зу­е­мый бра­у­зер;

    GridScrolling — нави­га­ция по сай­ту с помо­щью кла­виш;

    FlickerPlate — пла­гин для слай­де­ров с под­держ­кой сен­сор­ных экра­нов;

    Animsition — созда­ние ани­ми­ро­ван­ной загруз­ки стра­ниц на сай­те;

    SlideBars — созда­ние адап­тив­но­го меню на сай­те

    и ещё тыся­чи гото­вых пла­ги­нов.

    Плюс: простой доступ к странице

    В чистом JavaScript обра­тить­ся к объ­ек­ту на стра­ни­це мож­но одним из спо­со­бов:

    document.getElementById(«myElement»)
    document.getElementsByTagName(«td»)
    document.getElementsByClassName(«myClass»)

    и еще несколь­ко подоб­ных

    В jQuery то же самое дела­ет одна пре­крас­ная коман­да. Заод­но она же сов­ме­ща­ет в себе кучу дру­гих функ­ций. Фак­ти­че­ски она гово­рит jQuery: «Возь­ми ЭТО и сде­лай с ним что-то»:

    Поэто­му какие-то про­стые мани­пу­ля­ции с объ­ек­та­ми на стра­ни­це выгля­дят эле­гант­нее имен­но с jQuery. Это не зна­чит, что их нель­зя делать с про­стым JavaScript — мож­но. Но это не так кра­си­во.

    Пред­ставь­те, что у нас есть стра­ни­ца, на кото­рой есть важ­ные плаш­ки. Такие же, как на этой, и у всех задан класс “SomeClass”. И в зави­си­мо­сти от вре­ме­ни суток, бра­у­зе­ра или настро­е­ния про­грам­ми­ста сайт дол­жен эти плаш­ки скры­вать, добав­лять новые или как-то их менять. Вот, что мож­но, к при­ме­ру, с ними делать:

    var $elem = $(«.SomeClass») //Выбираем элементы.

    $elem.remove(); //Удаляем их.

    • встав­лять ещё одни перед ними:
    • заме­нять их на что-то дру­гое:
    • и про­сто плав­но пока­зы­вать на экране:

    Плюс: кроссбраузерность

    Мно­гие поль­зо­ва­те­ли исполь­зу­ют ста­рые бра­у­зе­ры, напри­мер Internet Explorer 11. Они это дела­ют не пото­му, что не зна­ют, как обно­вить­ся, а пото­му что на рабо­те админ запре­тил уста­нов­ку любо­го соф­та; или в госу­че­ре­жде­ни­ях дав­но не обнов­ля­ли ком­пью­те­ры.

    Тут и спа­са­ет jQuery: раз­ра­бот­чи­ки сами преду­смот­ре­ли под­держ­ку ста­рых бра­у­зе­ров. Напри­мер, вот как может выгля­деть про­вер­ка на вер­сии Intertet Explorer:

    И такие услов­ные бло­ки есть для всех ста­рых вер­сий IE.

    Если всё настоль­ко кру­то, как здесь напи­са­но, то все долж­ны уже были дав­но перей­ти на jQuery и забыть про JavaScript, но это­го не про­ис­хо­дит. Более того, у jQuery есть свои суще­ствен­ные мину­сы и огра­ни­че­ния.

    Минус: вы контролируете не всё

    Если вам нужен мак­си­маль­ный кон­троль за всем, что про­ис­хо­дит на сай­те, то луч­ше исполь­зо­вать чистый JavaScript. В этом слу­чае вы пол­но­стью уве­ре­ны в том, как ведёт себя стра­ни­ца, и не зави­си­те от сто­рон­не­го кода.

    Если исполь­зу­е­те ред­кий пла­гин, есть риск, что он может не рабо­тать настоль­ко надёж­но, как вам нуж­но. К тому же, не все сто­рон­ние пла­ги­ны так же хоро­шо опти­ми­зи­ро­ва­ны, как сам jQuery: в ито­ге у вас ради какого-то одно­го эффек­та или бло­ка на стра­ни­це появит­ся огром­ная биб­лио­те­ка, кото­рая будет всё страш­но замед­лять.

    Минус: много всего

    Под­клю­чать целую биб­лио­те­ку ради одно­го эффек­та — не самая луч­шая идея. Ино­гда про­ще потра­тить лиш­них пять минут и сде­лать то же самое на JavaScript, чем тащить в про­ект лиш­них 64 кило­бай­та кода.

    Напри­мер, что­бы одно­крат­но вызвать обра­бот­чик собы­тия, мож­но под­клю­чить jQuery и напи­сать так:

    А мож­но ниче­го не под­клю­чать и исполь­зо­вать про­стой JavaScript, кото­рый уже научил­ся делать то же самое через тре­тий, необя­за­тель­ный, пара­метр в addEventListener:

    Плюс-минус: многое можно уже сделать и на JavaScript

    В самом нача­ле, когда jQuery толь­ко появил­ся, он силь­но помо­гал раз­ра­бот­чи­кам, пото­му что сам JavaScript мно­гое не умел делать так же лег­ко и изящ­но. Сей­час JS по воз­мож­но­стям и удоб­ству почти догнал jQ, и то, на что рань­ше ухо­ди­ло 10 команд, теперь дела­ет­ся одной.

    Заме­на одно­го эле­мен­та на стра­ни­це на дру­гой.

    Минус: нет понимания технологии

    Чрез­мер­ное увле­че­ние jQuery может при­ве­сти к тому, что про­грам­мист про­сто не будет пони­мать, как рабо­та­ют меха­низ­мы у него на стра­ни­це и не смо­жет их испра­вить, если что-то пой­дёт не так.

    Напри­мер, про­грам­мист при­кру­тил на стра­ни­цу какой-то эффект на базе jQuery. Потом еще один, и они нача­ли кон­флик­то­вать. Если про­грам­мист не может разо­брать­ся в устрой­стве этих биб­лио­тек, он не смо­жет раз­ре­шить кон­фликт — а для это­го нуж­но пони­мать чистый javaScript и уметь отла­жи­вать код.

    Полу­ча­ет­ся, что знать jQuery всё-таки полез­но, но нуж­но пони­мать, когда без него мож­но обой­тись.

    Ско­ро возь­мем эту биб­лио­те­ку за осно­ву и сде­ла­ем какой-нибудь полез­ный про­ект. Под­пи­сы­вай­тесь, мы напи­шем, когда что-нибудь такое вый­дет.

    Как обойтись без jQuery

    JQuery вездесущ. Но зачем он всё-таки нужен? Если вы пользуетесь только тем, о чём пойдёт речь дальше, то считайте, что jQuery вам не нужен. Достаточно обычного JavaScript.

    1. Селекторы

    Можно использовать функции querySelector (возвращает первый элемент из соответствующих критериям) и querySelectorAll (возвращает NodeList из всех элементов, удовлетворяющих критериям). Они покрывают почти все нужды.

    2. Обработчики событий

    Обработку событий сейчас легко делать с помощью addEventListener. Например, так:

    3. Управление классами и атрибутами

    Классы можно присваивать/удалять при помощи свойства classList.

    Аттрибуты можно присваивать с помощью setAttribute().

    4. Вставка и удаление элементов страницы

    Это делать не так удобно, как на jQuery, но всё же возможно при помощи функций createElement (создать не привязанный к DOM новый элемент. До поры он будет «висеть в воздухе»), appendChild (добавить дочерний элемент, который может быть создан, например, предыдущей функцией), insertBefore(втсавить элемент перед тем, на котором вызывается функция) и т.п. Удалять элемент из дерева DOM можно функцией removeChild.

    5. Получить содержимое элемента или поменять его

    Это делается с помощью свойств элемента textContent (берем только текст) и innerHTML (берем полностью HTML внутри элемента).

    6. Обработка массивов

    Пройти по всем элементам массива можно сс помощью forEach или функции map

    7. Осуществить действия по готовности страницы (document ready)

    Это делается так:

    Выводы

    Все упомянутые вещи легко делать с помощью нативного JavaScript. За рамками рассмотрения остались некоторые другие часто нужные задачи, такие как навигация по DOM, но она тоже реализуется с помощью JavaScript достаточно легко, хотя и не так красиво, как в jQuery. Вместо AJAX-вызова jQuery можно использовать объекты XMLHttpRequest и его методы, либо какую-нибудь небольшую библиотеку, специально для этого предназначенную. Возможно, если ваш сайт нагружен визуальными эффектами вроде анимации, то отказываться от jQuery и рано, хотя если дело только в этом, то имеется много маленьких, быстрых специализированных библиотек для этих задач.

    Оставить комментарий Отменить ответ

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

    Я знаю jQuery. И что?

    На конференции jQuery UK 2013 я делал доклад под названием «Я знаю jQuery. И что?». Обычно я готовлюсь, устраивая взрыв из стикеров на своём столе, но в этот раз я сперва написал пост, а потом уже сделал слайды. Итак, вот мой практически не отредактированный и немного путаный рассказ о том, как я работал с jQuery, и как я смотрю на использование встроенных браузерных технологий.

    7 лет назад…

    17 июня 2006 года я опубликовал мой самый первый настоящий пост в блоге: я взял обычный JavaScript и упростил его с помощью jQuery. В итоге 14 строчек JavaScript превратились в три строчки на jQuery (версии pre-1.0).

    Самый важный эффект от jQuery был в том, что вместо муторной навигации по DOM вы писали простой CSS-селектор, после чего к нужному элементу добавлялся класс. К тому же, исходный JavaScript-код был довольно нестабильным, а разметка у вас получалась одна и та же в обоих случаях.

    Я показал jQuery команде разработчиков, с которыми я сотрудничал в середине 2000-х, и даже дизайнеры увидели все плюсы этого подхода, поскольку CSS-селекторы были им уже знакомы (именно так и возникла идея «jQuery для дизайнеров»).

    Внезапно навигация по DOM стала простой

    В те времена навигация по DOM была очень сложной. Можно было поспорить — если у вас получалось что-то сделать в Firefox 1.5, то в IE6 это не работало.

    Простота, с которой можно было изучить jQuery, стала для меня плюсом. Вся навигация по DOM делалась с помощью CSS-селекторов (реализовано это было какой-то безумной магией из «черного ящика», которую придумал Джон Резиг) — главное, что это экономило мои ограниченные мыслительные ресурсы, и, когда я получал нужные мне элементы DOM, я уже мог делать с ними все что угодно (показывать, скрывать, анимировать и т.п.)

    Понимание Ajax

    jQuery также поставила на доступный мне уровень абстракцию Ajax. Этот термин был придуман буквально только что, в 2005 году, и документации по технологии было мало, понять её было непросто (не забывайте про ограниченные вычислительные способности моего мозга).

    Итак, мне нужно было работать с объектом XMLHttpRequest . Когда я увидел его впервые, мне стоило усилий понять, как работает событие onreadystatechange и пара this.status и this.readyState . jQuery, как и ряд других библиотек, разобралась с тем ужасом, который представляли собой XHR-запросы в IE через ActiveX…

    Когда я увидел, что в jQuery можно использовать функцию ajax , для того чтобы выцепить HTML по какому-то адресу (именно это мы обычно и хотели делать с помощью Ajax), вся технология внезапно стала для меня понятной.

    jQuery сразу и надолго стала моим обычным инструментом. Это был мой «швейцарский нож», если позаимствовать название доклада Адама!

    Назад в будущее: сегодня

    Давайте промотаем ленту вперед и вернемся в сегодняшний день. Что случилось за эти годы?

    Для начала: моя позиция по умолчанию — это не «всегда подключай jQuery». Я лучше знаю JavaScript, и как в нём все работает. У меня появились собственные критерии, когда нужно подключать jQuery, а когда нет. Но если я не подключаю jQuery, что тогда?

    За эти семь лет произошло довольно многое. Вероятно, одним из самых важных шагов вперед стало появление в браузерах querySelectorAll .

    Возможность передать встроенной функции внутри браузера CSS-селектор, чтобы сам браузер работал над навигацией по DOM — это огромная (правда!) часть jQuery. Базовая поддержка была в Chrome с самого начала, в IE8 и Firefox 3.5 появилась в середине 2009 года.

    Эндрю Ланни (из PhoneGap и Adobe) написал невероятно простую функцию:

    Это просто и прекрасно.

    Я взял его идею, немного развил ее и использовал в ряде довольно специфических проектов, добавив поддержку для чейнинга, циклов и упростив синтаксис. В сжатом виде все занимает меньше 200 байт. Смысл этого в том, что сейчас у нас есть встроенная в браузеры поддержка для ряда функций, и я стараюсь принимать во внимание аудиторию своего проекта, перед тем как по умолчанию подключать jQuery.

    В каких случаях я всегда использую jQuery

    Прежде чем я расскажу о том, как я могу обходиться без jQuery, быть «нагим» — давайте я расскажу о случаях, когда я точно включаю jQuery в проект. Есть несколько довольно специфических причин, которые заставляют меня либо начинать прямо с jQuery, либо переключаться на нее с какого-то специально написанного решения.

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

    1. Когда проект должен работать в устаревших браузерах

    BBC достаточно четко озвучили, что именно они называют современным браузером, и по некотором размышлении это и есть тот признак, по которому я решаю, включать jQuery по умолчанию или нет.

    Если я знаю, что я должен работать с несовременными браузерами, и они составляют часть ядра аудитории, то я начну с jQuery внутри своего кода.

    Что значит «современный»? По большому счету, ответ простой: поддерживает ли браузер querySelectorAll ? BBC применяет следующий тест на соответствие требованию современности:

    Я знаю наизусть, что IE8 не поддерживает addEventListener (хотя и существует полифил), так что, если поддержка этого браузера важна для проекта, я понимаю, что не хочу начинать проект с хаков для IE8.

    Не то чтобы я хочу сказать, что те проекты, которые я начинаю без jQuery, не будут поддерживать IE8. Скорее — что нужно начинать с малого и делать разработку простой с самого начала. Если я начну проект с охапки хаков — проблем не оберёшься.

    И еще я считаю это тем случаем, «когда сложность перевешивает простоту».

    2. Когда я делаю что-то дешево и сердито

    Если я создаю какой-то концепт, тестирую идею или просто что-то набрасываю и отправляю в JS Bin, обычно я просто добавляю jQuery по умолчанию. Так мне не приходится лишний раз думать.

    Без jQuery!

    Наверное, вы думаете: «Так, Реми использует jQuery, а если нет, то просто переписывает все фичи сам?»

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

    Нет, всё не так. Просто есть довольно много сценариев, в которых я буду писать код своего приложения без библиотеки, опираясь на встроенные в браузер технологии. Если какая-то часть этих технологий не поддерживается в том или ином браузере, я могу прибегнуть к полифилам — но только после тщательного рассмотрения и понимания, что это имеет смысл.

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

    document.ready

    Даже когда я использую jQuery, если у меня (или моей компании) есть контроль над проектом, я очень редко использую document.ready (или его короткую версию: $(function) ).

    Дело в том, что весь JavaScript я размещаю под всем DOM, перед тегом

    10 методов для замены jQuery чистым JavaScript в проектах

    В уроке будут приводиться два варианта решения — модерн и наследие. Решения типа «модерн» представляют собой новейшие методы, а «наследие» демонстрирует то, что будет нравиться старым браузерам. Выбор варианта зависит от разработчика веб проекта и целевой аудитории.

    Вступление

    Обратите внимание, что некоторые варианты из набора «наследие» в данной статье используют простую, кросс-браузерную функцию addEvent. Данная функция нормализует два варианта — рекомендованную W3C модель событий addEventListener и вариант для Internet Explorer attachEvent.

    Когда используется функция addEvent(els, event, handler) в коде, она представляет собой следующий код:

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var addEvent = (function () <
    var filter = function(el, type, fn) <
    for ( var i = 0, len = el.length; i
    Данная функция обращается к DOM для получения элемента с идентификатором container и создает новый объект jQuery.
    Модерн

    querySelector является частью API Selectors, которая обеспечивает возможность обращения к DOM с помощью селекторов CSS.

    Данный метод возвращает первый элемент, который соответствует переданному селектору.
    Наследие

    Обратите внимание на ссылку на элемент. Когда используется getElementById нужно передать только одно значение, а для querySelector придется передавать селектор CSS.

    2 – $(‘#container’).find(‘li’);

    В данном случае мы получаем любое количество пунктов списка, которые являются потомками элемента #container.
    Модерн

    querySelectorAll возвращает все элементы, которые соответствуют определенному CSS селектору.

    Ограничения. Хотя все браузеры поддерживают API Selectors, передача определенных селекторов CSS ограничивается возможностью браузера. Например: Internet Explorer 8 поддерживает только селекторы CSS 2.1.
    Наследие

    3 – $(‘a’).on(‘click’, fn);

    В данном примере обработчик события click привязывается ко всем ссылкам на странице.
    Модерн

    Выше приведенный код выглядит ужасно, но он не так уж и плох. Так как querySelectorAll возвращает NodeList, а не массив, то мы не можем непосредственно использовать метод, например, forEach. Данный момент обходится вызовом forEach для объекта Array и передачей результата querySelectorAll как this.
    Наследие

    Данный пример немного отличается. Код jQuery используется для делегирования события. Обработчик click используется для всех неупорядоченных списков. Но возвратная функция будет запускаться только целью (где пользователь нажимает кнопку) является ссылка.
    Модерн

    ехнически, данный метод JavaScript не является полным соответствием примеру jQuery. Он привязывает обработчик события непосредственно к document. А затем используется метод matchesSelector для определения того факта, что цель (узель, на котором произошло нажатие кнопки) соответствует указанному селектору. Таким образом, мы привязываем единственный обработчик события.

    Обратите внимание, что на момент написания урока все браузеры реализовывали matchesSelector с использованием префиксов: mozMatchesSelector, webkitMatchesSelector, и так далее. Для нормализации метода, вы можете написать:

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var matches;

    (function(doc) <
    matches =
    doc.matchesSelector ||
    doc.webkitMatchesSelector ||
    doc.mozMatchesSelector ||
    doc.oMatchesSelector ||
    doc.msMatchesSelector;
    >)(document.documentElement);

    document.addEventListener(‘click’, function(e) <
    if ( matches.call( e.target, ‘ul a’) ) <
    // Обработка
    >
    >, false);

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var uls = document.getElementsByTagName(‘ul’);

    Для обеспечения обратной совместимости мы проверяем, что свойство nodeName (имя целевого элемента) равно нашему запросу. Обратите внимание на факт, что старые версии Internet Explorer иногда играют своими собственными правилами. Вы не захотите получать доступ к цели непосредственно из объекта event. Зазочется использовать event.srcElement.

    5 — $(‘#box’).addClass(‘wrap’);

    jQuery обеспечивает удобный API для модификации имени класса для набора элементов.
    Модерн

    Новая техника использует новый API classList для добавления, удаления и переключения класса (add, remove, и toggle).

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var container = document.querySelector(‘#box’);

    container.classList.add(‘wrap’);
    container.classList.remove(‘wrap’);
    container.classList.toggle(‘wrap’);

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> box = document.getElementById(‘box’),

    has > var regex = new RegExp(‘(?:\\s|^)’ + cl + ‘(?:\\s|$)’);
    return !!el.className.match(regex);
    >,

    remove > var regex = new RegExp(‘(?:\\s|^)’ + cl + ‘(?:\\s|$)’);
    el. );
    >,

    toggle > hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);

    addClass(box, ‘drago’);
    removeClass(box, ‘drago’);
    toggleClass(box, ‘drago’); // Если элемент не имеет класса ‘drago’, добавляем его.

    Обратная совместимость требует достаточно много действий.

    Метод jQuery next возвращает элемент, который следует непосредственно за текущим элементом наборе.
    Модерн

    nextElementSibling ссылается на следующий узел за элементом. К сожалению, Internet Explorer 8 и старше не поддерживают его.
    Наследие

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var list = document.getElementById(‘list’),
    next = list.nextSibling;

    // Нам нужен следующий элемент, а не текст.
    while ( next.nodeType > 1 ) next = next.nextSibling;

    Есть пара способов для реализации задачи. В данном примере мы определяем тип узла nodeType, который следует на определенным элементом. Это может быть текст, элемент или, даже, комментарий. Так как нам нужен именно следующий элемент, то мы ищем nodeType равный 1. Если next.nodeType возвращает номер больше, чем 1, то мы пропускаем узел, так как он, вероятно, является текстом.

    В дополнение к запросам DOM jQuery также предлагаем возможность создавать и вставлять элементы.
    Модерн

    В данном примере нет ничего нового. Таким способом выполнялся процесс создания и вставки элемента в структуру DOM очень давно.

    Вероятно, что вам понадобится добавить содержание в элемент. В данном случае вы можете использовать innerHTML или createTextNode.

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> div.appendChild( document.createTextNode(‘wacka wacka’) );

    div.innerHTML = ‘wacka wacka’;

    8 – $(document).ready(fn)

    Метод jQuery document.ready невероятно удобен. Он позволяет нам выполнять код сразу по завершению загрузки DOM.
    Модерн

    Стандартная часть HTML5, событие DOMContentLoaded генерируется после завершения анализа документа.
    Наследие

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> // http://dustindiaz.com/smallest-domready-ever
    function ready(cb) <
    /in/.test(document.readyState) // in = loadINg
    ? setTimeout(‘ready(‘+cb+’)’, 9)
    : cb();
    >

    ready(function() <
    // Получаем нужное из DOM
    >);

    Решение для обратной совместимости — каждые 9 миллисекунд мы проверяем значение document.readyState. Если возвращается «loading”, то документ все еще не загружен полностью (/in/.test()). Как только значение document.readyState будет равно «complete,” выполнится возвратная функция.

    9 – $(‘.box’).css(‘color’, ‘red’);

    Если возможно, всегда добавляйте класс к элементу, когда нужно задать ему определенный стиль. Однако, иногда стили задаются динамически, и приходится вставлять атрибуты.
    Модерн

    Снова мы используем технику [].forEach.call() для фильтрации всех элементов с классом box и придания им красного цвета с помощью объекта style.
    Наследие

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var box = document.getElementsByClassName(‘box’), // смотрите пример 10 ниже для кросс-браузерного решения
    i = box.length;

    Мы используем трюк с циклом while. По существу, мы имитируем:

    200?’200px’:»+(this.scrollHeight+5)+’px’);»> var i = 0, len;

    for ( len = box.length; i

    Определенно, цель полностью заменить jQuery API выходит за рамки данного урока. Но часто в проектах функции $ или $$ используются для короткой записи получения одного или нескольких элементов из DOM.
    Модерн

    Илон Маск рекомендует:  Что такое код pspell_new_config
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL