При разработке программного обеспечения некоторые процессы и задачи часто встречаются в нескольких проектах.
тем или иным образом или с той или иной степенью вариации. Шаблон проектирования является проверенным решением для таких
аналогичные проблемы. Он не предписывает код, а действует как шаблон рассуждения, подход, который был
абстрагируется независимо от реализации для повторного использования и адаптации к конкретным обстоятельствам.
На практике есть много возможностей для творчества при нанесении узора. Целые книги посвящены
к этой теме и предоставить больше подробностей, чем позволяют рамки этой книги. На следующих страницах
мы рассмотрим то, что я считаю наиболее повторяющимися шаблонами, которые следует учитывать при использовании Vue 3.
Приложения. Хотя мы видим их изолированно в целях их изучения, реальность такова.
что реализация часто перекрывается, смешивается и инкапсулирует несколько шаблонов в одном фрагменте.
код. Например, вы можете использовать синглтон в качестве декоратора и прокси для упрощения или изменения
связь между сервисами в вашем приложении (на самом деле мы будем делать это довольно часто, и
полный код можно увидеть в главе 8 «Многопоточность с помощью веб-воркеров»).
Шаблоны проектирования также можно понимать как лучшие практики разработки и разработки программного обеспечения. И
Противоположность этому, плохая практика, часто называют антишаблоном. Антипаттерны — это «решения»
что, даже если они решают проблему в краткосрочной перспективе, они создают проблемы и плохие последствия
линия. Они порождают необходимость обойти проблему и дестабилизируют всю структуру.
и реализация.
Давайте теперь рассмотрим список шаблонов, которые должны быть частью вашего набора инструментов для проектов Vue 3.
Краткий справочный список шаблонов
Шаблоны классифицируются по типу функции или проблемы, которую они решают. Есть много
шаблоны в соответствии с контекстом, языком и архитектурой системы. Вот неэксклюзив
список шаблонов, которые мы будем использовать в этой книге и которые, по моему опыту, с большей вероятностью
появляются в приложениях Vue:
• Шаблоны создания: они касаются подхода к созданию классов, объектов и структур данных:
Singleton pattern
Dependency injection pattern
Factory pattern
• Поведенческие шаблоны. Они касаются взаимодействия между объектами, компонентами и другими объектами.
элементы приложения:
Observer pattern
Command pattern
Структурные шаблоны. Они предоставляют шаблоны, которые влияют на дизайн вашего приложения и
отношения между компонентами:
Proxy pattern
Decorator pattern
Façade pattern
Асинхронные шаблоны: они касаются данных и потока обработки с помощью асинхронных запросов.
и события в однопоточных приложениях (широко используются в веб-приложениях):
Callbacks pattern
Promises pattern
Ни в коем случае этот список шаблонов не является эксклюзивным. Существует еще много моделей и классификаций, и
Этой теме посвящена целая библиотека. Стоит отметить, что описание и применение
поскольку некоторые из них могут отличаться от одной литературы к другой, и существует некоторое совпадение в зависимости от
по контексту и реализации.
После знакомства с шаблонами проектирования давайте рассмотрим их подробно на примерах.
The singleton pattern
Это очень распространенный шаблон в JavaScript и, возможно, один из, если не самый важный.
Основная концепция определяет, что экземпляр одного объекта должен существовать только один раз во всем приложении, и
все ссылки и вызовы функций выполняются через этот объект. Синглтон может выступать в качестве шлюза для
ресурсы, библиотеки и данные.
Когда его использовать
Вот краткое практическое правило, позволяющее понять, когда применять этот шаблон:
• Когда вам нужно убедиться, что доступ к ресурсу осуществляется только через один шлюз, например,
глобальное состояние приложения
• Когда вам нужно инкапсулировать или упростить поведение или общение (используется вместе
с другими узорами). Например, объект доступа к API.
• Когда стоимость нескольких экземпляров вредна. Например, создание веб-воркеров.
Реализации
Существует множество способов применения этого шаблона в JavaScript. В некоторых случаях реализация
с других языков переносится на JavaScript, часто следуя примерам Java с использованием
getInstance() для получения синглтона. Однако существуют более эффективные способы реализации
этот шаблон в JavaScript. Давайте посмотрим на них дальше.
Способ 1
Самый простой способ — использовать модуль, который экспортирует литерал простого объекта или нотацию объекта JavaScript.
(JSON), который является статическим объектом:
const my_singleton={
// Implementation code here...
}
export default my_singleton;Затем вы можете импортировать этот модуль в другие модули и всегда иметь один и тот же объект. Это работает
поскольку упаковщики и браузеры достаточно умны, чтобы избежать повторения импорта, поэтому, как только этот объект
был введен в первый раз, он будет игнорировать следующие запросы. Если не использовать сборщик, ES6
реализация JavaScript также определяет, что модули являются одиночными.
Способ 2
Этот метод создает класс, а затем при первом создании экземпляра сохраняет ссылку для будущих вызовов.
Чтобы это работало, мы используем переменную (традиционно называемую _instance) из класса и
сохраните ссылку на экземпляр в конструкторе. В следующих вызовах мы проверяем,
Значение _instance существует, и если да, верните его. Вот код:
class myClass{
constructor(){
if(myClass._instance){
return myClass._instance;
}else{
myClass._instance=this;
}
return this;
}
}
export default new myClass()Этот второй метод может быть более знаком другим разработчикам языков. Обратите внимание, как мы также
экспорт нового экземпляра класса, а не самого класса. Таким образом, вызывающему пользователю не придется
не забывайте каждый раз создавать экземпляр класса, и код будет таким же, как в методе 1. При этом используется
Case — это то, что необходимо согласовать с вашей командой, чтобы избежать разных реализаций.
Затем вызывающий может вызывать методы каждого из них напрямую (при условии, что у синглтона есть функция/
метод под названием myFunction()):
import my_method1_singleton from "./singleton-json";
import my_method2_singleton from "./singleton-class";
console.log("Look mom, no instantiation in both cases!")
my_method1_singleton.myFunction()
my_method2_singleton.myFunction()Шаблон Singleton чрезвычайно полезен, хотя он редко существует изолированно. Часто мы используем синглтоны
чтобы обернуть реализацию других шаблонов и убедиться, что у нас есть единая точка доступа. В нашем
примерах, мы будем использовать этот шаблон довольно часто.
The dependency injection pattern
Этот шаблон просто утверждает, что зависимости класса или функции предоставляются в качестве входных данных.
например, в качестве параметров, свойств или других типов реализаций. Это простое утверждение открывает
очень широкий спектр возможностей. Возьмем, к примеру, класс, который работает с IndexedDB браузера.
API через класс абстракции. Мы узнаем больше об API IndexedDB в главе 7 «Поток данных».
Менеджмент, но сейчас просто сосредоточьтесь на части зависимостей. Учтите, что файл dbManager.
js предоставляет объект, который обрабатывает операции с базой данных, и объект проекта.
занимается операциями CRUD для таблицы проектов (или коллекции). Без использования внедрения зависимостей,
у вас будет что-то вроде этого:
import dbManager from "dbManager"
const projects={
getAllProjects(){
return dbManager.getAll("projects")
}
}
export default projects;Приведенный выше код демонстрирует «нормальный» подход, при котором мы импортируем зависимости в начале.
файла, а затем использовать их в нашем коде. Теперь давайте настроим этот же код для использования внедрения зависимостей: