Vanilla JS

Vanilla JS — это термин, который используется для обозначения «чистого» JavaScript без использования дополнительных библиотек или фреймворков, таких как jQuery, React, Angular или Vue.js. Это нативный JavaScript, который работает непосредственно в браузере.

Основные особенности Vanilla JS:

1. Нативный JavaScript:

• Vanilla JS — это стандартный JavaScript, который поддерживается всеми современными браузерами.
• Не требует установки дополнительных библиотек или инструментов.

1. Производительность:

• Поскольку Vanilla JS не использует сторонние библиотеки, он обычно работает быстрее, чем код, обернутый в библиотеки или фреймворки.
• Меньше накладных расходов на загрузку и выполнение.

1. Универсальность:

• Подходит для любых проектов, от простых скриптов до сложных веб-приложений.
• Может использоваться как на стороне клиента (в браузере), так и на стороне сервера (с Node.js).

1. Современные возможности:

• Поддерживает все современные стандарты ECMAScript (ES6, ES7, ES8 и выше), такие как:
  • Стрелочные функции (=>).
  • Классы (class).
  • Модули (import/export).
  • Промисы (Promise) и асинхронные функции (async/await).
  • Деструктуризация, шаблонные строки, операторы let и const.

1. Работа с DOM:

• Vanilla JS предоставляет мощные API для работы с Document Object Model (DOM):
  • Выбор элементов: document.querySelector, document.querySelectorAll.
  • Изменение содержимого: innerHTML, textContent.
  • Управление классами: classList.add, classList.remove, classList.toggle.
  • Обработка событий: addEventListener, removeEventListener.
  • Создание и удаление элементов: createElement, appendChild, removeChild.

1. Асинхронные запросы:

• Возможность выполнять HTTP-запросы с помощью XMLHttpRequest или современного fetch API.

1. Хранение данных:

• Работа с локальным хранилищем (localStorage, sessionStorage).
• Использование IndexedDB для более сложных операций с данными.

1. Анимации:

• Создание анимаций с помощью requestAnimationFrame.
• Использование CSS-анимаций через JavaScript.

1. Совместимость:

• Vanilla JS работает во всех современных браузерах.
• Для поддержки старых браузеров может потребоваться использование полифиллов (например, Babel для транспиляции ES6+ в ES5).

Примеры использования Vanilla JS:

1. Работа с DOM:

// Выбор элемента
const button = document.querySelector('#myButton');

// Добавление обработчика события
button.addEventListener('click', () => {
  alert('Кнопка нажата!');
});

2. Асинхронный запрос:

// Использование fetch для получения данных
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка:', error));

3. Работа с localStorage:

// Сохранение данных
localStorage.setItem('username', 'JohnDoe');

// Получение данных
const username = localStorage.getItem('username');
console.log(username); // JohnDoe

4. Создание анимации:

const element = document.querySelector('.box');
let position = 0;

function animate() {
  position += 1;
  element.style.transform = `translateX(${position}px)`;

  if (position < 100) {
    requestAnimationFrame(animate);
  }
}

animate();

Преимущества Vanilla JS:

• Минимализм: Не требует дополнительных зависимостей.
• Производительность: Быстрее, чем решения с библиотеками.
• Гибкость: Полный контроль над кодом.
• Изучение основ: Помогает лучше понять, как работает JavaScript.

Недостатки Vanilla JS:

• Больше кода: Для сложных задач может потребоваться больше кода по сравнению с использованием фреймворков.
• Ручная работа: Нужно самостоятельно решать задачи, которые в фреймворках уже встроены (например, управление состоянием, маршрутизация).

Когда использовать Vanilla JS?

• Для небольших проектов или простых задач.
• Когда важна производительность и минимализм.
• Для изучения основ JavaScript.
• Когда не хочется добавлять зависимости в проект.

Когда использовать фреймворки?

• Для сложных приложений с большим количеством компонентов.
• Когда нужны встроенные решения для маршрутизации, управления состоянием и т.д.
• Для ускорения разработки.

Vanilla JS — это мощный инструмент, который позволяет создавать современные веб-приложения, оставаясь близко к основам языка.