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

Image for post
Image for post

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

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

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

//*.html
<main>
<div class="thing">
<p>Some content here</p>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
//*.js
немного Vue.js кода

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

//*.html
<main>
<div class="thing">
<p>Some content here</p>
</div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
//*.js
немного Vue.js кода

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

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

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

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

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

//*.html
<div id="app">
<label for="thing">Name:</label>
<input id="thing" type="text" />
<p class="formname"></p>
</div>
//*.js
// это синоним $(document).ready(function() {
$(function() {
$('#app').keyup(function(e) {
var formname = $(this).find('.formname');
//Создаём перменную для устранения дубликации кода
var n_input = $(this).find('#thing').val();
formname.empty();
formname.append(n_input);
});
});

Vue:

//*.html
<div id="app">
<label for="name">Name:</label>
<input id="name" type="text" v-model="name" /> <!--v-model is doing the magic here-->
<p>{{ name }}</p>
</div>
//*.js
//Это сущность vuew
new Vue({
//this targets the div id app
el: '#app',
data: {
name: '' //это свойство хранит данные из поля ‘name’
}
})

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

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

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

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

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

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

//*.html
<div id="app">
<label for="thing">Name:</label>
<input id="thing" type="text" />
<p class="formname"></p>
</div>
//*.js
// Это синоним $(document).ready(function() {
$(function() {
//Мы даём тегу div аттрибут id - app и находим остальные элементы для сокращения поисков
$('#app').change(function(e) {
var n_input = $(this).find('#thing').val();
$(this).find('.formname').append(n_input);
});
});
//*.html
<div id="app">
<label for="name">Name:</label>
<input id="name" type="text" v-model.lazy="name" />
<p>{{ name }}</p>
</div>
//*.js
new Vue({
el: '#app',
data: {
name: ''
}
});

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

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

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

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

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store