4

Simple javascript files loader for embeddable javascript application

Share Button

Problem:

To develop a large scale javascript application, embeddable to pages, the first problem I faced was including large number of javascript files in the page. So like google or yahoo applications you simply include one javascript file and after few lines of javascript to start the application, otherwise you will end up with something like this:

You might have a simple, advanced and other versions of your application and the end user will have to figure out (or you have to explain) which files need to be included for different versions of applications. Also it looks ugly and meaningless for the enduser to include a big list of javascript files.

You can simply include all your javascripts in one big file and minify it, but

  • Sometime you want to keep your javascript libraries separate from your code
  • Also you might want to include different number of javascript files depend on which features user want to use. You will never want to load all javascript files if user want to embed just a simple/basic version of your javascript application.

Append script tags to head?

You might be thinking why don’t make an array of javascript files name, loop through this array and than for each file name, make a script tag and append it to the head tag. Well this is the solution but you might be loading external javascript files or host your javascript files outside on a CDN and some javascript files will load slower than others. Your javascript code might be depended on other javascript files, for example if you are loading jQuery library and than all your jQuery plugins, you might get an error “jQuery not defined” in your plugin files because jQuery might take longer to load than your plugins. So your plugins will load first and jQuery will still be loading so it will break your application.

jQuery’s getScript method can be used to load ONE javascript file at a time. You can use it inside a ‘for’ loop and use getScript’s callback to include the next script in an array of script file names. But you would never like to include a whole jQuery library just for this purpose (when you are not using jQuery anywhere else in your application).

Solution:

My idea to embed javascript application is include a single javascript file. Call a function and pass the type of application as argument. The function should make a list of javascript files to include, depend of the type of application and once all js files are loaded, call a callback function. Something like:

Demo

Here is the simple script to accomplish this goal, used in above linked demo:

This script will create any array of js files depend of application type user wants, and will start loading js files in the array. Once a file is loaded, another js file in the array will start loading so you will never get an error if (it should) your javascript code is depended on the code in other js files. Once all the js files are loaded, it will trigger the callback function to start your application.

Improvements you can make:

This script is totally customizable, depends on how you are loading the js files. You might be including some external js files or some server-side generated js files with ‘.aspx’ or ‘.php’ at the end of the files. So you will have to change the script to fullfil your needs. But basically ‘scriptGetter’ method will remain as it is, you just need to prepare an array of your javascript files according to different type of your applications.

Shortcomings:

  • No error handling if js file not found (404 error). You have to check in developer toolbar if js files are loaded correctly. You can also look at the ‘scriptGetter’ method and look for other states, for details see this and this
  • Need to add files to the arrays, every time you add a new js file to your application. You can customise this script where you will have to pass an array of js files to this method but it will increase the number of lines of code and end user has nothing to do with the that list of files.

Links:

Demo Demo script

Share Button
  • http://www.najamsikander.com najam sikander awan

    hey aamir,
    very nice post :) have you ever checked lab.js and yapnope for script loading.

    Best Regards,
    najam

    • http://www.aamirafridi.com Aamir Afridi

      Hi Najam,

      Yes i did try all these libs plus some other.

      This one is not a plugin but just a script which can be combined with server-side code to make arrays of js files depend on different types of js applications.

      I wrote this script specifically for ishare (isharemaps.com) applications, so with this script all you need is the application name like:

      includeJs('ishareBasic','',function(){
      ishareApp.init();
      });

      or

      includeJs('ishareFull','',function(){
      ishareApp.init();
      });

      For small scale js applications where you don’t have to add or remove js files frequently than the lab.js and yapnope are better options.

      Most importantly, I learnt a lot while writing the script and understanding how it work :P

  • mohammad waseem

    hello aamir,
    i want to develop a chart whose points are drag-able means we can drag the points up and down and the color of point should be change according to our action.. if i drag a point below to its base line then color of point should change to red from yellow,,,
    any help will be highly appreciable. please help me… thanx in advance… n i am using $.jqplot.Draggable plugin.

    • http://www.aamirafridi.com Aamir Afridi

      I think are asking the question in wrong place. The guy who wrote it can be contacted with details provided on his site: http://www.jqplot.com/info.php

Copyright © 2017 — musings of Aamir Afridi