2
\$\begingroup\$

I have an application with HTML, external JavaScript and a bit of jQuery on the page which is initializing specific stuff to that page. I try to keep most of the JavaScript in other files. However I'm unsure if stuff in the DOM Ready function should be split into a separate file as well which is specific to that page. I'm wondering the best way to structure this.

The code for the calculator.html page might look like this:

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     
        <link type="text/css" href="css/global.css" rel="stylesheet">       
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/global.js"></script>
        <script type="text/javascript" src="js/calculator.js"></script>
        <script>
            $(function() {              
                calc.initialize();
                calc.loadPreviousState();
            });
        </script>
    </head>
    <body>
        <!-- page HTML code here -->
    </body>
</html>

The global.js files would be common JavaScript functions used on most pages. The calc.js file is only used by the calculator.html page and might have 20 odd functions in it. Assume that the two function calls inside the DOM Ready event need to be done on DOM load.

My question is, should I move this DOM Ready code into the top of the calculator.js file for clean code and readability? That way all the JavaScript would be contained in it's own file. For example here's the revised calculator.js file:

$(function() {              
    calc.initialize();
    calc.loadPreviousState();
});

var calc = {
    initialize: function() {
        // code here
        return true;
    },
    loadPreviousState: function() {
        // code here
        return true;
    }
};

What's best practice here?

Many thanks!

\$\endgroup\$
1
\$\begingroup\$

I normally keeps the dom ready statement in a separate js file so that the size of the initial render will be minimized as much as possible.

The only time I may do otherwise if I have to pass some state data to any of the initialization methods.

\$\endgroup\$
1
\$\begingroup\$

I don't know if it is good practice, but in my eyes it would be cleaner, since you have several JS-files at this point, to separate markup, layout and JS completely. So $() would reside in a .js-File.

In some cases, when you only have a few lines of JS or -on the other hand- if you have to care for every millisecond to deliver a good page experience, it would make sense to embed JS in the html-file and retrieve the non-critical JS at later time dynamically.

It depends on your usecase.

\$\endgroup\$
  • \$\begingroup\$ Cool thanks, that's my current thinking as well. \$\endgroup\$ – user unknown Aug 12 '13 at 21:21
1
\$\begingroup\$

First of all, scripts should be placed at the bottom of the page, just before </body> for two main reasons:

  1. To ensure that the DOM is parsed before it is accessed.
  2. So that scripts will not block the loading of the page.

In the first case, you need to ensure the scripts will not try to access the DOM prematurely or it will throw an error. A safe move is to place the scripts after the DOM is parsed (not necessarily ready).

The second case is about scripts blocking the page. To avoid that, you place scripts after the page contents. That way, you will get a full page before any [potentially blocking] scripts get in the way.

So move those scripts down.


As for your script order problem, scripts are normally loaded and parsed sequentially. The usual order is

  • Libraries
  • Plugins
  • Non-active scripts, like utility functions
  • Your own scripts

However...

The handler for DOM ready $(function(){...}) does not execute until the DOM is ready. That means all other scripts would have been loaded by the time it executes. So it does not matter if it comes before or after your utility library, your utility library would have been loaded, parsed and executed by the time the handler gets executed.

But for the sake of readability, I'd place your scripts after the calc. That way, in one skim of your script, a fellow developer would know calc exists, rather than look for it somewhere in the bottom of your file.

\$\endgroup\$
  • \$\begingroup\$ Thanks, I probably didn't explain myself clearly enough. I'm particularly interested in should the DOM Ready code go in a separate file (for cleanliness and readability) or should it go in the HTML page? Bear in mind the code is specific just to this page and there is a JavaScript file for this page already. What are your thoughts on that? \$\endgroup\$ – user unknown Aug 12 '13 at 21:19
  • 1
    \$\begingroup\$ @user2640336 I'd place it in an external script. Aside from the "cleanliness and readability", external scripts are cached, making it a slight performance benefit. \$\endgroup\$ – Joseph Aug 13 '13 at 12:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.