One JS File for Multiple Pages [closed]

Solution 1:

I like Paul Irish's approach... you don't have to follow it exactly, but the general idea is a very solid one.

It might look something like this for your example

Html

<body id="share">

Your page specific javascript

YourNamespace = {
  share : {
    init : function(){
      // Place the logic pertaining to the page with ID 'share' here...
    }
  }
}

Paul Irish's Javascript that makes the magic happen

UTIL = { 
  fire : function(func,funcname, args){
    var namespace = YourNamespace;  // indicate your obj literal namespace here

    funcname = (funcname === undefined) ? 'init' : funcname;
    if (func !== '' && namespace[func] && typeof namespace[func][funcname] == 'function'){
      namespace[func][funcname](args);
    }
  }, 

  loadEvents : function(){
    var bodyId = document.body.id;

    // hit up common first.
    UTIL.fire('common');

    // do all the classes too.
    $.each(document.body.className.split(/\s+/),function(i,classnm){
      UTIL.fire(classnm);
      UTIL.fire(classnm,bodyId);
    });

    UTIL.fire('common','finalize');
  }
};

// kick it all off here 
$(document).ready(UTIL.loadEvents);

So the line you see directly above will kick off the following

YourNamespace.common.init()
YourNamespace.share.init()
YourNamespace.common.finalize()

Have a read of his blog post and a few of the variations linked from it.

Solution 2:

Similar questions have been already asked and the correct answer was and always will be

It depends on the situation.

However, if your concern is about minimizing the round-trip time (RTT) then it is certain that

Combining external scripts into as few files as possible cuts down on RTTs and delays in downloading other resources.

It is good to keep it as few as possible, but you don't necessarily have to keep it into one file strictly.

Let's take a look at why it is so.

While partitioning code into modular software components is a good engineering practice, importing modules into an HTML page one at a time can drastically increase page load time. First, for clients with an empty cache, the browser must issue an HTTP request for each resource, and incur the associated round trip times. Secondly, most browsers prevent the rest of the page from from being loaded while a JavaScript file is being downloaded and parsed.

These images show it more clearly why combining a number of JavaScript files into fewer output files can dramatically reduce latency:

All files are downloaded serially, and take a total of 4.46 seconds to complete.

After collapsing the 13 js files into 2 files: The same 729 kilobytes now take only 1.87 seconds to download

Edit after Clarification given by Siku-Siku.Com: Sorry! I totally misunderstood your question. I don't know of any better way for making a particular (chunk of) script run only when the corresponding page is loaded. I think your way is good enough.

Solution 3:

Your suggestion seems OK. I would however use an HTML 5 data- attribute to tag every page like this:

<body data-title="my_page_title">

You can then write conditional javascript code by checking this property (jQuery 1.4.3 onwards):

if ($("body").data("title") === "my_page_title") {
    // Place the logic pertaining to the page with title 'my_page_title' here...
}

This allows you to systematically group all code for a certain page in a sensible way

Solution 4:

Another option is that you could have, within the HTML code

<script>
    callYourJSFunctionHere();  /*Things you would want to happen on Page load*/
</script>

This will follow the normal flow of the page. Therefore if you are playing with elements on the page, you will need to place this <script> portion at the bottom of the page, after all the elements have been loaded by the browser.

I'm not 100% sure this is more efficient then the current solution you have, but on the other hand, it will be telling someone looking at your HTML page what JavaScript will be run when the page loads. This might be helpful in terms of maintenance down the road.... no so much a guessing game as to what script runs when the page loads.

Hope this helps!

One JS File for Multiple Pages [closed]

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts