Как использовать шаблоны проектирования JavaScript

Шаблоны проектирования JavaScript обеспечивают проверенные решения распространенных проблем при разработке программного обеспечения. Понимание и применение этих шаблонов позволит вам писать более качественный и эффективный код JavaScript.

Введение в шаблоны проектирования JavaScript

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

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

Шаблон модуля

Паттерн модуля, обеспечивающий инкапсуляцию, является частью Модульная система JavaScript. Он обеспечивает способ защиты личных данных и поведения в модуле при раскрытии общедоступного API. Он позволяет создавать автономные объекты модуля с частным и общедоступным уровнями доступа.

Это немного похоже на то, как вы можете использовать модификаторы доступа к классу на таком языке, как Java или С++.

В JavaScript вы можете реализовать шаблон Module с помощью замыканий.

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

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

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

Вот пример:

константа ShoppingCartModule = (функция () {
// Частные данные
позволять корзины = [];
// Приватный метод
функциярассчитатьTotalItems() {
возвращаться cartItems.reduce((всего, шт.) => итог + шт.кол-во, 0);
 }
// Общедоступный API
возвращаться {
 addItem (элемент) {
 cartItems.push (предмет);
 },
 получитьВсегоItems() {
возвращаться вычислитьВсегоЭлементов();
 },
 очистить корзину () {
 корзины = [];
 }
 };
})();
// Пример использования
ShoppingCartModule.addItem({ имя: «Товар 1», количество: 2 });
ShoppingCartModule.addItem({ имя: «Товар 2», количество: 1 });
консоль.log(ShoppingCartModule.getTotalItems()); // Выход: 3
ShoppingCartModule.clearCart();
консоль.log(ShoppingCartModule.getTotalItems()); // Выход: 0

В этом примере ПокупкиКорзинаМодуль представляет модуль, созданный с использованием шаблона модуля. Выполнение кода выглядит следующим образом:

1. IIFE оборачивает весь блок кода, создавая функцию, которая немедленно выполняется после объявления. Это устанавливает частную область для членов модуля.
2. корзинаПредметы является частным массивом. Он не доступен напрямую снаружи модуля.
3. вычислитьВсегоЭлементов() — это закрытый метод, который вычисляет общее количество товаров в корзине. Он использует уменьшать() метод для перебора корзинаПредметы массив и просуммируйте количество всех предметов.
4. Модуль возвращает свой общедоступный API как литерал объекта, предоставляя три общедоступных метода: Добавьте предмет(), получитьВсегоПредметов(), и очистить корзину ().
5. Вне модуля вы можете получить доступ к общедоступным методам модуля для взаимодействия с функциональностью корзины покупок.

В этом примере показано, как шаблон модуля позволяет инкапсулировать личные данные (корзинаПредметы) и поведение (рассчитатьTotalItems) внутри модуля, предоставляя публичный интерфейс (Добавьте предмет, getTotalItems, и яснокорзина) для взаимодействия с модулем.

Шаблон наблюдателя

Паттерн Observer устанавливает зависимость «один ко многим» между объектами. Когда состояние одного объекта изменяется, он уведомляет все его зависимые объекты, и они автоматически обновляются. Этот шаблон особенно полезен для управления управляемыми событиями взаимодействиями или разделения компонентов в системе.

В JavaScript вы можете реализовать шаблон Observer используя встроенный addEventListener, диспетчерское событие методы или любые механизмы обработки событий. Подписывая наблюдателей на события или предметы, вы можете уведомлять и обновлять их, когда происходят определенные события.

Например, вы можете использовать шаблон Observer для реализации простой системы уведомлений:

// Реализация шаблона Observer
функцияСистема оповещения() {
// Список подписчиков
этот.subscribers = [];
// Метод для подписки на уведомления
этот.подписаться = функция (подписчик) {
этот.subscribers.push (подписчик);
 };
// Метод отписки от уведомлений
этот.отписаться = функция (подписчик) {
константа индекс = этот.subscribers.indexOf (подписчик);
если (индекс !== -1) {
этот.subscribers.splice (индекс, 1);
 }
 };
// Метод уведомления подписчиков
этот.уведомить = функция (сообщение) {
этот.subscribers.forEach(функция (подписчик) {
 subscriber.receiveNotification (сообщение);
 });
 };
}
// Объект-подписчик
функцияПодписчик(имя) {
// Метод для получения и обработки уведомлений
этот.receiveNotification = функция (сообщение) {
консоль.log (имя + ' получил уведомление: ' + сообщение);
 };
}
// Пример использования
константа система уведомлений = новый Система оповещения();
// Создаем подписчиков
константа подписчик1 = новый Подписчик(«Абонент 1»);
константа подписчик2 = новый Подписчик(«Абонент 2»);
// Подписка подписчиков на систему уведомлений
уведомлениеSystem.subscribe(subscriber1);
уведомлениеSystem.subscribe(subscriber2);
// Уведомление подписчиков
система уведомлений.notify(«Новое уведомление!»);

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

Система оповещения функция представляет систему, которая отправляет уведомления, а Подписчик Функция представляет получателей уведомлений.

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

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

Экземпляры функции Subscriber представляют подписчиков. У каждого подписчика есть метод receiveNotification, который определяет, как они обрабатывают полученные уведомления. В этом примере метод записывает полученное сообщение в консоль.

Чтобы использовать шаблон наблюдателя, создайте экземпляр NotificationSystem. Затем вы можете создавать экземпляры Subscriber и добавлять их в систему уведомлений, используя метод subscribe.

Отправка уведомления вызовет метод ReceiveNotification для каждого подписчика и зарегистрирует сообщение для каждого подписчика.

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

Использование расширенных шаблонов JavaScript

Вот несколько общих советов по эффективному использованию расширенных шаблонов JavaScript:

• Учитывайте влияние на производительность: расширенные шаблоны могут привести к дополнительной сложности, что может повлиять на производительность. Помните о последствиях для производительности и оптимизировать там, где это необходимо.
• Избегайте анти-шаблонов: тщательно изучите шаблоны и избегайте попадания в анти-шаблоны или их неправильного использования. Используйте шаблоны там, где они имеют смысл и соответствуют требованиям вашего приложения.
• Следуйте соглашениям о написании кода. Постоянно следуйте соглашениям о написании кода, чтобы обеспечить удобочитаемость и согласованность всей базы кода. Используйте осмысленные имена переменных и функций и предоставьте четкую документацию для своих шаблонов.

Будьте осторожны при применении этих шаблонов

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

С другой стороны, шаблон Observer облегчает связь между компонентами, устанавливая отношения субъект-подписчик.

Вы должны знать о потенциальных подводных камнях и распространенных ошибках при реализации расширенных шаблонов JavaScript. Избегайте чрезмерного использования шаблонов там, где существуют более простые решения, или создания чрезмерно сложного кода. Регулярно проверяйте и реорганизовывайте свой код, чтобы убедиться, что его можно поддерживать.