Create an includes file jQuery

Question

Question/Problem: I have several js files (~15) with some functions. To not have to include them all one by one in the html page, I want to create an include file (like in php with include(), require(), etc).

Goal: So the goal is to have something like that:

HTML: Only src main.js or main.js + includes.js
Includes.js: Should get all the scripts.
Main.js: Should get access to all the includes.js scripts.

What I already tried:

$.getScript all the files in includes.js, src it in the html before main.js, and try to use the function in main.js, didn't work.
$.getScript all the files in includes.js,$.getScript includes.js in main.js, just src main.js, try to use the function in main.js, didn't work.
Same as above but also src includes.js before main.js, scripts run twice.

Appreciate any feedback, thanks.

PS: I already found these : loading multiple javascript files - jquery and these : How to include multiple js files using jQuery $.getScript() method, but they don't quiet well do want i'm looking for.

Why wouldn't you just combine them into one larger JS file on the server? That's what most people do. Combine them into one larger cacheable file and minimize it. Much faster than having the browser download 15 separate files. — jfriend00, Oct 19 '13 at 07:59
I think keeping several smaller files may be easier to maintain and modify than a large one. No? — Notsogood13, Oct 19 '13 at 08:03
Have you tried requireJS: http://requirejs.org/docs/api.html — Kalimah, Feb 14 '17 at 22:03
maybe are you declare the js twice, in the html and the includes? Otherwise You should share your tries and maybe can help, getallscripts works — Sk., Feb 17 '17 at 14:47

score 1 · Answer 1 · answered Feb 14 '17 at 22:01

No need for jQuery. Try something simpler.

I do something similar: code in multiple smaller JS files, but include only a single <script src="/js/all.js"> in my HTML.

On the server I have options whereby I either serve the single / obfuscated JS, or I serve something like:

=== all.js ===
(function() {
    'use strict';
    var a = [
       'file1',
       'utils',
       'main',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/js/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

As you can see, HTML loads all.js, which executes: It writes into the DOM all of the other script files I want.

This means when I'm debugging, I'm still loading the files individually (so breakpoints are easy). If I want to add a new JS file, I just edit my all.js.

When I'm not debugging, my server sends a single all.js which is (essentially) a concatenation of the individual files. (it's easy: given the structure of my all.js a simple regex can pull out all of the individual files & then I can push them through closure compiler.)

@Case Yes. "file1", "utils", etc. are all my JS files. Also, as I have a local version of jquery.placeholder, I include it here as well. In my case, since all the JS files are in the same location, `var a[]` is only the filename without the full path or ".js" extension, which are both added in the `for` loop. — pbuck, Feb 15 '17 at 00:33

score 1 · Answer 2 · answered Feb 18 '17 at 10:42

You can do something like this.

Create a text file called include-js.txt.
In include-js.txt add a document.write ('') and include all js files in it using tag.
Now in HTML file include this txt document using tag.

For example:

include-js.txt file:

document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

HTML file:

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>

score 0 · Answer 3 · answered Feb 16 '17 at 04:41

0

$(function()
{
     var js = ["file1.js", "file2.js"];
     var load = [];

     for(script in js)
     {
         load.push("<script type="text/javascript" src=" + script + "></script>");
     }

     return load.join(" ");
});

answered Feb 16 '17 at 04:41

George

26
5

score 0 · Answer 4 · edited May 23 '17 at 11:46

If I understood your question properly, you want main.js to execute only after all files have been included? Why don't you run main.js from the includes.js file instead? Taking from this answer at stackoverflow, we could do something like the following in the includes file:

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}
getScripts(["script1.js", "script2.js"], function () {
    // now load the main.js file since all scripts have loaded
    getScripts(["main.js"], function () {
        // do something
        // you have access to all included js files
    });
});

May be you can rename the includes.js file to init.js and add only this file to your html?

Note: Just as a side note, it is probably faster to put all js files in one file and add it to html. More files mean more calls to the server. Unless you are working with a dynamic environment where different pages need different js files, please dump all js into one file. Also you could minify this file to make it even faster.

Create an includes file jQuery

4 Answers4