Прежде чем вы продолжите, это мини-серия, в которой мы начинаем с нулевой точкик отправляемая библиотека дат Javascript📅

Смотрите предыдущую статью, чтобы быть на трассе! 😄

Пойдем! 🚀

Ранее -

Мы построили наш рабочий процесс, чтобы начать работу над нашим проектом на нашей локальной рабочей станции!

Затем мы научимся использовать современные методы модульнойнашей текущей настройки с помощью модуля ES.

Содержание

  1. Понимание импорта/экспорта из модуля ES.
  2. Экспорт
  3. Импорт
  4. Пакет.json

Понимание импорта/экспорта из модуля ES.

Что такое модули ES?

Начиная с ES6 (ES2015), JavaScript поддерживает собственный формат модулей, называемый модулями ES или модулями ECMAScript. Это современный способ делать модули в JavaScript.

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

Есть еще один термин, тесно связанный с вышеприведенным описанием, — Tree Shake.

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

У нас может быть 100 методов в нашей библиотеке, но нашим конечным пользователям требуются только определенные методы для своих проектов, выбранные из нашей библиотеки. Так давайте дадим им это 🎉.

Экспорт

В предыдущей статье мы создали time.js,, который выглядел примерно так.

function getDay (date) {
 let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',       'Friday', 'Saturday'];
 
 return days[date.getDay()]
}

Добавим еще два метода

  • Во-первых, getMonth(date) , который принимает объект даты Javascript в качестве параметра и возвращает соответствующий month.
  • Во-вторых, addDays(date, n), который принимает объект даты Javascript в качестве первого параметра и целое число n, которое добавляет количество дней nк существующему объекту даты.
function getDay (date) {
 let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday',       'Friday', 'Saturday'];
 
 return days[date.getDay()]
}
function getMonth (date) {
  let months = ['January', 'February', 'March', 'April', 'May',    'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return months[date.getMonth()]
}
function addDays(date, n) {
  date.setDate(date.getDate() + n) //setDate is a inbuilt prototype function of JS Date.
}
export {
  getDay,
  getMonth,
  addDays,
}

В конце концов, мы использовали что-то под названием export —
1. Это позволяет нам экспортировать только те методы, которые необходимы для общедоступного.
 2. Это позволяет нам контролировать методы, которые мы хотим сохранить частными или нет.

Импорт

Теперь, когда мы открыли или exported вспомогательные функции. Давайте импортируем методы в наш файл index.js.

/*index.js*/
import {
 getDay,
 getMonth,
} from "./time.js"
let christmas = new Date('December 25, 2022')
let day = getDay(christmas)
let month = getMonth(christmas)
console.log(day, month)

Как видите, у нас есть imported getDay и getMonth из time.js, но не addDays, поэтому нам не нужно импортировать все, а только необходимые методы для конкретного файла.

Упс, мы попали в ловушку!

Если вы сейчас обновите браузер, вы можете не увидеть вывод console.log(day, month.

Но увидеть бы что-то подобное —

Это потому, что import и export НЕ работают прямо из коробки.
Как вы помните, мы запускаем HTTP-сервер с использованием node-static,, который по сути представляет собой среду выполнения node js. Но нам нужно сообщить нашей среде выполнения node js, чтобы идентифицировать использование операторов импорта/экспорта. Как мы это делаем?

Представляем package.json

Что такое package.json?

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

Объяснение всего package.json выходит за рамки нашей мини-серии, но единственный ключ, который вам нужно понять, — это ключ type в package.json.

Чтобы создать package.json —

npm init -y

Просто создает пустой проект npm без интерактивного процесса.

Ваша папка будет выглядеть так

. └── <your-folder-name>/
    ├── index.html
    ├── index.js
    └── time.js
    └── package.json

При просмотре добавлю следующее —

{
 "type": "module",
 //...rest of the package.json
}

Это даст указание нашему приложению node js обращаться к файлам Javascript в методе модуля, позволяя использовать синтаксис import и export.

Кроме того, index.html, где у нас есть теги сценария, нам нужно добавить атрибут type="module" к нашим тегам сценария.

<script type="module" src="time.js"></script>
<script type="module" src="index.js"></script>

Теперь проверьте свой браузер, все должно работать нормально! 🌟

В Часть 3 мы рассмотрим более сложные темы по созданию надежной и чистой библиотеки дат Javascript 📅 с использованием ООП и таких концепций, как неизменность и цепочка ⛓.

P.S. Часть 3 будет опубликована 3 августа 2022 года!

****************************************************************

Этот пост был вдохновлен — https://gomakethings.com/, пожалуйста, загляните в этот замечательный блог, основанный на чистом Javascript.

Я Саурав Тиру, фронтенд-инженер по созданию пользовательского интерфейса в компании Радиус.

Каждую неделю я буду публиковать статьи, связанные с проектированием переднего плана, фотографией и редактированием видео!