Question

NOTE: I have now created a jQuery plugin which is my attempt of a solution to this issue. I am sure that it could be improved and i’ve probably overlooked lots of use cases, so if anyone wants to give feedback feel free 🙂 https://github.com/WickyNilliams/ReadyBinder

I don’t have a problem as such, but thought this would be an interesting point for discussion, and i hope people have some interesting ideas for this.

Basically, i work on a large-scale website and increasingly we are writing more and more JavaScript. This is fine, i enjoy JS’ unique approach and i find the quirkiness in some of the darker annals of the language to be endearing 😉 However one thing that has always bugged me is how to manage document ready events as they get increasingly large over time (and as a result less focused/specific to the page being served)

The problem is that we have one JS file (merged & minified, though that’s kind of inconsequential for my questions). Most of the JS is written using the revealing module pattern, and jQuery is our framework of choice. So all our JS funcitonality is logically grouped into methods, namespaced, and then right at bottom of the script file we have this

$(function(){
    //lots of code here, usually calling encapsulated methods 
    //on our namespaced revealing module
});

The problem is that not all of the code in this document ready handler pertains to every page. For instance, on one page only 10% of it might be relevant, on another perhaps 80% might be relevant. To me, this feels incredibly wrong, i feel i should only execute the code i need per page, mainly for efficiency, but also maintainability.

I’ve searched google for approaches to this issue, but cannot find anything, maybe i’m just searching for the wrong thing!

Anyway, so my questions are:

• Has anybody ever thought about this issue?
• Is it actually an issue in other people’s opinion?
• Do you have a large, all-encompassing document ready handler in your code or is it more focused for the type of page being served?
• If the latter, how do you manage this? Multiple handlers which get switched in JS or dynamically spitting out the document ready handler server-side?

Look forward to people’s thoughts on the matter.

Cheers

Answer 1

This is what i have done in my rails mvc project with heavy javascript, i have created a separate namespace for the controllers in js which resembles the rails controller

class BusinessController
   def new
   end  
   def index
   end
end

and

Var Business =  {
      init : function(action) {
         //code common to the Business module
         //even add the common jquery doc ready here, its clean
         //and call the page specific action
         this[action]();
      },
      new : function() {
             // check jquery document ready code here, thats relevant to this action
             //New rental page specific code here
      },
      index : function() {
             //  check jquery document ready code here, thats relevant to this action
             //index rental page specific code here 
      }
}

and on the view code(server side) just initiate the page specific js code by

<script type="text/javascript"> 
 <%= controller_name %>.init('<%= controller.action_name %>'); 
//which will render to
//  Business.init(index);
</script>

You can pretty much tweak this to make it work in any language. And this approach doesn’t care whether you have a single file or multiple files.