Забываем о jQuery с Vue.js (Часть 1)
Стало невозможным игнорировать шум вокруг 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
