MVC in Vanilla JavaScript

问题:

I'm at the point now where i really want to organize my code in a way that makes it more scalable and manageable. i want to get a better understanding of the MVC architectural in javascript without using a framework.

So this is what i understand thus far (please please please correct me if i'm wrong):

Model: an organized structure of the sites/web apps content(pics, copy, downloadable content, etc...) that also has logic needed in the manipulation of the content. so in javascript the model could be a JSON object or a call to a php file that retrieves/updates a database and the model's logic could be functions that are responsible for parsing, regex-ing, and organizing the content so it can then be handed off to the view?

View: the user interface and the visual representation of the Model's data/content. its only job is to display the content and accept user input if applicable?

Controller: so is the controller only job is to act as a mediator between the model and the view? for instance, if the view needs data does it ask the controller who then go's to the model to get the data then sends it back to the view? and if there is any user input the view sends it to the controller who then sends it to the model which is then updated at which point the controller then informs the view that the model has then been updated?

MVC has been and still is a point of confusion for me, combined with the fact that its been stated that MVC is not a natural accuring thing in javascript(at lease not like in php,java,actionscript,etc...)

回答1:

Looking at code has always been the best way for me to learn so I figured I would share these.

TODO mvc comparing many different JS MV* Frameworks

The above link compares all the JS mv* frameworks. This demo should particularly interest you,

Vanilla JS Todo mv* implementation

source

From the sounds of it you understand what MVC is and are just confused as to how to implement it in JS, just look at the many different frameworks out there (ember.js, backbone.js, etc) and their source to get their take on it. The todo list is a great starting point.

回答2:

The first truth is that View and Controller are - in most cases - very close. Sometimes even the same. And that isn't neccessarily bad. If you have a table, select a row, then click on a button that will change the data in the selected row, the button will obviously part of the View (you see data) and the Controller (you change data). There are better examples for this, I'm sure...

The second truth is that you will find almost as many opinions on MVC as there are people ;)

But personally, I'd advise you not to follow some design pattern slavishly. MVC is good starting point to design your code, but in the end, your code needs to be fast, stable and maintainable. And, you (and your team) have to be comfortable with the code. If you end up with code that follows the MVC pattern, fine. If not, also fine. At least that's my view on that.