Organizing javascript code

Question

I am making a javascript application. Normally what I do is make different modules and get users inputs or click events in $(document).ready(); function. This works

Answer 1

Let suppose we make cross platform application like below

Sorry for dirty content removing.

We want it cross platform so we write it with JavaScript. We want our syntax to be smart, elegant and laconic, so we use jQuery.

Our source structure will be like this

In js folder we have three folders: controller, model, view. We divide our application to three (can be many more) parts: main, menu and navbar.

For each of these parts we have ...Ctrl.jsand ...View.js. We have only one model mainModel.js (just in case).

Ctrl.js is where your handlers and where you attach them to controls. For example mainCtrl.js:

app.mainCtrl = {
   model: app.mainModel,
  init: function(){

     $('#addButton').click(function(){
         this.model.addToFavorites();
     });
     $('#removeButton').click(function(){
         this.model.removeFromFavorites();
     });
  }
};

(small stars on the right of the above screenshot are actually add/remove buttons )

Controller can hold references to both view and model or only to model (as in above example).

Model.js is where we update our backend and view. For example mainModel.js:

app.mainModel = {

  view: app.mainView,
  all: {},
  favorites: {},
  init: function(){
   /* for example
   this.all = $.parseJSON ($.load('url'));
   this.favorites = $.parseJSON ($.load('url')); 
    */
      this.showAll();


  },
  showAll: function(){
       this.view.show(this.all);
  },
  showFavorites: function(){
       this.view.show(this.favorites);
  },
  addToFavorites: function(item){
      //add item to favorites
  },
  removeFromFavorites: function(item){
      //remove item from favorites
  }
};

View.js is where we actually updates our view (by directly manipulating DOM). Methods of view can be called by related controller and/or model. For example mainView.js:

app.mainView = {
   show: function (items){
       //create new element for each item
   }
};

And finally we have app.js file where we initialize our app:

var app = {
  init: function(){
      this.mainCtrl.init();
      this.menuCtrl.init();
      this.navbarCtrl.init();
      this.mainModel.init();
      this.navbarView.init();
  }  
};

We have only one global variable app in our application. All views, controllers and models created inside app namespace.

And finally, finally is the order of import. You should import app.js first as it defines app variable.