0

I am building a multi-page front end for a web application. There is minimal javascript for the UI, but I know there will a great deal of javascript to handle the back-end, so I am doing my best to keep it as sparse and limited as possible.

I want to conditionally execute javascript synchronously while using only one minified js file. I have some global functions, but most of the code is page specific. Each page has the id of the page in the body element. For example, about.html has the following code <html>...<body id="about">...</body></html>.

I am aware of various async methods to load javascript, such as require.js or even $.getScript, but for various reasons, I am trying to avoid that route. Because I am preprocessing the HTML, I also don't want to break the scripts up per page (though I could), because it is a small file, and I don't want to have to create a bunch of different <script> tags. My current solution is to conditionally execute the required javascript per page, and I am doing it like the example below:

    $(document).ready(function(){
         //global.js code
        if(document.body.id==='about'){
           // about.js code
        } 
       if(document.body.id==='home'){
           //home.js code
       } 
        // etc.

  });

During the build process, all js is stored in seperate files, so it's not as visually asinine as it looks here, because there is only a single include filename.js inside the body of the conditional.

The conditionals prevent unnecessary code from executing on each page. However, it dawned on me while I was doing this that there might not actually be any benefit to doing it this way. I read that $(window).load or $('body').load events might cause conflicts with $(document).ready, and they are both definitely slower - as is window.onload (I tested). That would've been my preferred way of going about this I suppose. Is what I read true? And / or, is what I'm doing in anyway useful?

dgo
  • 3,877
  • 5
  • 34
  • 47
  • What you're doing is equivalent to adding script tags right before the `

    ` tag.

     – tcooc Aug 27 '14 at 22:44
  • Got that. So what you're saying is that this is a shorthand equivalent of adding ` – dgo Aug 27 '14 at 22:55
  • @user1167442 Are you actually using and .load events within those conditionals? – EasyCo Aug 27 '14 at 22:58
  • Kind of. You're basically combining all your scripts into 1 giant `all.js` file which is loaded and cached. You're basically replicating the `require.js` optimizer functionality, except in a way that's not very modular... – tcooc Aug 27 '14 at 23:00
  • @EasyCo No. I use preprocessing, but when the page is running - it is just the javascript for that specific page - no load events. It just seemed preferrable. – dgo Aug 27 '14 at 23:06
  • @tcooc This seems like a good thing. The modular part is handled during build (I'm using gulp and gulp-preprocess for this), so I'm not worried about it at run time. The only question I have now - and it may be stupid (it feels stupid) - is the code still cached in the same way even for the unexecuted parts of the script? – dgo Aug 27 '14 at 23:08

1 Answers1

1

For page specific events, why not just add the body ID in the element reference?

$( '#about .do-something' ).on()...

And if you're actually executing non event based code on a per page basis

if( $( '#about' ).length ) { // trigger your code here }

It's not too dissimilar to your solution except it doesn't require you to keep a manifest of sorts about what code to execute where. Either way, both solutions get cached.

EasyCo
  • 2,036
  • 20
  • 39
  • That's smart. It is essentially the same thing as mine, but cleaner and simpler. Thanks. – dgo Aug 27 '14 at 23:44