Переход с jQuery на Vue Javascript


Переход с jQuery на Vue Javascript

53604 просмотра

7 ответа

829 Репутация автора

Я создаю веб-приложение внутри VueJS, но столкнулся с проблемой. Я хочу использовать расширение jQuery (кропить, чтобы быть конкретным), но я не знаю, как правильно создать / потребовать / импортировать его без ошибок.

Я использую официальный инструмент CLI и шаблон веб-пакета для своего приложения.

Я включил jQuery, как это в моем файле main.js:

Сейчас я создаю компонент редактора изображений, в котором я хочу создать экземпляр, который выглядит так:

Но я продолжаю получать ошибки . Теперь мой вопрос заключается в том, как правильно создать экземпляр jQuery и плагинов через NPM / Webpack / Vue?

Ответы (7)

6 плюса

819 Репутация автора

Вам нужно использовать либо globals загрузчик, либо expose загрузчик, чтобы убедиться, что веб-пакет включает библиотеку jQuery в ваш вывод исходного кода и чтобы он не выдавал ошибок при использовании $ в ваших компонентах.

Если вы предпочитаете, вы можете импортировать (требовать) его непосредственно в конфигурацию вашего веб-пакета в качестве точки входа, так что я понимаю, но у меня нет примера этого под рукой

Кроме того, вы можете использовать загрузчик globals следующим образом: https://www.npmjs.com/package/globals-loader

2 плюса

856 Репутация автора

Я использую это так:

Автор: lukpep Размещён: 21.06.2020 06:46

51 плюса

10798 Репутация автора

Вариант № 1: Используйте ProvidePlugin

Добавьте ProvidePlugin к массиву плагинов в обоих build/webpack.dev.conf.js и build/webpack.prod.conf.js так, чтобы jQuery стал глобально доступным для всех ваших модулей:

Вариант № 2. Использование модуля Expose Loader для веб-пакета

Как @TremendusApps предлагает в своем ответе, добавьте пакет Expose Loader :

Используйте в вашей точке входа, main.js как это:

2 плюса

673 Репутация автора

Сначала установите jquery, используя npm,

5 плюса

194 Репутация автора


Предположим, у вас есть проект Vue, созданный с помощью vue-cli (например, vue init webpack my-project). Перейти к проекту DIR и запустить

npm install jquery —save

Откройте файл build/webpack.base.conf.js и добавьте plugins :

Также в начале файла добавьте:

const webpack = require(‘webpack’)

Если вы используете ESLint, откройте .eslintrc.js и добавьте следующие глобальные переменные: <

Теперь вы готовы к работе. Используйте $ где угодно в вашем JS.

ПРИМЕЧАНИЕ. Чтобы использовать это, вам не нужно включать expose loader или любой другой материал.

Автор: SkuraZZ Размещён: 29.05.2020 09:27

плюса

1964 Репутация автора

Шаг 1 Мы помещаем себя с терминалом в папку нашего проекта и устанавливаем JQuery через npm или yarn.

Шаг 2 В нашем файле, где мы хотим использовать JQuery, например app.js ( resources / js / app.js ), в разделе сценариев мы включаем следующий код.

плюса

7079 Репутация автора

Там намного, намного проще. Сделай это:

Сначала убедитесь, что JQuery установлен с npm install jquery .

Стою на развилке что использовать в проекте Spring: Thymeleaf или Vue.js?

Начал делать сайт, реализованы несколько страниц, добавление нескольких типов объектов, администрирование ролей пользователей.

Начал активно использовать Tabulator для отрисовки таблиц на сайте, очень понравилась модель работы, когда логика таблицы запускается на стороне пользователя, а обращения к серверу происходят по средству REST запросов при необходимости и совсем нет необходимости постоянно перерисовывать HTML страницу.

Мне кажется это так же должно снизить нагрузку на сервер. Перераспределив процесс отрисовки на сторону клиента.

В замен этого Thymeleaf подразумевает полную работу на стороне сервера, а клиенту выдавать уже полностью готовый HTML.

В процессе продумывания новых функций начинает появляться потребность в динамических элементах. Например, поле со списком выбора, список выбора которого зависит от значения выбранного в другом поле. Если в Tabulator’е все понятно, он отрисовывает данные на стороне пользователя и в случае необходимости запросит список выбора REST запросом на сервере, то в Thymeleaf это либо пересовывать всю страницу при каждом выборе нового значения влияющего на состав списка выбора, либо допиливать дополнительные средства, которые будут динамически запрашивать данные Rest запросом(jQuery на сколько я понимаю).

Вот я и думаю, может переделать то, что уже сделано на Vue.js?

Следовательно встает вопрос реализации:

Thymeleaf + Vue.js — но тут задумываешся, а оно стоит того? И какие части отдавать Thymeleaf, а какие Vue.js?

Полностью переделать проект под Vue.js

Почему я задумался о переходе на Vue.js?

Мне не совсем понравилась концепция Thymeleaf, что каждое изменение на странице должно собираться на сервере и страница должна полностью отрисовываться заново;

Я в любом случае хочу использовать динамические элементы на странице, которые позволяют менять только часть содержимого страницы, как, например, с Tabulator меняется только элемент страницы содержащий таблицу;

Можно разгрузить сервер от множества мелких запрос, которые можно переложить на клиента: валидация форм, отрисовка страниц;


Можно на сервере оставить только запрос данных и возврат из в виде JSON.

Кто что по этому поводу думает?

1 ответ 1

Vue.js

Это наиболее верный путь. Скорее всего он увеличит количество работы (объем работы != затраченому времени). И все же я настоятельно рекомендую выбрать его. Написав бэк, Вам будет значительно легче просто работать с данными (основной подход Vue — data first). Чем опрерировать кусками шаблонов в связке Thymeleaf + jQuery.

Thymeleaf + jQuery

Отрисовка шаблонов, а затем встраивание их с помощью jQuery сносный вариант для 2008 — 2012 годов, когда небыло реализаций VirtualDOM, а JS движки были достаточно медленными и неоптимизированными. Время идет и сейчас это определенно не лучший подход. Перерисовка больших кусков DOM и ухудшение отзывчивости это не самые серьезные проблемы с которыми Вы можете столкнутся. К тому же (это мое личное мнение) с jQuery очень сложно писать эффективный и структурированный код.

Thymeleaf + Vue.js

Это худший из вариантов. Vue старается максимально оградить Вас от модификации DOM, к тому же если вы создадите Vue проект и скомпилируете его, то весь HTML будет автоматически превращен в JSX. Собранная версия проекта ( npm run build ), не содержит в себе компилятора HTML -> JSX. То есть Vuе не сможет обработать Ваши HTML шаблоны, Вы все еще можете использовать Vue с cdn или просто минифицированную версию без использования Одно-Файловых Компонентов (Single File Components), но этот путь мало отличается от варианта с jQuery. Многие приемущества Vue включая прекомпилированный HTML, области вилимости CSS, и Одно-Файловые Компоненты будут недоступны в cdn версии Vue.

Можно разгрузить сервер от множества мелких запрос, которые можно переложить на клиента: валидация форм, отрисовка страниц;

Вы не совсем правы. На фронте Вы можете производить только визуальную валидацию данных. Вы НЕдолжны полагаться на честность данных и должны всегда валидировать их на сервере.

Переход с jQuery на Vue Javascript

[Перевод] Переход с jQuery на Vue.js

Автор статьи, перевод которой мы публикуем сегодня, полагает, что в мире существует ещё много программистов, которые, когда им нужно разработать простое веб-приложение, обращаются к jQuery. Обычно это случается тогда, когда некую страницу нужно оснастить простыми интерактивными возможностями, но использование для этого какого-нибудь JavaScript-фреймворка кажется явным перебором. Ведь это — килобайты ненужного кода, шаблоны, инструменты для сборки проектов, средства для упаковки модулей… При этом подключить к странице jQuery, воспользовавшись CDN-ресурсом, проще простого.

