Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Применение системы модулей на практике

⇐ ПредыдущаяСтр 5 из 5

Напишем часть нашего приложения с применением системы модулей ECMAScript на практике. Начнём с калькулятора дат. Она будет предельно простая, чтобы сосредоточиться на особенностях работы с модулями.

Итак, у нас два поля для ввода даты (input type="date") и кнопка «рассчитать промежуток». Если пользователь не заполнит одно или оба поля, покажем ошибку. Для расчёта дат воспользуемся сторонней библиотекой работы с датой Luxon.

Начнём с вёрстки, файл index.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=" initial-scale=1.0"> <title>Datetime superapp</title> <script src="./src/main.js" type="module"></script> </head> <body> <form id="datecalc"> <h3>Калькулятор дат</h3> <label> <strong>Первая дата:</strong> <input type="date" name="firstDate" /> </label> <label> <strong>Вторая дата:</strong> <input type="date" name="secondDate" /> </label> <button type="submit">Расчитать промежуток</button> <p id="datecalc__result"></p> </form> </body> </html>

Здесь всё просто и без сюрпризов. На внешний вид вёрстки не отвлекаемся.

Теперь напишем основную логику файла src/main.js с выводом данных из формы в консоль.

Файл src/main.js:

const dateCalcForm = document.getElementById("datecalc"); const dateCalcResult = document.getElementById("datecalc__result"); dateCalcForm.addEventListener("submit", handleCalcDates); function handleCalcDates(event) { dateCalcResult.innerHTML = ""; event.preventDefault(); let { firstDate, secondDate } = event.target.elements; firstDate = firstDate.value, secondDate = secondDate.value; if (firstDate && secondDate) console.log(firstDate, secondDate); else console.log("Для расчета промежутка необходимо заполнить оба поля"); }

Важно! По умолчанию модули всегда выполняются только после полной загрузки DOM-дерева, соответственно не блокируют отрисовку вёрстки и позволяют обращаться к DOM-элементам без обработки события DOMContentLoaded.

Для начала получаем нужные нам DOM-элементы, устанавливаем обработчик формы и пишем основную логику валидации поля.

Теперь заведём функцию, которая отформатирует вывод как ошибку. Её мы поместим в файл src/utils.js. В этом сейчас нет большого смысла, мы делаем это для практики.

Файл src/utils.js:

export const formatError = text => ` <span style="color: red;"> ${text} </span> `;

Далее напишем функцию расчёта промежутка между датами. Для этого воспользуемся инструментарием luxon. Так как функция diff возвращает объект, нам также понадобится функция, превращающая его в html.

Файл src/datecalc.js:

import { DateTime } from "./luxon.js"; // 1 export function diffDates(firstDate, secondDate) { firstDate = DateTime.fromISO(firstDate); secondDate = DateTime.fromISO(secondDate); if (firstDate > secondDate) secondDate = [firstDate, firstDate = secondDate][0]; // 2 return secondDate.diff(firstDate, ['years', 'months', 'days']).toObject(); } // 3 export const diffToHtml = diff => ` <span> ${diff.years? 'Лет: ' + diff.years: ''} ${diff.months? 'Месяцев: ' + diff.months: ''} ${diff.days? 'Дней: ' + diff.days: ''} </span> `;

Разберём помеченные цифрами строчки кода в этом листинге:

1. Загружаем локально сохранённый исходный код luxon. Он находится здесь.

2. Меняем даты, если первая дата больше второй. Это нужно, чтобы не появились цифры с минусами.

3. Функция diffToHtml форматирует объект как html. Она имеет вид стрелочки, чтобы показать разные варианты экспорта. Придерживаемся одинакового синтаксиса объявления функций в проекте.

Теперь объединим всё в файле src/main.js:

import { diffDates, diffToHtml } from "./datecalc.js"; // 1 import { formatError } from "./utils.js"; // 2 const dateCalcForm = document.getElementById("datecalc"); const dateCalcResult = document.getElementById("datecalc__result"); dateCalcForm.addEventListener("submit", handleCalcDates); function handleCalcDates(event) { dateCalcResult.innerHTML = ""; event.preventDefault(); let { firstDate, secondDate } = event.target.elements; firstDate = firstDate.value, secondDate = secondDate.value; if (firstDate && secondDate) { const diff = diffDates(firstDate, secondDate); // 3 dateCalcResult.innerHTML = diffToHtml(diff); // 4 } else dateCalcResult.innerHTML = formatError("Для расчета промежутка необходимо заполнить оба поля"); // 5 }

Разберём помеченные цифрами строчки кода:

1. Импортируем 2 функции из файла src/datecalc.js.

2. Импортируем функцию из файла src/utils.js.

3. Вычитаем промежуток между датами.

4. Форматируем промежуток, как html и вставляем в DOM.

5. Если одно из полей не заполнено (или оба), выводим ошибку.

Каждый из файлов исходного кода загружается отдельно:

Приложение считает промежуток:

И выводит ошибку, если одно из полей пустое:

Вот так легко мы воспользовались системой модулей. Однако работает это только в современных браузерах. На следующем уроке мы узнаем, как усовершенствовать этот проект с использованием инструментов сборки кода.

Используемые источники

1. Статья «MDN: script defer.»

2. Статья «MDN: Модули JavaScript.»

3. Статья «CommonJS Modules.»

4. Статья «Requirejs documentation.»

5. Статья «UMD (Universal Module Definition).»

6. Статья «Википедия: Асинхронное определение модуля.»

Дополнительные материалы

1. Статья «Learn JavaScript, Модули.»

2. Статья «Habr: Эволюция модульного JavaScript.»

3. Статья «Habr: Путь JavaScript модуля.»

4. Статья «Habr: Тонкости модульной системы ECMAScript 2015 (ES6).»

5. Перевод книги Эдди Османи «Паттерны для масштабируемых JavaScript-приложений».

⇐ Предыдущая 1 2 3 45

Читайте также:

Техника прыжка в длину с разбега

Организация работы процедурного кабинета

Области применения синхронных машин

Оптимизация по Винеру и Калману

Последнее изменение этой страницы: 2022-01-22; просмотров: 40; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.133.111.85 (0.007 с.)