Забываем о jQuery с Vue.js (Часть 1)

Vlad Kopenkin
Mar 28, 2018 · 4 min read

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

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

Итак, если код вашей страницы выглядит таким образом:

Вы могли бы буквально изменить тэг script и все ещё использовать HTML и JS in вместе, как вы и привыкли, меняя всего пару кусочков кода. Вам не нужно будет переписывать HTML в JavaScript, вам не понадобится webpack, и вам не потребуется настраивать огромную систему:

Вы можете изменить тэг и при это совершенно не касаться разметки. Самое лучшее в этом то, что вы моглибы решить что код станет сложнее и запутаннее. Но читая и рассматривая примеры в каждой из частей этой статьи, вы убедитесь, что Vue невероятно прост, прост в понимании, а также легко поддерживаемый и масшатабируемый. Если говорить о размерах, то они достаточно сравнимы, если использовать их через CDN и минимизированными, Vue версия 2.5.3 занимает 86KB. jQuery 3.2.1 - 87KB.

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

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

Достаточно типичная задача решаемая с помощью JavaScript - захват ввода данных пользователем из формы, с неё и начнём. Мы не будем сразу рассматривать полноценную форму, для упрощения понимания примера, но мы придём к этому постепенно.

Вот как бы мы решили эту задачу с помощью jQuery :

Vue:

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

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

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

Но! Это не так обыденно, как запись чего либо по нажатию клавиши enter, так что давайте продолжим.

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

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

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

“Найди мне этот элемент, посмотри чем он занят, притормози эти изменения, сделай что нибудь с этими изменениями.”

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


Продолжение во второй части статьи - https://goo.gl/kQrkz6


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade