MVС JavaScript

Шаблон проектирования MVC (что из себя представляет)

MVC - (Model-View-Controller, Модель-Представление-Контроллер). Шаблон или паттерн MVC состоит из трех компонентов, каждый из которых выполняют важную роль в ходе реализации проекта (почти на любом языке программирования):

Модель - управляет данными приложения. То есть, все взаимодействие с сервером сосредоточено в модели шаблона;

Представление - является визуальным видом приложения (то, что видит пользователь). Другими словами, это взаимодействие с DOM (HTML и CSS);

Контроллер - связь пользователя с системой. Также контроллер соединяет модель и представление, то есть он принимает пользовательские команды и обрабатывает их (к примеру, после ввода какой-то команды приложение возвращает определенные данные (что является моделью) и показывает пользователю эти данные (что является представлением)) для взаимодействия.

Важно отметить, что модель и представление не соприкасаются друг с другом. Эту роль выполняет контроллер.

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

Для понимания паттерна MVC-JS - реализован простой todo-list, с классовым подходом. У нас есть класс Model, это хранение и изменение наших данных. В нашем простом проекте в качестве хранения данных мы используем локальное хранилище браузера LocalStorage:

class Model {
  constructor() {
///....
  }
}

, класс View. Все что связано с манипуляциями с DOM, HTML и CSS будет в классе View:

class View {
  constructor() {
    ///...
  }
}

и класс Controller. Контроллер является связывающим звеном между классами Model и View, где будут храниться наши события:

class Controller {
  constructor(model, view) {
    this.model = model
    this.view = view
  }
}

Заключение

Как мы узнали MVC это строгое разделение реализуемого проекта, на три основных компонента. При грамотном использовании данного шаблона(паттерна) мы получим весьма читабельный и понятный код(проект). Надеюсь данный материал будет полезен читателю:)

При реализации материала использовались ниже приведенные источники:

MVC на чистом JavaScript;

Build a Simple MVC App in JavaScript;

Паттерны для новичков: MVC vs MVP vs MVVM.