Фасадный шаблон обеспечивает унифицированный интерфейс более высокого уровня для сложного набора интерфейсов подсистем, благодаря которому упрощается доступ к интерфейсам подсистем.
Добро пожаловать в серию Шаблоны проектирования в TypeScript, в которой представлены некоторые полезные шаблоны проектирования в веб-разработке с использованием TypeScript.
Шаблоны проектирования очень важны для веб-разработчиков, и мы можем писать лучший код, освоив их. В этой статье я буду использовать TypeScript, чтобы представить шаблон Фасад.
Шаблон фасада обеспечивает унифицированный интерфейс более высокого уровня для сложного набора интерфейсов подсистем, благодаря которому упрощается доступ к интерфейсам подсистем. Это может уменьшить сложность исходной системы и уменьшить связь между классом клиента и классами подсистемы за счет введения нового фасадного класса.
Шаблон Facade требует, чтобы связь между внешней частью подсистемы и ее внутренней частью осуществлялась через унифицированный объект Facade, а класс Facade отделяет клиента от внутренней сложности подсистемы, так что клиенту нужно иметь дело только с Facade. объекта, а не со многими объектами внутри подсистемы.
Далее я расскажу, как использовать шаблон Facade, чтобы упростить доступ к интерфейсам подсистемы. Чтобы лучше понять следующий код, давайте сначала посмотрим на соответствующую диаграмму UML:
Паттерн Фасад включает в себя следующие роли:
- Фасад: ShapeFacade
- Подсистема: круг, прямоугольник, треугольник
Далее давайте определим интерфейс Shape и три класса, которые реализуют интерфейс для представления различных форм.
После определения различных классов формы давайте создадим класс ShapeFacade:
С классом ShapeFacade объект Client может использовать объект ShapeFacade для рисования различных фигур.
Чтобы помочь вам лучше понять роль шаблона фасада, мы используем рисунок, чтобы показать разницу между шаблоном фасада без использования шаблона фасада и с использованием шаблона фасада:
Распространенным вариантом использования шаблона фасада в веб-проектах является обеспечение совместимости веб-API браузера. Например, обработка прослушивания событий в различных средах браузера:
function addHandler(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
В приведенном выше коде мы реализуем обработку добавления прослушивателей событий в разные браузеры. Код также очень прост в реализации, но есть проблема, то есть его нужно оценивать каждый раз, когда он вызывается, что явно неразумно. Приведенную выше проблему мы можем решить с помощью функций ленивой загрузки.
Так называемая ленивая загрузка — это когда функция выполняется в соответствии с условием в первый раз, когда функция вызывается во второй раз, условие больше не оценивается и функция выполняется напрямую.
Чтобы получить эту функцию, мы можем перезаписать вызываемую функцию в ветке, которая удовлетворяет условию оценки в первом решении условия:
function addHandler(element, type, handler) {
if (element.addEventListener) {
addHandler = function (element, type, handler) {
element.addEventListener(type, handler, false);
};
} else if (element.attachEvent) {
addHandler = function (element, type, handler) {
element.attachEvent("on" + type, handler);
};
} else {
addHandler = function (element, type, handler) {
element["on" + type] = handler;
};
}
// Ensure that the first call can perform monitoring normally
return addHandler(element, type, handler);
}
В дополнение к описанному выше подходу мы также можем использовать самовыполняющиеся функции для реализации отложенной загрузки:
const addHandler = (function () {
if (document.addEventListener) {
return function (element, type, handler) {
element.addEventListener(type, handler, false);
};
} else if (document.attachEvent) {
return function (element, type, handler) {
element.attachEvent("on" + type, handler);
};
} else {
return function (element, type, handler) {
element["on" + type] = handler;
};
}
})();
Наконец, подытожим сценарии использования паттерна фасада:
- Между клиентскими программами и несколькими подсистемами существуют сильные зависимости. Введение фасадного класса отделяет подсистему от клиента и других подсистем, что может улучшить независимость и переносимость подсистемы.
- В иерархической структуре шаблон фасада можно использовать для определения точки входа каждого уровня в системе. Вместо того, чтобы создавать прямую связь между слоями, связь устанавливается через классы фасада, уменьшая связь между слоями.
Если у вас есть какие-либо вопросы, пожалуйста, оставьте мне сообщение. Позже я продолжу знакомить вас с другими шаблонами, если вам интересно, вы можете подписаться на меня в Medium или Twitter.
Если вы хотите изучить TypeScript, не пропустите серию статей Mastering TypeScript.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.
