Использование Vue.js вместо jQuery: Этап создания билда необязателен

Использование Vue.js вместо jQuery: Этап создания билда необязателен

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

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

Итак, если ваша текущая структура страницы выглядит так:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Вы могли бы буквально изменить тег сценария и продолжать использовать HTML и JS в тандеме, как и раньше, сделав рефакторинг всего лишь нескольких небольших битов кода. Вам не нужно переписывать HTML-код в JavaScript, не нужно использовать webpack и не нужно настраивать гигантскую систему:

Вы можете заменить теги и оставить разметку как есть. Ещё лучше, вы можете подумать, что код будет усложняться, но в этой статье есть примеры, что Vue чрезвычайно разборчив и прост в обслуживании и адаптации. С точки зрения размера, jQuery и Vue довольно сопоставимы — их можно использовать, как из CDN, минимизируя: версия Vue 2.5.3 — 86 КБ . jQuery 3.2.1 — 87 КБ.

Давайте рассмотрим некоторые распространенные случаи использования jQuery, как мы переключим их на Vue, и причины, по которым мы хотим это сделать.

Захват входных данных от пользователя

Очень распространенный случай использования JavaScript на сайте — это захват ввода пользователем из формы, поэтому давайте начнем с него. На самом деле мы не будем включать полную форму в интересах простоты и ясности, но в конце мы к этому подойдем.

Вот что мы будем делать параллельно в jQuery и Vue, чтобы захватить информацию как пользовательский тип:

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

Вы также можете видеть, что в версии jQuery DOM находится под контролем — мы извлекаем вещи из DOM, слушая и реагируя на него. Это связывает нас с тем, как DOM в настоящее время настроен, и заставляет нас думать о том, как пройти его. Если бы структура элементов HTML изменилась, нам пришлось бы адаптировать код в соответствии с этими изменениями.

В версии Vue мы сохраняем состояние – мы отслеживаем одно свойство, которое хотим обновить и изменить, и элемент, который хотим изменить, по названию директивы. Это означает, что он привязан непосредственно к элементу HTML, который нам нужно настроить. Структура DOM может измениться, HTML может переместиться, и ничто из этого не повлияет на нашу производительность или не закрепит эти события. В нашем случае мы используем атрибут v-model на входе для подключения к данным, которые храним в JavaScript.

Но! Это не так часто используется, как хранение чего-то, когда вы нажимаете клавишу ввода, так что давайте посмотрим далее.

Сохранение пользовательского ввода на одном событии

Интересная вещь работы Vue, заключается в том, что она не связана с необходимостью думать о конкретных событиях DOM при хранении и извлечении данных. По сути, у нас уже есть идея того, что мы хотим захватить; мы даем ему форму, выбирая событие, с помощью которого можно его изменить. Напротив, jQuery тесно связан с тем, что делает DOM, и опирается на эти события для создания переменных, которые хранит, и которые могут быть размещены в любом месте, при том не одной последовательной группой (в данных) для извлечения. Мы можем видеть это в обновленной версии последнего примера, где информация собирается при нажатии клавиши ввода:

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

«Идите, возьмите этот элемент, посмотрите, что он делает, держитесь за эти изменения, делайте что-нибудь с ними».

В сравнении: в Vue мы контролируем, что меняется, и DOM отвечает на эти изменения, основываясь на наших командах. Мы прикрепляем его непосредственно к тому, что мы хотели бы обновить. В нашем случае, у нас есть небольшая абстракция — называется модификатор: v-model.lazy. Теперь Vue знает, что не следует сохранять это до тех пор, пока не произойдет событие изменения. Довольно аккуратно!

Переключение классов

Следующее, что мы рассмотрим, — это переключение классов CSS, потому что, как сообщил мне всемогущий Googly, это самая распространенная функция jQuery.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Опять же, мы видим, что в версии jQuery мы сохраняем состояние в DOM. Элемент имеет класс, и jQuery принимает решение, основанное на присутствии класса, которое он проверяет, проверяя DOM. В версии Vue мы сохраняем условие, и мы ставим его в соответствии с этим состоянием. Мы не просим у DOM эту информацию, мы держим ее сами.

