В последнее время Ember.js активно обсуждается. Известный веб-сайт, такой как NASA, построен на основе ember.js, который является фреймворком JavaScript, и несколько других первоклассных компаний используют его.

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

Приведенная выше диаграмма дает нам краткое представление о том, как работает поток шаблонов MVC. Давайте кратко рассмотрим функциональные возможности каждого из них, а позже мы сможем углубиться в детали (в следующих блогах).

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

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

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

Контроллер предоставляет данные модели для просмотра и интерпретации действий в представлении. Это зависит от модели и представления, а контроллер имеет отношение привязки данных к представлению.

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

Теперь взгляните на следующую диаграмму о MVC в ember.

Итак, у нас есть следующие основные компоненты сборки, которые используются для сборки приложений в ember:

  1. Маршрут — это точка входа приложения, которая управляет состоянием приложения, отслеживая изменение шаблона URL.
  2. Контроллер используется для управления переходным состоянием приложения. Логика преобразования свойств, полученных в составе объекта модели, идет в контроллерах.
  3. Классы моделей инкапсулируют данные, с которыми работают контроллеры и представления. Модель может быть простым объектом JavaScript или объектом модели ember-data.
  4. Классы представлений/компонентов инкапсулируют шаблоны и позволяют нам создавать настраиваемые повторно используемые элементы.
  5. Шаблоны или шаблоны Handlebar позволяют нам разделить наше приложение на многократно используемые компоненты HTML. Handlebars помогают легко связать данные из контроллеров и моделей с представлением.

Вы не должны беспокоиться, если некоторые термины здесь сложны для понимания. Но, пройдя выше, вы, по крайней мере, получите базовый обзор MVC, и по мере того, как вы продвинетесь дальше и проведете исследование, все станет ясно. Я буду писать о вышеупомянутых компонентах один за другим в позже в блогах и постарайтесь объяснить как можно проще.

Надеюсь, вам понравился этот пост, и любые предложения или отзывы приветствуются.