CODEWITHSUNDEEP
jquery
Notsogood13
Notsogood13

Reputation: 109

Create an includes file jQuery

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:

What I already tried:

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.

Upvotes: 2

Views: 598

Answers (4)

Omprakash Arumugam
Omprakash Arumugam

Reputation: 1044

You can do something like this.

  1. Create a text file called include-js.txt.
  2. In include-js.txt add a document.write ('') and include all js files in it using tag.
  3. 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>

Upvotes: 1

pewpewlasers
pewpewlasers

Reputation: 3215

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.

Upvotes: 0

George
George

Reputation: 26

$(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(" ");
});

Upvotes: 0

pbuck
pbuck

Reputation: 4551

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.)

Upvotes: 1

Related Questions