Vue.js против jQuery: сравнение с примерами

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

Немного вступления

Что такое vue.js ? Чем он отличается от jQuery ? Я не должен дальше работать с jQuery, если познакомился с Vue? Я могу использовать его за пределами фреймворка Laravel? Если у Вас в голове возникают такие вопросы, то данная статья для Вас.

После прочтения этого материала, у Вас должно будет сложится понимание о том, что из себя представляет JS-фреймворк Vue.js и стоит ли отказываться от jQuery ради него.

Что такое jQuery?

Если Вы не знаете, что такое jQuery, хотя я очень удивлюсь этому, ведь данный инструмент существует уже более 10 лет и был задействован как в мелких проектах, так и в крупных компания, зарабатывающих миллионы ежемесячно, то попробую объяснить в двух словах:

jQuery — это шустрая, компактная и богатая библиотека JavaScript, которая отлично поддерживается большинством современных браузеров, главная цель которой, сделать написание ванильного JavaScript проще. Библиотека jQuery позволяет осуществлять манипуляции с DOM\CSS элементами, обрабатывать события, создавать анимацию и реализовывать AJAX-запросы.

Основной особенностью любви к jQuery является ее практичность и легкость в освоении. Также, для нее существует рекордное количество плагинов: слайдеры, лайтбоксы, мегаменю, галереи, вкладки и многое другое. Используя jQ Вы можете добраться до любого DOM-элемента в считанные секунды.

Мастер Йода рекомендует:  Об авторе Артём Ивашкевич

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

[Перевод] Переход с jQuery на Vue.js

Лучшие публикации за последние 24 часа

Автор статьи, перевод которой мы публикуем сегодня, полагает, что в мире существует ещё много программистов, которые, когда им нужно разработать простое веб-приложение, обращаются к jQuery. Обычно это случается тогда, когда некую страницу нужно оснастить простыми интерактивными возможностями, но использование для этого какого-нибудь JavaScript-фреймворка кажется явным перебором. Ведь это — килобайты ненужного кода, шаблоны, инструменты для сборки проектов, средства для упаковки модулей… При этом подключить к странице jQuery, воспользовавшись CDN-ресурсом, проще простого.

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

Герман Клименко освобожден от должности советника президента России 14.06.2020 в 09:22

[Перевод] Изучаем многопоточное программирование в Go по картинкам 03.06.2020 в 13:28


[Перевод] Запланированные новые возможности C# 8.0 03.06.2020 в 13:13

Как начать писать код на Lisp? 03.06.2020 в 09:33

Как построить защиту от фрода в масштабах корпорации. Лекция на YaC 2020 03.06.2020 в 09:06

[Перевод] Спросите Итана: если тёмная материя повсюду, почему мы не нашли её в Солнечной системе? 03.06.2020 в 09:00

[Перевод] В клиенте Steam устранили опасную уязвимость, которая пряталась там десять лет 03.06.2020 в 05:00

[Перевод] Пионер омоложения Обри де Грей: «У людей среднего возраста появился хороший шанс» 02.06.2020 в 22:35

Советский HI-FI и его создатели: лазерные видеодиски в СССР 02.06.2020 в 18:54

«Хорошо забытое старое»: электровелосипеды — от первых моделей к возможностям сегодняшнего дня 02.06.2020 в 16:37

Переход с jQuery на Vue Javascript

[Перевод] Переход с jQuery на Vue.js

