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

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

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

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

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

Антон Спирин, поверьте, я знаю, что такое 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) в фронтенд разработке можно почитать тут. И тут. Еще тут.

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