Как сделать начальную MVC модель для сайта на JS?

Question

[Denis78656]

Ребята привет!
Прочитал уже несколько статей с примерами MVC для отдельного компонента, где одна модель, контроллер и представление. Но как это сделать для всей страницы, где есть хеддер, сайдбар, основная часть и ифутер. Я так понимаю у каждого блока будет свой набор MVC, но как их вместе связать? А если еще, например, в сайдбаре несколько отдельных компонентов, у каждого из которых свой набор MVC. Как это все связать воедино? Расскажите или на пальцах, или набросайте минимальный код. Буду очень благодарен!

Comments

[sim3x]

Речь о SPA или о статичном сайте?

[Denis78656]

сайт на несколько статичных страниц

[Denis78656]

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

[Denis78656]

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

[sim3x]

Denis78656, Почитайе что такое спа
Подумайте
Напишите

Если отвечаете кому-то конкретному, то нажимайте кнопку "Ответить"

[Монти Пайтон]

sim3x,
у него проект на "несколько статичных страниц", зачем там вообще MVC, там вообще ничего не нужно, FTP соединение разве

Answer 1

[ThemeZV]

MVC не особо популярен на фронте. Почитайте про flux, redux, mobx.

Comments

[Denis78656]

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

[Антон Спирин]

Denis78656, нет смысла разбивать логику для статичного сайта на модель, представление и контроллер.
Сами подумайте как вы себе представляете модель статичного футера. Даже звучит смешно.
Хотите разобраться с MVC пишите веб приложение. Да и то сейчас это имеет смысл только в учебных целях.
https://github.com/tastejs/todomvc/tree/gh-pages/e...
https://youtu.be/5WgsKtlHUls

[Wentixon]

Антон Спирин, Ну вообще под контроллером понимается компонент, модель это.. модель ) данные и независимые функциональные модули. А вьюха это html. Чем не mvc то?

[Антон Спирин]

Wentixon, у вас видимо неправильное представление о MVC. html - это лишь разметка, шаблон используемый View. В классическом MVC вы без проблем можете заменить одно View другим. Например заменив интерфейс взаимодействия с HTML виджета, на консольный интерфейс и ни контроллер, ни модель даже этого не заметят. Вот это будет классический MVC.
Модель зачастую в зависимости от реализации, содержит в себе определенную бизнес логику, помимо самих данных.
Контроллер вообще ничего не знает о способах визуализации, все абстрактно, есть только интерфейс взаимодействия с View без деталей вроде element.classList.add(myClass).

[Wentixon]

Антон Спирин, поверьте, я знаю, что такое mvc ) про html я сказал в данном контексте. Короче, в любом случае, у вас есть несколько слоев в js фреймворке. У вас есть и вьюха, где вы выводите, компонент выполняет роль посредника, а какой нибудь redux выступает в качестве модели. А классический mvc это бред. Нет ничего классического =) Вообще mvc шаблон, это просто паттерн посредник, о котором вы можете почитать. А посредники есть в любом приложении

[Антон Спирин]

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

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

Вот простой пример самодостаточного React виджета:

class WeatherWidget extends Component {
  this.state = {
    weather: '',
    city: this.props.city, 
  };

  componentDidMount() {
    this.fetchWeatherData();
  }
  
  fetchWeatherData() {
    axios.get('/api/weather/${this.state.city}')
      .then(({ data: weather }) => this.setState({ weather }));
  }  

  handleCitySelectChange = e => {
    const { value: city } = e.target;
    
    this.setState({ city }, this.fetchWeatherData);
  };
  
  render() {
    return ( ... );
  }
}

export default bootstrap = (node, city) =>
  ReactDOM.render(<WeatherWidget city={city} />, node);

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

Что же касается FLUX, главная отличительная особенность этого подхода это однонаправленный поток данных.

О преимуществах использования FLUX над MVW(model-view-whatever) в фронтенд разработке можно почитать тут. И тут. Еще тут.

[Wentixon]

Антон Спирин, окей, вы умеете убеждать =)

Answer 2

[Aleksei Podgaev]

Я бы рекомендовал воспользоваться имеющимися фреймворками. Чистый MVC на фронтенде уже давно не используется. Но если хочется повозиться с основами, прокачать навыки, то попробуйте мыслить структурно. У вас есть иерархия страница -> хидер -> меню -> элемент меню и т.п. Отражение этой иерархии скорее всего нужно будет реализовать во всех аспектах: модели, контроллерах, вьюхах. Вы должны запустить контроллер страницы, который подготовит модели (запустит их контроллеры) и передаст их во вью страницы. вью страницы, в свою очередь, должен выстроить дерево вью подчинённых и отрендерить их. или вызвать render своих детей, которые в свою очередь вызовут render своих и т.п. как это делает react.

Answer 3

[bro-dev]

Дык в чем проблема то конкретно? просто создайте 3 файла m.js v.js c.js и пихайте туда код по смыслу.
Все $.on и addEventListener в контролер, все где нужно выводить данные в дом это вью, ну а если че-то сложное делаете с данными это модель. Сразу предупрежу что будет много функций которые вроде как нафига создавать если они юзаются 1 раз, но чисто для того чтобы были в отдельном файле.
А то что вы перечислили хедер футер сайдбар этож верстка просто ясен фиг она в 1 файле вся вместе.