Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

managing document.ready event(s) on a large-scale website

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

like image 420
WickyNilliams Avatar asked Sep 28 '11 10:09

WickyNilliams


People also ask

What is document ready event?

The document ready event signals that the DOM of the page is now ready, so you can manipulate it without worrying that parts of the DOM has not yet been created. The document ready event fires before all images etc. are loaded, but after the whole DOM itself is ready.

What are DOM ready events?

DOM ready means that all the HTML has been received and parsed by the browser into the DOM tree which can now be manipulated. It occurs before the page has been fully rendered (as external resources may have not yet fully downloaded - including images, CSS, JavaScript and any other linked resources).

What is the difference between document ready and window load?

The key difference between $(document). ready() and $(window). load() event is that the code included inside onload function will run once the entire page(images, iframes, stylesheets,etc) are loaded whereas the $(document). ready() event fires before all images,iframes etc.

How do I delay the document ready event?

Approach 1: Using the holdReady() method in the jQuery library and the setTimeout() method. First we set the parameter in the holdReady() method to true to hold the execution of the document. ready() method. Then, a timeout function with an appropriate delay time can be added using the setTimeout() method.


1 Answers

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.

like image 179
RameshVel Avatar answered Sep 19 '22 14:09

RameshVel