Переход с Vanilla JS на Vex

Переход с Vanilla JS на Vex

Vex — это современная JavaScript-библиотека для создания всплывающих окон, уведомлений и диалогов. Библиотека предназначена для упрощения работы с модальными окнами и улучшения пользовательского интерфейса, сохраняя при этом гибкость и простоту. Для разработчиков, привыкших работать с Vanilla JS (чистым JavaScript), переход на Vex может значительно ускорить процесс разработки, улучшить читаемость кода и добавить новые возможности.

Vex работает как простой инструмент для отображения модальных окон с минимальной настройкой и удобным API. Она позволяет создавать различные типы окон: подтверждения, информационные, с полями ввода, а также с возможностью кастомизации внешнего вида.

Для того чтобы начать использовать Vex, необходимо подключить саму библиотеку. Это можно сделать через CDN или скачав архив с официального сайта. В случае использования CDN, подключение будет выглядеть так:

<link href="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/css/vex.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/css/vex-theme-flat-attack.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vex-js@latest/dist/js/vex.combined.min.js"></script>

После этого библиотека готова к использованию. На этом этапе разработчик может начать создавать модальные окна, но для перехода с Vanilla JS потребуется понять, как Vex решает задачи, которые в чистом JavaScript могут потребовать гораздо больше кода.

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

В Vanilla JS создание модального окна обычно связано с манипуляциями с DOM-элементами: создание контейнера, стилизация, добавление кнопок и обработчиков событий. В Vex создание модальных окон сводится к вызову одной функции с набором опций:

vex.open({
  message: 'Простое модальное окно',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'ОК',
      click: function () {
        vex.close();
      }
    })
  ]
});

В приведённом примере модальное окно содержит сообщение и кнопку с текстом «ОК». Событие нажатия кнопки связано с закрытием окна. Благодаря встроенным методам, таким как vex.open() и vex.close(), весь процесс управления модальными окнами становится гораздо проще и требует меньше кода, чем в Vanilla JS.

Обработка пользовательского ввода

Для реализации окон с полями ввода и формы в Vanilla JS необходимо создать HTML-форму, обработать её отправку через события, а также выполнить дополнительные манипуляции с данными. Vex позволяет это сделать в несколько строк:

vex.dialog.open({
  message: 'Введите ваше имя',
  input: '<input name="name" type="text" />',
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Отправить',
      click: function () {
        var name = $('input[name="name"]').val();
        alert('Привет, ' + name + '!');
        vex.close();
      }
    }),
    $.extend({}, vex.dialog.buttons.NO, {
      text: 'Отмена'
    })
  ]
});

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

Управление стилями

При использовании Vanilla JS для стилизации модальных окон и управления их внешним видом необходимо работать с CSS, а также часто добавлять кастомные стили в код. Vex имеет встроенную поддержку темы, которая значительно упрощает задачу стилизации. По умолчанию библиотека включает несколько предустановленных тем, таких как vex-theme-flat-attack, vex-theme-default, vex-theme-os, что позволяет быстро настроить внешний вид без лишнего кода.

Однако при необходимости можно легко добавить свою кастомную тему. Для этого достаточно указать путь к собственному CSS-файлу в параметрах темы:

<link href="path/to/custom-theme.css" rel="stylesheet">

Для более тонкой настройки стилей Vex предоставляет возможность применить собственные классы CSS к каждому модальному окну, кнопке или любому другому элементу окна.

Удобство интеграции

Переключение с Vanilla JS на Vex также упрощает интеграцию с другими библиотеками и фреймворками. Так как Vex основан на jQuery, его можно легко использовать в проектах, где уже применяется jQuery, и адаптировать для использования в современных фронтенд-фреймворках, таких как React или Vue. В этих случаях Vex можно интегрировать как отдельный компонент с возможностью динамически изменять контент и управлять состоянием модальных окон.

В частности, при использовании в React можно создать обёртку для модальных окон Vex, которая будет принимать пропсы и обеспечивать необходимую функциональность для отображения модальных окон в зависимости от состояния компонента:

import React from 'react';
import vex from 'vex-js';

class ModalComponent extends React.Component {
  openModal() {
    vex.dialog.open({
      message: this.props.message,
      buttons: [
        $.extend({}, vex.dialog.buttons.YES, {
          text: 'Закрыть',
          click: function () {
            vex.close();
          }
        })
      ]
    });
  }

  render() {
    return (
      <button onCl ick={this.openModal.bind(this)}>Открыть окно</button>
    );
  }
}

export default ModalComponent;

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

Обработка нескольких окон

В случае, если в Vanilla JS нужно самостоятельно управлять несколькими окнами, синхронизировать их открытие и закрытие, то с Vex задача значительно упрощается благодаря встроенному механизму работы с окнами. Каждый вызов vex.open() автоматически управляет состоянием текущих окон, и при необходимости можно модифицировать поведение каждого окна.

Для закрытия всех окон можно использовать метод vex.closeAll(), который закрывает все открытые модальные окна. Это полезно, если необходимо, например, закрыть все окна при выполнении какого-то действия в приложении:

vex.closeAll();

Заключение

Переход с Vanilla JS на Vex даёт значительное упрощение работы с модальными окнами и уведомлениями, делая код чище и более удобным для сопровождения. Возможности кастомизации, поддержка различных тем и упрощённая работа с пользовательским вводом позволяют быстро и эффективно создавать сложные интерфейсы. В то же время интеграция Vex с другими фреймворками и библиотеками открывает дополнительные возможности для использования её в масштабных приложениях.

Оглавление