На мой взгляд, шаблон модуля 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.