简体   繁体   中英

Loading and running js code when page loading finished (unobtrusive way)

I'd like to separate my JS code from HTML as much as possible and I can see several patterns for that.

1) I can use

$(document).ready(function() {...}) 

just before closing body tag

2) I can just put js code like

new FormValidationHandler() 

in script tag just before closing body tag

3) I can point external js file containing initialization like $(document)ready or new FormValidationHandler in script tag

4) there is also a way to use self-invoking function but don't know if it maps to this problem

My question is which way is preferred?

Second one is that there are two places I can put my external scripts into the web page:

  • in the head tag
  • in the body tag (usually at the end)

Should head contain only code that doesn't have to run on page load? Then that code should be placed in body?

there is how I like to do. It's probably not perfect, but I like it this way :

Script location in the HTML document :

Every script loaded at the end of the HTML doc, just before the closing body.

There's one exception : the script that handles the FOUC (modernizr for example). This script must be in the head. I don't see any other reasonable exceptions.

Scripts organization :

Their's two cases for this, in my opinion : If you work with an Hypertext document, or a web app (Maybe this could need some more explanations, but it would be long :p ). I rarely worked for web apps, so I don't yet have a validated organization for this. But I think in a web app you can probably use some script loading libraries like requirejs and it will probably be more useful than for simple web pages.

For a Hypertext document (most web pages), I like to distinguish two kind of scripts : libraries and what I call in french "script d'interfaçage" ("linking script" could probably be a good translation...).

Libraries are, as the name says, scripts that loads libraries in the javascript environment, but doesn't DO anything.

linking script is made to link those libraries to the specific HTML doc.

For me, in a perfect world, there should be as much library scripts as you which but only one linking script for each HTML doc. In this script you'll find the $(document).ready call if you're using jQuery, and all the content of this script should be very very very simple. Ideally there should be, in the document ready function, only instructions like :

$('my selector').MyPlugin({
    option1:'value',
    option2: 'value'
});

This type of instruction is really a simple link between the HTML doc and the JS library, and it's very simple to read and understand.

Over this organization, you can than do any kind of packaging to reduce the number of js files to be loaded. This packaging have to be optimized for client caching and limiting HTTP requests etc...

External files or inline scripts ?

Personally, I prefer to use external files for all scripts, but generally I use one inline script tag to declare some variables needed for some libraries (your key for your ad service etc...).

Loading of external libraries

One last specific case : When you have to load a script from another host. Generally, you can't tell if the script will load or not, because you can't tell if the other server is up or not, and if it will be slow or fast... You can't tell exactly what this script will do, so it could break your page...

Loading scripts from other hosts can really create problems, and this is why I recommend loading them asynchronously, once your page is fully loaded, with as much controls as you can.

To do this, I personally developed a library dedicated to loading libraries (maybe one day I'll publish it on gitHub, when I have some time). For example, I use this script to load Facebook google+ ou twitter APIs, or any other external libs like stat counter or ads services.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM