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

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

Некоторые люди могут не знать, что можно включить Vue js вместо jQuery в свой проект без этапа создания билда. Vue является гибким в том смысле, что мы можем использовать его непосредственно в 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>
<script> //some jquery code here
</script>

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

<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>
<script> //some vue code here
</script> 

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

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

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

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

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

<div id="app"> <label for="thing">Name:</label> <input id="thing" type="text" /> <p class="formname"></p>
</div>

// this is an alias to $(document).ready(function() {
$(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); });
});

<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>

//this is a vue instance
new Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for ‘name’ }
})

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

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

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

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

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

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

<div id="app"> <label for="thing">Name:</label> <input id="thing" type="text" /> <p class="formname"></p>
</div>

// this is an alias to $(document).ready(function() {
$(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); });
});

<div id="app"> <label for="name">Name:</label> <input id="name" type="text" v-model.lazy="name" /> <p>{{ name }}</p>
</div>

new Vue({ el: '#app', data: { name: '' }
});

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

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

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

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

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

<div id="app"> <button aria-pressed="false">Toggle me</button> <p class="toggle">Sometimes I need to be styled differently</p>
</div>

.red { color: red;
}

$(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); });
});

<div id="app"> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">Sometimes I need to be styled differently</p>
</div>

.red { color: red;
}

new Vue({ el: '#app', data: { active: false }
})

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

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

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

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

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

<div id="app"> <button type="button" id="toggle" aria-expanded="false"> Toggle Panel </button> <p class="hello">hello</p>
</div>

$(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); });
});

<div id="app"> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> Toggle Panel </button> <p v-if="show">hello</p>
</div> 

new Vue({ el: '#app', data: { show: true }
})

Как 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 в нескольких местах и координировать их. Ниже приведен пример координирования, показывающий что-то, основанное на наличии пользовательского ввода:

<div id="app"> <label for="textarea">What is your favorite kind of taco?</label> <textarea id="textarea" v-model="tacos"></textarea> <br> <button v-show="tacos">Let us know!</button>
</div>

new Vue({ el: '#app', data() { return { tacos: '' } }
})

<div id="app"> <label for="textarea">What is your favorite kind of taco?</label> <textarea id="textarea"></textarea> <br> <button v-show="tacos">Let us know!</button>
</div>

$(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length > 0) { button.show(); } else { button.hide(); } })
});

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

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

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

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

<div id="app"> <form action="/"> <div> <label for="name">Name:</label><br> <input id="name" type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input id="email" type="email" name="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea id="caps" name="caps" required></textarea> </div> <button class="submit" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre class="response"></pre> </div> </form>
</div>

$(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); });
});

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

<div id="app"> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input id="name" type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input id="email" type="email" v-model="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea id="caps" v-model="caps" required></textarea> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre>{{ response }}</pre> </div> </form>
</div>

new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response => { this.response = JSON.stringify(response, null, 2) }) } }
})

В версии Vue мы определяем, какие поля нужно заполнить в форме, а затем присоединить их к той V-модели, которую мы использовали ранее. Мы проверяем наличие имени для переключения класса. Вместо того, чтобы писать event.preventDefault(), все, что нам нужно сделать, это написать @submit.prevent на нашем элементе формы, и о нас позаботятся. Чтобы отправить сообщение, мы используем Axios, и ответим на экземпляр Vue.

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

Заключение

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

Благодаря гибкости Vue, также легко перевести этот код на этап сборки и структуру компонентов, если вы хотите с течением времени принять более сложную структуру. На самом деле довольно забавно попробовать, поэтому, когда вы будете готовы это сделать, проверьте vue-cli . Что этот инструмент делает — дает вам возможность эскизировать весь Vue и webpack на уровне производства с помощью всего лишь нескольких команд терминала. Это позволяет работать с однофайльными компонентами, где вы можете использовать HTML, CSS и Script в тандеме в одном файле, который состоит из отдельных компонентов многократного использования. Вам не нужно настраивать сборку webpack, если вы не хотите делать что-то особенное, поэтому вы сэкономите кучу времени на настройке. У них даже есть встроенная команда, чтобы все подготовить для развертывания производства.

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

Автор: Sarah Drasner

Источник: https://www.smashingmagazine.com/

Редакция: Команда webformyself.