Автор статьи, перевод которой мы публикуем сегодня, полагает, что в мире существует ещё много программистов, которые, когда им нужно разработать простое веб-приложение, обращаются к jQuery. Обычно это случается тогда, когда некую страницу нужно оснастить простыми интерактивными возможностями, но использование для этого какого-нибудь JavaScript-фреймворка кажется явным перебором. Ведь это — килобайты ненужного кода, шаблоны, инструменты для сборки проектов, средства для упаковки модулей… При этом подключить к странице jQuery, воспользовавшись CDN-ресурсом, проще простого.

Тест VueJS vs jQuery

Видео: Тест VueJS vs jQuery

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

Тест был произведен для анимаций. Результаты теста:

На самом деле, я выбрал оптимальные, на мой взгляд, параметры для тестирования, а именно взял процессороёмкий фильтр CSS + opacity. Тесты удивили меня, как начинающего изучать Vue. Приблизительно, разница в производительности почти в 3 раза (на глаз). Загрузка GPU –

Как мне кажется, я сделал максимально похожие условия для выполнения обоих скриптов, учитывая синтаксис каждого. Но, в этом мире нет ничего однозначного, поэтому, судите сами.

Как можно заметить, оба скрипта подгружают во все h1 текст ‘Transition me’, всего анимируемых элементов – 100 штук. По нажатию на кнопку ‘Нажми меня’, происходит очень простая анимация. Меняется размытие при помощи CSS фильтра и прозрачность элементов. Так как с jQuery я уже знаком давно, то скорее всего, мой код не такой уж и плохой, а также я по-моему сделал его максимально оптимизированным в плане производительности для вычислений.

New Vue.js Course Announced!

Looking to build fully-tested, production-ready Vue applications that are suitable for commercial purposes?

Join the pre-sale of our upcoming Enterprise Vue course!

Pass config with props

To make our component reusable, it would be nice to allow for custom configuration, like specifying the date format with the configuration property dateFormat . We can do this with props :

Letting jQuery handle updates

Let’s say that, rather than passing your dateFormat prop as a string, you made it a data property of your root instance i.e.:

This would mean dateFormat would be a reactive data property. You could update its value at some point in the life of your app:

Since the dateFormat prop is a dependency of the datepicker component’s mounted hook, updating it would trigger the component to re-render. This would not be cool. jQuery has already setup your datepicker on the input and is now managing it with it’s own custom classes and event listeners. An update of the component would result in the input being replaced and thus jQuery’s setup would be instantly reset.

We need to make it so that reactive data can’t trigger an update in this component.

v-once

The v-once directive is used to cache a component in the case that it has a lot of static content. This in effect makes the component opt-out from updates.

This is actually perfect to use on our plugin component, as it will effectively make Vue ignore it. This gives us some confidence that jQuery is going to have unhampered control over this element during the lifecycle of the app.


Passing data from jQuery to Vue

It’d be pretty useless to have a datepicker if we couldn’t retrieve the picked date and use it somewhere else in the app. Let’s make it so that after a value is picked it’s printed to the page.

We’ll start by giving our root instance a date property:

The datepicker widget has an onSelect callback that is called when a date is picked. We can then use our component to emit this date via a custom event:

Our root instance can listen to the custom event and receive the new date:

About Anthony Gore

I’m Anthony Gore and I’m here to teach you Vue.js! Through my books, online courses, and social media, my aim is to turn you into a Vue.js expert.

I’m a Vue Community Partner, curator of the weekly Vue.js Developers Newsletter, and the creator of Vue.js Developers.

If you enjoyed this article, show your support by buying me a coffee, and if you’d like to support me ongoingly, you can make a pledge through Patreon.

Never miss a new post!

Get our latest post in your inbox every Tuesday by subscribing to the Vue.js Developers Newsletter .

With more than 7000 subscribers, the newsletter will deepen your knowledge of Vue with weekly must-read articles.

Replacing jQuery With Vue.js: No Build Step Necessary

Smashing Newsletter

Upgrade your inbox and get our editors’ picks 2× a month — delivered right into your inbox. Earlier issues.

