How to make an initial MVC model for a website in JS?

Question

JavaScript

Hello guys!
I have already read several articles with MVC examples for a separate component, where there is one model, controller and view. But how to do it for the whole page, where there is a header, sidebar, body and ifooter. As I understand it, each block will have its own set of MVC, but how to connect them together? And if, for example, there are several separate components in the sidebar, each of which has its own set of MVC. How to tie it all together? Tell or on fingers, or outline the minimum code. I will be very grateful!

Answer 1

MVC is not particularly popular on the front. Read about flux, redux, mobx.

Answer 2

I would recommend using existing frameworks. Pure MVC on the frontend has not been used for a long time. But if you want to tinker with the basics, pump skills, then try to think structurally. You have a hierarchy page -> header -> menu -> menu item, etc. Reflection of this hierarchy will most likely need to be implemented in all aspects: models, controllers, views. You must start the page controller, which will prepare the models (run their controllers) and pass them to the page view. the page view, in turn, must build a view tree of subordinates and render them. or call render on their children, which in turn will call render on their children, and so on. how react does it.

Answer 3

So what exactly is the problem? just create 3 files m.js v.js c.js and shove the code there according to the meaning.
All $.on and addEventListener are in the controller, everything where you need to output data to the house is a view, but if you do something complicated with the data, this is a model. I’ll warn you right away that there will be many functions that seem like what for to create if they are used 1 time, but purely in order to be in a separate file.
And the fact that you listed the header footer sidebar etozh layout is just clear figs it is in 1 file all together.