•  30-09-2022
  •  | 
  •  

Question

I have a interesting concept I was working on and looking over, through various stack questions on auto loading JavaScript. I dint want to use a third party tool, aside form jquery, so I thought I would role my own. The concept I have is:

var scripts = {
    'name' : 'path/to/script_dir/' // Load all scripts in this file.
}

requireScripts(scripts); // Requires all scripts
// Call your classes, methods, objects and so on ....

The requireScript() function would work something like:

function requireScript(hash){
   $.each(hash, function(key, value)){
       $.ajax({
           url: value,
           dataType: "script",
           async: false,
           error: function () {
               throw new Error("Could not load script " + script);
           }

        });
    });
 }

Note: The above is just a concept, I don't think it will work.

The above would let you load SPECIFIC scripts. so in essence your hash key value would be 'name' : 'path/to/specific/script'. The issue this posses is that your hash would get rather large ....

The other issue I ran into is what if I simplified this to "php pear naming standard" so, as the trend seems to be - we would create a class, and it would be named after its location:

var some_folder_name_class = function(){}

Would be translated by the autoloader as: some/folder/name/class.js and then loaded that way.

To wrap up and get to my point there are two ways of loading javascript file I am looking at, via rolling my own "require" method. One is loading a directory of javascript files via the hash idea implemented above. (the provided code sample of how this hash would be walked through would have to be changed and fixed....I dont think it works to even load a single file)

OR

to have you just do:

new some_class_name() and have a global function listen for the new word, go find the file your trying to call based on the name of the class and load it, this you never have to worry - as long as you follow "pear naming standards" in both class and folder structure your js file will be loaded.

Can either approach be done? or am I dreaming to big?

I see a lot of frameworks do a bunch of require('/path/to/script') and if I could role my own autoloader to just allow me to either load a directory of js files or even have it where it listens for new before a class instantiation then I could make my life SO MUCH easier.

Was it helpful?

Solution

Have you consider using requirejs and probably Lazy loading.

http://www.joezimjs.com/javascript/lazy-loading-javascript-with-requirejs/

Here is sample version:

  1. You can download here.

  2. The sample is based on this folder structure :

    public

    • index.html

    • scripts

      • app.js

      • lib

        ** jquery-1.10.2.js

        ** require.js

3 . From Code:

html

`<!DOCTYPE html><html>
 <head><title>Sample Test</title>`

<script src="scripts/lib/require.js"></script> <!-- downloaded from link provide above--> <script src="scripts/app.js"></script></head>

`<body><h1>My Sample Project</h1><div id="someDiv"></div></body></html>`

application configuration app.js 

requirejs.config({
    baseUrl: 'scripts',

    paths: {
        app: 'app',
        jquery: 'lib/jquery-1.10.2' //your libraries/modules definitions
    }
});

// Start the main app logic. loading jquery module
require(['jquery'], function ($) {
        $(document).on('ready',function(){
            $('#someDiv').html('Hello World');
        });
 });

OTHER TIPS

jQuery-only option

If you are looking for a jQuery-only solution, have a look at jQuery.getScript(). It would be a great candidate for handling the script loading portion of your problem. You could then write a very small wrapper around it to load all the scripts—something like you wrote above:

var loadScripts = function(scripts) {
  $.each(scripts, function(name, path) {
    jQuery.getScript("/root/path/" + path + ".js");
  })
}

If you are interested in more information on this approach, read this article by David Walsh.

Other great libraries

I strongly recommend taking a look at the current batch of script-loading libraries. I think that you will pleasantly surprised by what is out there. Plus, they come with the benefit of great community support and documentation. RequireJS seems to be the front runner but David Walsh has great articles on curl.js and LABjs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top