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

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

Пойдем! 🚀

Ранее -

Мы использовали модули ESи использовали синтаксис import и export для применения методов древовидной структуры для передачи функций, а также использовали package.json, чтобы наше приложение узла понимало все описанные выше процессы!

Затем мы научимся использовать прототипное наследование и использовать такие методы, как цепочка и неизменяемостьчтобы сделать нашу библиотеку более надежной! 🚀

Содержание

  1. Конструктор + прототипное наследование
  2. Цепочка
  3. неизменность

Конструктор + прототипное наследование

Если кто-то исходит из концепции ООП (объектно-ориентированного программирования), он должен понимать, как работают классы. Вы создаете экземпляр класса и используете внутренние методы.

Ключевое слово «класс» было добавлено в JavaScript начиная с ES6 (ECMAScript 2015).

JavaScript не является объектно-ориентированным языком, он не был таковым. Вместо этого ключевое словоclassявляется синтаксическим сахаром ивнутреннеиспользует прототипное наследование

Наследование прототипов — это функция JavaScript, используемая для добавления методов и свойств в объекты.

Итак, давайте преобразуем нашу существующую структуру import & export в прототипный подход!

В нашем time.js мы введем функцию-конструктор с именем Time

/*time.js*/
function Time(date) {
  this.date = new Date(date)
}
...rest of the code...

Как видите, это функция constructor, которая принимает любой параметр date, который позже использует this, ссылающийся на текущий экземпляр.

Что происходит выше? -

  • Мы создаем функцию constructor.
  • Он принимает параметр с именем date.
  • Дата передается для создания нового объекта JS Date.
  • который хранится в this.date , где this относится к текущему экземпляру.

Уф, много изменений, или нет? 😅 Далее! Нам нужно использовать прототипное наследование и изменить наши существующие методы, чтобы наш конструктор Time имел эти методы прикрепленными.

/* time.js */
...rest of the code...
Time.prototype.getDay = function () {
  let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  return days[this.date.getDay()];
}
Time.prototype.getMonth = function() {
  let months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  return months[this.date.getMonth()];
}
Time.prototype.addDays = function (n) {
 this.date.setDate(this.date.getDate() + n);
}
export default Time

Что происходит выше? -

  • Такие методы, как getDay(), getMonth() и addDays(), добавляются в цепочку прототипов конструктора Time.
  • Наконец, мы экспортируем это в конец файла, используя export.
  • По умолчанию используется для экспорта только одного значения из файла, который может быть классом, функцией или объектом,в нашем случае это Time..
  • Я бы написал подробную статью о прототипном наследовании.
  • Это очень важная тема JS, поскольку JS, который мы знаем сегодня, полностью построен на этом. 🚨

Наконец, нам нужно изменить наш index.js, чтобы он соответствовал новым прототипным изменениям.

/*index.js*/
import Time from "./time.js"
let Christmas = new Time('December 25, 2021');
let day = Christmas.getDay(Christmas);
let month = Christmas.getMonth(Christmas);
console.log(day, month);
Christmas.addDays(7);
console.log(Christmas);

Что происходит выше? -

  • Мы используем import и импортируем конструктор Time в наш файл.
  • Мы используем конструктор Time для создания нового экземпляра Time. 🚧
  • Мы ссылаемся на прототипы, используя синтаксис instance.prototype.

Если все сделано правильно, при обновлении браузера вы должны увидеть это!

Цепочка ⛓

Похлопайте себя по спине! Вы только что создали очень гладкий, еще не готовый, но работающий прототип (не каламбур) 😅. Добавим ему вкуса!

Что подразумевается под связыванием в цепочку?

Связывание методов – это стратегия программирования, которая упрощает и украшает ваш код. Это механизм вызова метода другого метода того же объекта.

Наша библиотека не поддерживает это на данный момент, но как это работает?

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

Так что это работает только в существующих методах, которые уже НЕничего не возвращают.

Итак, давайте добавим 2 новых метода с именами addMonths и addYears to our time.js file.

/*time.js*/
...rest of the code...
Time.prototype.addMonths = function(n) {
 this.date.setMonth(this.date.getMonth() + n);
 return this
}
Time.prototype.addYears = function(n) {
 this.date.setFullYear(this.date.getFullYear() + n);
 return this
}
...rest of the code...

Что происходит выше? -

  • Эти методы изменяют нашу существующую переменную this.date.
  • Но мы также возвращаем this , это ключевое слово содержит весь контекст экземпляра (переменная, прототипы)

Приступаем к делу 🚀, модифицируем наш index.js

/*index.js*/
...rest of the code....
Christmas.addDays(1).addMonths(1).addYears(1)
console.log(Christmas)
...rest of the code...

Что происходит выше? -

  • Мы объединяем три метода addDays() , addMonths() и addYears()
  • Предположим, что текущий объект даты создается с помощью December 25, 2021 .
  • Мы добавляем к нему 1 день, 1 месяц и 1 год.
  • Что будет на выходе? Давайте проверим это ниже 🔍.

Как вы видете -

  • 1 день — 26 декабря 2021 года.
  • 1 месяц составляет 26 января 2022 года.
  • 1 год — 26 января 2023 года. ⏲

Создать цепочку очень просто, серьезно!

неизменность

Хорошо, вздохните, солдат, вы прошли через поля сражений Javascript! Наконец, давайте разберемся с темой неизменяемости.

Давайте поймем это через эту аналогию-

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

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

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

Давайте начнем!

Давайте изменим наш time.js и изменим наши связанные методы -

/*time.js*/
...rest of the code...
Time.prototype.addDays = function (n) {
 let newDate = new Date(this.date)
 newDate.setDate(this.date.getDate() + n);
 return new Time(newDate)
}
Time.prototype.addMonths = function(n) {
 let newDate = new Date(this.date)
 newDate.setMonth(newDate.getMonth() + n);
 return new Time(newDate)
}
Time.prototype.addYears = function(n) {
 let newDate = new Date(this.date)
 newDate.setFullYear(newDate.getFullYear() + n);
 return new Time(newDate)
}
...rest of the code...

Что происходит выше? -

  • Мы создаем новый объект даты JS каждый раз, когда вызывается один из связанных методов.
  • Затем объект newDate используется для выполнения основного действия, которое должен выполнять метод (addDay, addMonth… и т. д.).
  • вернуть недавно измененный объект newDate Date.
/*index.js*/
...rest of the code...
console.log("before", Christmas)
let modified = Christmas.addDays(1).addMonths(1);
console.log("after", modified, Christmas)
...rest of the code....

Что происходит выше? -

  • Мы сохраняем измененный экземпляр Christmas в переменной с именем modified.
  • Чтобы подтвердить, мы регистрируемся дважды, один раз с до и еще один сравнивая пост-модификацию.

Без Immutability это выглядело бы примерно так…..

На этом часть 3 завершается, если у вас есть какие-либо сомнения или улучшения для этой статьи, пожалуйста, оставьте комментарий, и если вам понравилось, поделитесь несколькими аплодисментами 😄.

В Часть 4 мы рассмотрим добавление хуков! Привет 🚢и изучите более сложные темы, которые приблизят нас к конечной цели создания Доставляемой библиотеки дат Javascript!

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

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

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

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