Шаблон проектирования в двух словах

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

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

Model-View-Controller (MVC), Factory, Singleton, Observer, Composite и Strategy — вот некоторые распространенные шаблоны проектирования. В зависимости от решаемой задачи каждый шаблон проектирования имеет уникальные качества и применение.

Примеры шаблонов проектирования

Некоторые примеры распространенных шаблонов проектирования:

  1. Одноэлементный шаблон проектирования

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

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // true

2. Фабричный шаблон проектирования

Шаблон проектирования Factory используется для создания объектов без указания точного класса объекта, который будет создан.

class Product {
  constructor(name) {
    this.name = name;
  }
}

class ProductFactory {
  createProduct(name) {
    return new Product(name);
  }
}

const productFactory = new ProductFactory();
const product1 = productFactory.createProduct('Product 1');
const product2 = productFactory.createProduct('Product 2');

console.log(product1.name); // Product 1
console.log(product2.name); // Product 2

3. Шаблон проектирования наблюдателя

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

class Subject {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  notify(data) {
    for (const observer of this.observers) {
      observer.update(data);
    }
  }
}

class Observer {
  update(data) {
    console.log(`Received data: ${data}`);
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify('Hello observers!');

// Output:
// Received data: Hello observers!
// Received data: Hello observers!

4. Композитный шаблон проектирования

Шаблон проектирования Composite используется для создания иерархических структур объектов (например, дерева), которые можно рассматривать как один объект.

class Component {
  constructor(name) {
    this.name = name;
  }

  add(component) {}
}

class Leaf extends Component {
  constructor(name) {
    super(name);
  }
}

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }
}

const root = new Composite('root');
const leaf1 = new Leaf('leaf 1');
const leaf2 = new Leaf('leaf 2');
const composite = new Composite('composite');
const leaf3 = new Leaf('leaf 3');

root.add(leaf1);
root.add(leaf2);


composite.add(leaf3);
root.add(composite);

// Result:
// root
// --leaf 1
// --leaf 2
// --composite
// ----leaf 3

Что такое маршрутизация в веб-разработке?

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

Маршрутизация позволяет пользователю перемещаться между разными страницами SPA без обновления всей страницы.

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

Составной узор

Маршрутизация в React с использованием React Router следует шаблону составного проектирования. В этом шаблоне сложный компонент строится из простых компонентов. Компоненты React Router, такие как BrowserRouter, Routes и Route, разработаны таким образом, чтобы их можно было легко составить для создания сложной системы маршрутизации для вашего приложения. Это упрощает создание модульного и удобного в сопровождении приложения, поскольку функциональность маршрутизации может быть отделена от логики другого приложения. Шаблон композиции широко используется в React, поскольку он способствует повторному использованию кода, модульному дизайну и простоте сопровождения.

Реактивный маршрутизатор

React Router — это популярный фреймворк для обеспечения маршрутизации на стороне клиента в реагирующих приложениях. Он имеет два разных варианта:

  1. react-router-dom : для веб-приложений (с использованием ReactJS)
  2. react-router-native: для мобильной разработки (с использованием React Native)

Реагировать маршрутизатор DOM

На этом форуме я буду обсуждать конкретно react-router-dom . В версии 6 пакета react-router-dom для настройки маршрутизации используются следующие компоненты:

BrowserRouter: этот компонент используется для переноса корня приложения и предоставления приложению возможности маршрутизации. Он отслеживает изменения в URL-адресе и соответствующим образом изменяет интерфейс.

Маршруты. Этот компонент используется для указания маршрутов для вашего приложения. Он состоит из одного или нескольких компонентов маршрута, каждый из которых определяет отдельный маршрут.

Маршрут. Этот компонент используется для указания определенного маршрута в вашем приложении. Он принимает свойство пути, которое предоставляет URL-адрес, который должен соответствовать маршруту. Он также принимает свойство компонента, которое определяет компонент React, который должен отображаться при совпадении маршрута.

React Router DOM v6 (текущий последний)

React Router v6 улучшил API по сравнению с предыдущей версией, внеся различные модификации. Вот некоторые из причин:

Простой API: API React Router v6 более удобен и прост, что упрощает его использование и понимание разработчиками.

Улучшенная производительность: производительность новой версии React Router была повышена, что делает ее быстрее и эффективнее, чем предыдущая версия.

Улучшенная безопасность типов: последняя версия React Router построена с использованием TypeScript, который обеспечивает большую безопасность типов и упрощает обнаружение проблем на ранних этапах процесса разработки.

Улучшенная навигация: новая версия React Router предлагает улучшенные функции навигации, включая вложенные маршруты и динамические маршруты.

Монтаж

Используя npm, вы можете просто запустить этот код на терминале, чтобы установить последнюю версию react-router-dom:

npm install react-router-dom

Основной пример

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />} />
      </Routes>
    </Router>
  );
}

В этом примере компонент BrowserRouter (для удобства я определил его как Router) является оберткой для компонента Routes, который содержит два компонента Route. Первый компонент Route соответствует корневому URL-пути «/» и отображает компонент Home, а второй компонент Route соответствует URL-пути «/user» и отображает компонент User.

Пример вложенных маршрутов

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user" element={<User />}>
          <Route path="/profile" element={<Profile />} />
          <Route path="/account" element={<Account />} />
        </Route>
      </Routes>
    </Router>
  );
}

В этом примере мы видим, что у родителя «/user» Route есть 2 дочерних элемента.

Первый компонент Route соответствует корневому URL-пути «/profile» и отображает компонент Profile, а второй компонент Route соответствует URL-пути «/account» и отображает компонент account.

Если вам случится использовать React Router для своего приложения React, вложенные маршруты могут значительно улучшить ваш пользовательский опыт, предоставляя вашим пользователям доступ к очень определенным частям ваших приложений, а также совместно использовать эти части в виде URL-адресов.

Ссылки:
- React Router 6: Вложенные маршруты (robinwieruch.de)
- Шаблоны проектирования (refactoring.guru)
- React Router (w3schools.com)