It’s been impossible to ignore all of the hype surrounding JavaScript frameworks lately, but they might not be the right fit for your projects. Perhaps you don’t want to set up an entire build system for some small abstractions you could feasibly do without. Perhaps moving a project over to a build system and thus, different deployment method would mean a lot of extra time and effort that you might not be able to bill to a client. Perhaps you don’t want to write all of your HTML in JavaScript. The list goes on.

What some people might not know is, you can incorporate Vue into your project the same way that you would incorporate jQuery, no build step necessary. Vue is flexible in the sense that we can use it directly in the HTML.

So, if your current page structure looks like this:

You could literally change the script tag here and still use the HTML and JS in tandem just as you did before, refactoring only a few small bits of code. You don’t have to rewrite the HTML in JavaScript, you don’t have to use webpack, and you don’t have to set up a giant system:

You can replace the tags and leave the markup as is. The best part is, you might think the code will get more complicated, but you might find in reading through this article and seeing the examples, that Vue is extremely simple, legible, and easy to maintain and adapt. In terms of size, they’re pretty comparable as well- to use them as is from a CDN, minified, Vue version 2.5.3 is 86KB. jQuery 3.2.1 is 87KB.

Let’s cover some common use cases in jQuery and how we’d switch them over to Vue, and why we’d even want to do so.

Мастер Йода рекомендует:  Решение проблем с запуском и отладкой ASP.NET 2.0 приложений на IIS

Capturing User Inputs

A really common use case for needing JavaScript on a site is capturing user input from a form, so let’s start there. We won’t actually incorporate the full form yet in the interest of simplicity and clarity, but we’ll work up to it by the end.

To capture information as a user types, here’s how we would do this in jQuery and Vue — side by side:

I use this example because it reveals a few of Vue’s strengths. Vue is reactive, which makes it particularly capable of responding to changes. You can see how, as we’re updating what we’re typing, it changes instantly- there’s no delay.

You can also see that in the jQuery version, the DOM is in control- we’re fetching things out of the DOM, listening to it, and responding to it. This ties us to the way that the DOM is currently set up, and forces us to think about how to traverse it. If the structure of the HTML elements were to change, we’d have to adapt our code to correspond to those changes.

In the Vue version, we’re storing the state- we keep track of one property we want to update and change, and track the element we want to change by a thing called a directive. This means it’s attached directly to the HTML element we need to target. The structure of the DOM can change, the HTML can move around, and none of this would impact our performance or capturing these events. In our case, we’re using that v-model attribute on the input to connect to the data we’re storing in the JavaScript.

But! This isn’t as common a use case as storing something as you hit the enter key, so let’s look at that next.

Storing User Input On A Single Event

The interesting thing about the way Vue works is that it’s decoupled from having to think about specific DOM events when storing and retrieving data. In essence, we already have an idea of what we want to capture; we’re giving it shape by picking an event with which to alter it. In contrast, jQuery is tightly coupled to what the DOM does and rests on those DOM events to build out the variables it stores, which can be placed anywhere, rather than one consistent group (in data) for retrieval. We can see this in the updated version of the last example, where the information is gathered on an enter keypress:


In this version, the jQuery is simplified somewhat because we don’t have to capture things on every keystroke, but we’re still fishing things out of the DOM and responding step by step to these changes. Our code in jQuery will always go a little something like this:

«Go get this element, see what it’s doing, hold on to these changes, do something with these changes.»

In comparison: In Vue, we’re in control of what’s changing, and the DOM responds to those changes based on our commands. We attach it directly to the thing we’d like to update. In our case, we have a small abstraction called a modifier: v-model.lazy . Vue now knows not to start storing this until after a change event occurs. Pretty neat!

Toggling Classes

The next thing we’ll cover is toggling CSS classes because, as the almighty, ever-watching Googly has informed me, it’s the most common jQuery functionality.

See the Pen Toggle Class jQuery by Sarah Drasner (@sdras) on CodePen.

See the Pen Toggle Class jQuery by Sarah Drasner (@sdras) on CodePen.

See the Pen Toggle Class Vue by Sarah Drasner (@sdras) on CodePen.

See the Pen Toggle Class Vue by Sarah Drasner (@sdras) on CodePen.

Again, what we see here is that in the jQuery version we’re storing the state in the DOM. The element has the class, and jQuery makes a decision based on the presence of the class, which it checks by pinging the DOM. In the Vue version, we store a condition, and we style it according to that state. We’re not asking the DOM for this information, we hold it ourselves.

We store active in the data, the button switches the condition, and .red is altered based on that condition. Even the states for accessibility, aria-pressed , are stated much quicker, as we don’t have to set anything in the script in Vue, we’re able to switch between states directly inline in the template based on the state of ‘ active .’

You’ll also note in the last few examples, you might have thought it would be a lot more code to start working with Vue.js than jQuery, but they’re actually pretty comparable.

Hiding And Showing

Another common jQuery use case is hiding and showing something. jQuery has always done a really good job of making this task really simple, so let’s take a look at what it looks like side to side with Vue.

See the Pen jQuery show hide by Sarah Drasner (@sdras) on CodePen.

See the Pen jQuery show hide by Sarah Drasner (@sdras) on CodePen.

See the Pen Vue show hide by Sarah Drasner (@sdras) on CodePen.

See the Pen Vue show hide by Sarah Drasner (@sdras) on CodePen.

Both jQuery and Vue do a nice job of keeping this task simple, but there are a couple of reasons that I really working with Vue for something like a toggle. Vue has a tool called Vue devtools. This is not unlike the Chrome devtools, but when we use it, we get some special information about what’s going on with Vue.

In both the jQuery and Vue version, we can see that the element hides and appears. But what if something were to go wrong? What if something about our code wasn’t working the way we expected? In order to start debugging with jQuery, we’d probably add in some console.log s or set some breakpoints to try to track down where things were erroring.

Now, there ain’t nothin’ wrong with console.log s, but with the aid of the Vue devtools, we can actually get a hands-on Vue (couldn’t resist) of what Vue thinks is happening. In this gif below, you can see as we toggle the button, the Vue devtools updates the state of true/false accordingly. If the DOM was ever not to be working the way we expected, we could see the data in Vue in real time. This makes it much so much easier to debug; it’s actually quite wonderful.

The other thing I like about this is that the v-if is easy to extend to other conditions. I can decide to use a thing called v-show instead of v-if if the thing I’m toggling will show and hide frequently: v-if will completely unmount the element, while v-show will merely toggle the visibility of it. This distinction is really important because it is much more performant to toggle the visibility in a style rather than completely unmounting/mounting the DOM node. I can show or hide something based on a lot of conditions, or even the presence of user input or other conditions as well. This is usually where jQuery can get a bit messy, pinging the DOM in multiple locations and coordinating them. Below is an example of coordinating showing something based on the presence of user input:

In this example, you can see the value of having Vue hold the state- we’re reacting to the changes very naturally and with less code altogether. Once you get used to the style, it’s faster to understand because you don’t have to trace the logic line by line. A lot of people call this difference “imperative vs. declarative.”

Submitting A Form

The canonical use case for jQuery has historically been submitting a form with an AJAX call, so we should take a look at that as well. Vue actually does not have a built-in thing like AJAX; it’s typical in Vue application to use something like Axios (a JavaScript library for making HTTP requests) to help with this task.

This example is a little more complicated than the rest. We’re going to do a few things here:

  1. The button will appear grey before we start typing in our form, then it will receive an “active” class and turn blue;
  2. When we submit the form, we’ll keep the page from loading;
  3. When the form is submitted, we’ll show the response data on the page.
Мастер Йода рекомендует:  Сортировка пузырьком