Мы сохраняем active в данные, кнопка переключает условие .red и изменяется на основе этого условия. Даже состояния для доступности aria-pressed заявляются гораздо быстрее, так как нам не нужно ничего устанавливать в скрипте во Vue, мы можем переключаться между состояниями, непосредственно встроенными в шаблон, в зависимости от состояния ‘ active.’

Возможно, вам опкажется в последних нескольких примерах, что гораздо больше кода начнет работать с Vue.js, чем jQuery, но они на самом деле довольно сопоставимы.

Скрытие и показ

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

Как jQuery, так и Vue делают хорошую работу по поддержанию простоты задачи, но есть несколько причин, по которым я действительно работаю с Vue ради чего-то вроде переключения. У Vue есть инструмент под названием Vue devtools . Он не похож на Chrome devtools, но когда мы его используем, то получаем некоторую специальную информацию о том, что происходит с Vue.

В обеих версиях jQuery и Vue мы видим, что элемент скрывается и появляется. Но что, если вдруг что-то пойдет не так? Что, если что-то в коде не работает так, как мы ожидали? Чтобы начать отладку с помощью jQuery, мы, вероятно, добавим некоторые console.logs или установим некоторые брекпоинты, чтобы попытаться отследить, где были ошибки.

Сейчас нет ничего плохого в console.logs, но с помощью Vue devtools мы можем получить практичный Vue (не удержаться) от того, что думает Vue. В этом gif ниже вы можете видеть, как мы переключаем кнопку, Vue devtools соответственно обновляет состояние true / false. Если бы DOM никогда не работал так, как мы ожидали, мы могли бы видеть данные в Vue в режиме реального времени. Это значительно облегчает отладку; это действительно замечательно.

Другая вещь, которая мне нравится, заключается в том, что v-ifее легко распространить на другие условия. Я могу решить использовать вещь, вызываемую v-show вместо v-if, если вещь, которую я переключу, будет показываться и скрываться часто: v-if полностью отключит элемент, а v-show будет просто переключать видимость. Это различие действительно важно, потому что гораздо более эффективно переключать видимость в стиле, а не полностью демонтировать / монтировать узел DOM. Я могу показать или скрыть что-то, основанное на множестве условий или даже на присутствии пользователя или других условий. Обычно это происходит, когда jQuery может немного запутаться, пинговать DOM в нескольких местах и координировать их. Ниже приведен пример координирования, показывающий что-то, основанное на наличии пользовательского ввода:

В этом примере вы можете увидеть, что VUE удерживает состояние — мы реагируем на изменения очень естественно и с меньшим количеством кода в целом. Как только вы привыкнете к стилю, поймёте быстрее, потому что вам не нужно трассировать логику за строкой. Многие люди называют это различие «императивное против декларативного».

Отправка формы

Канонический случай использования jQuery исторически представлял форму с вызовом AJAX, поэтому мы должны также взглянуть и на это. Vue фактически не имеет встроенной вещи, такой как AJAX; в приложении Vue типично использовать что-то вроде Axios (библиотека JavaScript для создания HTTP-запросов), чтобы справиться с задачей.

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

Кнопка будет серой, прежде чем мы начнем печатать в форме, после она получит active класс и станет синей;

Когда мы отправим форму, мы сохраним загрузку страницы;

Когда форма будет отправлена, мы покажем данные ответа на странице.

Здесь мы видим, что строки 2-10 касаются обработки класса кнопок, аналогично тому, как мы это делали раньше. Мы передаем параметр, называемый событием, в форму, а затем вызываем event.preventDefault(), чтобы не перезагружать страницу. Затем мы собираем все данные формы из входов формы, обрабатываем и затем помещаем ответ в .done()вызов из запроса AJAX.