Keep from loading the same javascript more than once

Question

I want to prevent my system from loading the same script more than once, because different modules can be combined and I use third party libraries that I don't want to manipulate.

Has anyone done this before?

Answer 1

As the libraries such as Require JS didn't solve my problems, I made my own solution, which I'm posting below.

My system is also made by different modules. In the main module, I have a loader for the dependencies of all the modules (php, js and css files). After the dependencies have been loaded, the app triggers an event and sets a global variable which prevents double inclusion of files.

Hope it helps. If you have any doubts, just let me know.

The code:

//Main 
var main = {
    init: function(){
        //Dependencies to load (php, js or css)
        var deps = [
            '/helpers/edit/v/edit.php',                
            '/helpers/edit/css/edit.css',              
            '/helpers/validate/js/jquery.validate.js,messages_pt_BR.js'
        ];        
        //Load initial pack
        if (!window.editReady){
            //Load dependencies
            this.load('edit',deps);        

            //Bind loaded event
            $('body').on('editReady',function(){
                //Set editLoaded to avoid double ajax requests
                window.editReady = true;

                //Do whatever you need after it's loaded

            });
        }
    },
    //Load external resources
    load: function(name,data_urls){
        var url, ext;  
        var len = data_urls.length;
        var i = 0;
        $(data_urls).each(function(){
          //Get proper file
          $.get(this, function(data) {
              url = this.url;
              ext = url.split('.').pop();
              switch(ext){
                  case 'php':
                      this.appended
                      $(data).appendTo('body');
                      break;
                  case 'css':
                      $('<link/>')
                        .attr({
                          'rel':'stylesheet',
                          'href':url
                        }).appendTo('head');
                      break;
              }
              //Check if all files are included
              i += 1;
              if (i == len) {
                $("body").trigger(name+"Ready");
              }
          });
        });
    }
};

var modules = {
    themes : {
        init : function(){
            //Load dependencies
            var deps = [
                '/helpers/plupload/js/plupload.js,plupload.html5.js,plupload.flash.js' 
            ];        
            if (!window.themesReady){
                //Set themesReady to avoid double ajax requests
                window.themesReady = true;

                //Load dependencies
                main.load('themes',deps);   

                $('body').on('themesReady',function(){

                    //Do whatever you need after it's ready
                });
            }
        }
    }
}    
main.init();

Answer 2

How about RequireJS? Seems to be what you're looking for.