In here, we’ll see lines 2-10 deal with the handling of the button class, similarly to how we did this before. We pass in a parameter called event to the form, and then say event.preventDefault() to keep from reloading the page. Then we collect all of the form data from the form inputs, process the form, and then put the response into the .done() call from the AJAX request.

See the Pen Vue form submission by Sarah Drasner (@sdras) on CodePen.

See the Pen Vue form submission by Sarah Drasner (@sdras) on CodePen.


In the Vue version, we decide what fields we need to populate in the form, and then attach them with that v-model we used earlier. We check for the presence of name in order to toggle the class. Instead of passing in event and writing event.preventDefault() , all we have to do is write @submit.prevent on our form element, and that’s taken care of for us. To submit the post itself, we use Axios, and we’ll store the response in the Vue instance in response.

There are still many things we’d want to do to have a production-ready form, including validation, error handling, and writing tests, but in this small example, you can see how clean and legible Vue can be while handling a lot of things updating and changing, including user input.

Conclusion

It is definitely ok to use jQuery if it suits you! This article serves to show that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Vue is comparable in size, easy to reason about, and it’s fairly trivial to switch small pieces of functionality to Vue without rewriting your HTML in JavaScript and adopting a build system if you don’t have the bandwidth. This all makes it pretty compelling to consider.

Due to Vue’s flexibility, it’s also easy to transition this code to a build step and component structures if you’d like to adopt a more complex structure over time. It’s actually pretty fun to try it out, so when you’re ready to do so, check out the vue-cli. What this tool does is give you the ability to scaffold an entire production-level Vue and webpack build with just a couple of terminal commands. This allows you to work with single-file components, where you can use HTML, CSS, and Script in tandem in one file that makes up single, reusable components. You don’t have to configure the webpack build unless you’d like to do something special, so you save a lot of time setting things up. They even have a built-in command to get everything ready for production deployment.

The nice thing about the flexibility to choose either way of incorporating Vue into your project means that you’re not pressed to change your style of working all at once, and you can even make changes slowly over time. This is why people call Vue the progressive framework.

Переход с jQuery™ на Vue.js

Автор статьи™, перевод которой мы публикуем сегодня, полагает, что в мире существует ещё много программистов, которые, когда им нужно разработать простое веб-приложение, обращаются к jQuery™. Обычно™ это случается тогда, когда некую страницу нужно оснастить простыми интерактивными возможностями, но использование для этого какого™-нибудь™ JavaScript-фреймворка кажется явным перебором. Ведь это — килобайты ненужного кода, шаблоны, инструменты для сборки™ проектов, средства для упаковки модулей… При этом подключить к странице jQuery™, воспользовавшись CDN-ресурсом, проще простого.

В этом материале речь пойдёт™ о том, как перевести проект™, созданный с использованием jQuery™, на Vue.js. Этот проект™ будет создан™ на jQuery™, а потом переработан с применением Vue. Автор материала хочет продемонстрировать всем желающим то, что использование Vue, даже в сравнительно небольших проектах, не обязательно означает чрезмерное увеличение размера кода таких проектов и большую дополнительную нагрузку на программиста. Это, наоборот, при практически тех же размерах вспомогательного кода, что и при использовании jQuery™, позволяет повысить производительность труда и улучшить качество приложений.

Обзор проекта

Мы собираемся разработать простой электронный счёт, основанный на этом опенсорсном шаблоне от Sparksuite.

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

Вот шаблон™ счёта, с которым мы хотим поработать.

Мы собираемся добавить ему интерактивных возможностей, сделав™ так, чтобы в нём можно было бы выбирать товар, его количество и цену за единицу. При изменении значений будет пересчитываться итоговая стоимость товара™ и общая сумма по документу. Кроме того, мы добавим сюда кнопку™, которая позволит вставлять в счёт новые пустые™ строки™.

Я модифицировал шаблон™, приведя HTML-код пустой™ строки™ к следующему виду:

Разработка проекта на jQuery™

Для начала™ посмотрим на то, как решить™ нашу задачу™ с использованием jQuery™.

Мы подключаем прослушиватель событий к таблице. Этот прослушиватель вызовет функцию calculateTotals при изменении значений, соответствующих стоимости единицы товара™ или его количеству:

Функция берёт строки™ таблицы и проходится по ним, передавая каждую™ из строк функции calculateSubtotal и суммируя результаты. Результат вычислений попадает в константу total . В итоге общая сумма по документу подставляется в соответствующее поле счёта.

В этом коде мы берём ссылки™ на все поля , присутствующие в строке™, затем умножаем значения, хранящиеся во втором™ и третьем полях для получения значения subtotal . Потом это значение вставляется в последнюю ячейку™ строки™. Мы форматируем это значение с помощью функции formatAsCurrency . Вот её код:

Кроме того, у нас имеется небольшая вспомогательная функция, которую мы используем для того, чтобы обеспечить одинаковый внешний вид полей с суммами по товарам и по документу в целом. А именно™, нам надо, чтобы перед числами, находящимися в этих полях, стоял знак $, и чтобы они представляли собой десятичные числа с двумя знаками после запятой.

И, наконец, у нас имеется обработчик события нажатия на кнопку™ Add row , которая служит™ для добавления в документ новой строки™. Здесь мы берём последнюю строку™ в таблице, содержащую данные™ о товаре™, и делаем™ её копию. При этом в поля этой новой строки™ мы вставляем стандартные данные™. Кроме того, мы можем тут позаботиться об удобстве работы™ пользователя и установить фокус на первое™ поле новой строки™, что позволит пользователю, сразу же после добавления новой строки™, приступить к вводу данных™ в её первое™ поле.

Вот рабочий пример™ счёта, интерактивные возможности которого реализованы средствами jQuery™.

Недостатки решения, основанного на jQuery™

Зададимся вопросом о том, каковы™ недостатки вышеописанного подхода, или, скорее™, вопросом о том, как улучшить наш проект™.

Возможно, вы слышали о новых библиотеках, вроде Vue и React, о которых говорят, что они позволяют работать в декларативном, а не в императивном стиле. Если посмотреть на вышеприведённый jQuery™-код, ясно, что он, в основном, читается как набор инструкций, описывающих манипуляции с DOM. Цель каждого раздела этого кода, то есть, ответ на вопрос™ о том, что он делает™, часто довольно сложно™ выяснить, глядя на то, как он это делает™. Конечно, можно сделать намерения используемых фрагментов кода яснее, разбив™ его на функции с вдумчиво подобранными именами. Однако™ если оставить этот код на какое-то время, а потом опять к нему вернуться, окажется, что для того, чтобы его понять™, всё равно придётся приложить некоторые усилия™.

Ещё одна проблема подобного кода заключается в том, что состояние приложения хранится в DOM. Информация о товарах, которые хочет заказать пользователь, существует лишь как часть HTML-разметки в пользовательском интерфейсе. Если всё, что нам надо — это выводить данные™ в одном месте, то эта проблема не кажется такой уж серьёзной. Однако™, как только™ появляется необходимость выводить эти данные™ в нескольких местах™ приложения, перед нами возникает задача™ синхронизации данных™. Не имея, как в нашем случае™, единого источника достоверных данных™, очень сложно™ поддерживать их в актуальном состоянии во всём приложении.

Хотя при использовании jQuery™ ничто не мешает™ нам хранить состояние приложения за пределами DOM и избежать вышеописанной проблемы, библиотеки, такие как Vue, предоставляют возможности, которые способствуют созданию приложений, обладающих хорошей архитектурой. Эти библиотеки помогают программисту писать™ более чистый™ и лучше структурированный код.

Перевод проекта на Vue

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

Начнём™ перевод проекта на Vue с замены™ содержимого тега

Добавить комментарий