ru:https://highload.today/blogs/razdelyaj-i-vlastvuj-chto-takoe-patterny-mvc-i-mvp-i-kak-ih-ispolzovat/ ua:https://highload.today/uk/blogs/shho-take-mvc-ta-mvp-patterni/
logo

Розділяй та володарюй: що таке патерни MVC і MVP, та як їх використовувати

Владислав Хирса BLOG

Senior Backend Developer | Node.js | NestJS | Express.js | SQL | NoSQL | AWS

Ми постійно використовуємо патерни програмування, не усвідомлюючи цього. Не замислюємось про те, чому на проєктах використовується саме така архітектура, чому структуру проєкту і навіть назви файлів використовують за саме такими загальноприйнятими канонами.

У цій статті я пропоную розібратись з одними з найуживаніших патернів — MVP та його пращуром MVC.

Патерн MVC

Почнемо в хронологічній послідовності з патерну MVC — він був створений в 1970-х роках і його метою було розбиття будь-якої програми, з якою взаємодіє користувач, на три логічні блоки:

  1. Model — це бізнес-логіка додатку, в ньому відбуваються найважчі процеси (обробка, сортування, запис даних, звернення до бази даних, генерація вебсторінки тощо), і після виконаної події відправляє результат до View.
  2. View — це інтерфейс, з яким взаємодіє користувач, візуальна частина (наприклад, сторінка сайту). Задача View — зчитати інформацію, введену користувачем, і передати її в конкретний метод або функцію контролера, а також зчитувати дії користувача (натискання кнопки або оновлення сторінки, що теж викликає метод або функцію з контролера).
  3. Controller — приймає дані або подію від View і може діяти таким чином, наприклад:
  • за допомогою виключень обирає конкретний метод Model, який треба викликати, спираючись на дані або подію від View;
  • формує обʼєкт з отриманих параметрів, який передаємо до Model за допомогою метода, функції Model або створюємо httpзапит до model.

Загалом у нас виходить циркуляційна взаємодія наших трьох модулів — тобто по колу:

Патерн MVP

Ми розглянули, з чого все почалось, і тепер готові піти далі.

Курс Python від Mate academy.
Python дозволяє тобі не тільки розробляти сайти та займатись аналітикою даних, а ще й будувати алгоритми, тестувати програми та навіть створювати штучні інтелекти. Стань різноплановим фахівцем!
Реєстрація на курс

Розглянемо патерн MVP він відрізняється лише одним модулем, проте зовсім іншою взаємодією між ними.

Як ми бачимо, у нас тепер замість модуля Controller модуль Presenter, проте найголовніше — це те, як змінилась їхня взаємодія.

Тепер модулі View та Model спілкуються виключно через модуль Presenter, який є посередником: робить все, що робив Controller, звертається до Model, чекає на відповідь, отримує її і передає результат до View.

Переходимо до прикладів

Розглянемо все на прикладі простого проєкту, який має візуальну частину View-модель (index.html), Presenter з одного файлу та великий модуль Model.

Ви можете завантажити та протестувати проєкт з GitHub.

View:

В модулі View ми маємо лише розмітку, яка буде відображена у користувача, та імпортуємо потрібні нам скрипти включно і з презентером.

Англійська для початківців від Englishdom.
Для тих, хто тільки починає вивчати англійську і хоче вміти використовувати базову лексику і граматику.
Реєстрація на курс

Presenter:

Файл presenter/index.js працює безпосередньо з html — змінює його, спираючись на дії користувача та дані, які отримує від запитів до моделі Model.

Файл presenter/requests.js має в собі функціонал запитів до Model за urlадресам і виконуються за допомогою axios.

Model:

Файл model/index.js — «серце» нашого сервера, тут ми запускаємо http-сервер та приймаємо запити по назначеним url-адресам.

Файл model/src/getAllMessages.js — одна з наших функцій, яка після виконання віддає відповідь до Presenter, який, в свою чергу, змінює View, який відмальовується за новими даними.

Курс QA від Mate academy.
Найпростіший шлях розпочати кар'єру в ІТ та ще й з гарантованим працевлаштуванням.
Інформація про курс

Замість висновку

Ми розглянули з вами одні з найвживаніших патернів і розуміємо тепер, що вони створені для того, щоб змінюючи логіку однієї моделі, ми не потребували зміни логіки у всьому застосунку і могли, наприклад, за потребою, замінити модель Model на новий код за сучасними стандартами або ж взагалі на інший сервер — і це зовсім не вплине на роботу інших модулів.

Тож, завершуючи цю статтю, я хочу сказати: «Розділяйте та володарюйте».

Продуктивного вам кодування 😉

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту та натисніть Ctrl+Enter.

Курс Power Skills For Tech від Enlgish4IT.
Зменшіть кількість непорозумінь на робочому місці та станьте більш ефективним у спілкуванні в мультикультурній команді. Отримайте знижку 10% за промокодом ITCENG.
Реєстрація на курс

Цей матеріал – не редакційний, це – особиста думка його автора. Редакція може не поділяти цю думку.

Топ-5 найпопулярніших блогерів березня

PHP Developer в ScrumLaunch
Всего просмотровВсього переглядів
2229
#1
Всего просмотровВсього переглядів
2229
Founder at Shallwe, Python Software Engineer (Django/React)
Всего просмотровВсього переглядів
111
#2
Всего просмотровВсього переглядів
111
Career Consultant в GoIT
Всего просмотровВсього переглядів
93
#3
Всего просмотровВсього переглядів
93
CEO & Founder в Trustee
Всего просмотровВсього переглядів
92
#4
Всего просмотровВсього переглядів
92
Рейтинг блогерів

Найбільш обговорювані статті

Топ текстів

Ваша жалоба отправлена модератору

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: