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

Но сегодня я не буду говорить обо всем, что касается этого модульного паттерна. Сегодня я покажу вам, как создавать приватные функции и общедоступные методы.

Частная функция

Частные функции являются частными, потому что они недоступны вне модуля.

Открытый метод

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

Может опытные разработчики подскажут, мое объяснение слишком простое. Пожалуйста, объясните в комментариях!

Самовызывающееся выражение-функции

Модуль JavaScript создается переменной. Внутри этого мы помещаем «Выражение самовызывающейся функции». Эта функция вызывается автоматически.

Хватит болтать, просто погрузитесь в код!

Модуль JavaScript

Давайте создадим модуль под названием MrFrontendModule.

var MrFrontendModule = (function() {
  let mrFrontendMethods = {};
  let title = 'The Mr Frontend JavaScript Module';

  let addEmoticon = function() {
    return title + ' ';
  }

  mrFrontendMethods.getTitle = function() {
    return addEmoticon();
  }

  return mrFrontendMethods;
})();

Внутри модуля имеем:

  • Переменная let mrFrontendMethods, которая является объектом
  • Переменная let title, которая содержит заголовок
  • Функция let addEmoticon, которая возвращает переменную title и дополнительный смайлик.
  • Метод getTitle, связанный с объектом mrFrontendMethods.
  • Оператор return, который возвращает объект mrFrontendMethods.

Что является личным внутри этого модуля?

  • Переменная title
  • Функция addEmoticon

Эти вещи являются частными, потому что они не возвращаются оператором return. Поэтому они не будут доступны вне модуля.

Что является общедоступным внутри этого модуля?

  • Объект mrFrontendMethods
  • Метод getTitle

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

Как использовать публичный и приватный метод и функцию?

Мы создали этот модуль, потому что хотим, чтобы его можно было повторно использовать в других наших модулях.

Давайте начнем просто с использования MrFrontendModule. Это очень просто, просто вызывайте методы следующим образом:

console.log(‘Title: ‘, MrFrontendModule.getTitle());

Когда этот код будет выполнен, вы увидите результат: «TheMrFrontend JavaScript Module».

И это ожидаемо!

Что, если мы попытаемся вызвать функцию addEmoticon вот так?

console.log(‘Title: ‘, MrFrontendModule.addEmoticon());

Мы получим эту ошибку:

"TypeError: MrFrontendModule.addEmoticon is not a function

И это правильно, потому что эта функция не возвращается модулем, поэтому в основном скрыта для всего, что находится за пределами модуля.

Таким образом, мы можем вызывать функциюaddEmoticon только внутри файла MrFrontendModule.

Как использовать общедоступные методы внутри другого модуля JavaScript?

var SecondModule = (function(MrFrontendModule) {
  let secondModuleMethods = {};

  secondModuleMethods.getTitleFromOtherModule = function() {
    return MrFrontendModule.getTitle();
  }

  return secondModuleMethods;
})(MrFrontendModule);

Как бы вы справились с частными и публичными функциями?

Если у вас есть другой способ использования частных и публичных функций?

Какой шаблон модуля JavaScript вы предпочитаете использовать?

Пожалуйста, дайте мне знать в комментариях!

Если вы хотите узнать больше об этом шаблоне модуля, я настоятельно рекомендую проверить его на веб-сайте Тодда Мотто.

Хотите пройти обучение у меня?

Вместе с мистером Фронтендом я хочу помочь вам больше сосредоточиться на важных вещах и вещах, которые помогут вам расти.

Если вы хотите, чтобы я помог вам больше, поддержите мои блоги, видео и подкасты и перейдите на https://patreon.com/mrfrontend и выберите сумму денег, которую вы хотите потратить. Для (почти) каждой суммы есть пакет благодарности!

В нескольких пакетах есть моменты личной тренировки, так что идите и проверьте!

Первоначально опубликовано в Mr Frontend Blog.