In Vanilla JavaScript, how do I structure my app when having multiple Models/Views/Controllers?

Question

I'm trying to get a practical grasp of MVC model implementation (not the conceptual understanding) in JavaScript.

As for the start, I thought it would be worth making an effort and try building a MVC app in plain JS. I've read dozens of articles and book chapters referring to MVC and its variations. Of course I googled lots of examples to see how it's done for real. The most understandable and with the proper meaning is in my opinion this one:

https://github.com/tastejs/todomvc/tree/master/examples/vanillajs

In the end, I was able to refactor my own app in the todomvc-vanillajs way.

However, there is one thing that still bothers me. All these apps and examples are very basic, so there is only one Model, View and Controller specified for the whole app.

What if I wanted to add more (equally complex) features to such app?

Should I add them one by one to my controller.js view.js and model.js files or whether should I stop developing spaghetti code and add new files instead, thus creating new models, controllers and views for each of the new feature individually?

It seems to me, that every feature should have its own view, controller and model, or at least, could have, depending on the subjective evaluation. But I'm not quite sure how such implementation should look at this situation in terms of code structure, namespacing etc.?

What if I want to imitate a scale by creating multiple views, models and controllers on every single functionality like e.g. handling an "add task to the list" or "delete the task" actions.

For the purpose of my dilemma, I've created my own MVC draft, which has two models, controllers and views. Whether such an approach would make sense? What happens when further developing my application, I quickly get to the point where I have dozens and more specific (coresponding) models, views and controllers.

Heres is the aforementioned fiddle.

;(function () {
    'use strict';
    /**
     * @file ./App.js
     */ 

    var App = {
        Model : {},
        Controller : {},
        View : {}
    };

    console.log('start');

    window.App = App;

})();
/* -------------Views-folder----------------------*/
    /* -------------separate-file-----------------------*/
(function () {
    'use strict';
    /**
     * @file Views/buildAdd.js
     */ 

    var buildAdd = {
        // render

        // event

            // pass the reference to event handler in Controller
    };

    App.View.buildAdd = buildAdd;

})(App);
    /* -------------separate-file-----------------------*/
(function () {
    'use strict';
    /**
     * @file Views/buildDelete.js
     */ 

    var buildDelete = {
        // render

        // event

            // pass the reference to event handler in Controller
    };

    App.View.buildDelete = buildDelete; 

})(App);
/* -------------Controllers-folder----------------------*/
    /* -------------separate-file-----------------------*/
(function () {
    'use strict';

    var addController = {
        // handle the event and decide what the Model has to do

        // handle the response from Model and tells the View how to update 
    };

    App.Controller.addController = addController;

})(App);
/* -------------separate-file-----------------------*/
(function () {
    'use strict';

    var deleteController = {
        // handle the event and decide what the Model has to do

        // handle the response from Model and tells the View how to update
    };

    App.Controller.deleteController = deleteController;

})(App);
    /* -------------Models-folder----------------------*/
    /* -------------separate-file-----------------------*/
(function () {
    'use strict';

    var addModel = {
        // send request

        // get response
    };

    App.Model.addModel = addModel;

})(App);
    /* -------------separate-file-----------------------*/
(function () {
    'use strict';

    var deleteModel = {
        // send request

        // get response
    };

    App.Model.deleteModel = deleteModel;

})(App);
    /* -------------separate-file-----------------------*/

Thus, I found this question very similar to mine, but the provided answers are not entirely satisfactory, at least to me.

Answer 1

Check my implementation of so called Single Page Application framework. The whole thing is of 60 lines of code. It uses jQuery but can be implemented in VanilaJS.

Basic idea is simple - your app is just a collection of pages a.k.a. views

  <section id="route1" src="content1.htm" />
  <section id="route2" src="content2.htm" />
  ...

Sections id's define set of possible "routes" SpAPP catches browser's navigate event and load requested view on the route.

And partial content1..N.htm files contain view markup, setup and controller functions.

Data model here is JS data received from server and stored in memory or in local storage.

As of MVC frameworks in general... You cannot bring joy to everyone and free of charge. That small SpAPP thing that can easily be understood and adjusted to particular project's needs is a way to go I think.