How to split JavaScript code into multiple files and use them without including them via script tag in HTML?

Question

I am making use of constructors (classes) extensively and would like each constructor to be in a separate file (something like Java). Suppose I have constructors say Class1, Class2, ... Class10 and I only want to use Class1 and Class5 I need to use script tags to include Class1.js and Class2.js into the HTML page. Later if I also need to use Class3 and Class6 I again need to go to the HTML page and add script tags for them. Maintenance with this approach is too poor.

Is there something in JavaScript similar to include directive of C? If not, is there a way to emulate this behavior?

"without including them via script tag in HTML" - Not possible (XMLHttpRequest?) — Shaz
– Shaz, Commented Jun 3, 2011 at 12:12
@Shaz I mean I only include one file, say main.js, and it loads all the required ones. — Cracker
– Cracker, Commented Jun 3, 2011 at 12:14

Milimetric · Accepted Answer · 2011-06-03 12:17:26Z

2

You can use jQuery.getScript:

http://api.jquery.com/jQuery.getScript

Or any of the many javascript loaders like YUI, JSLoader, etc. See comparison here:

https://spreadsheets.google.com/lv?key=tDdcrv9wNQRCNCRCflWxhYQ

answered Jun 3, 2011 at 12:17

Milimetric

13.5k4 gold badges49 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alxandr Over a year ago

+1 Using a good loader enables you to require the resources up ahead, and KNOW when it is available.

aorcsik · Accepted Answer · 2011-06-03 12:13:52Z

1

You can use something like this:

jsimport = function(url) {
    var _head = document.getElementsByTagName("head")[0];         
    var _script = document.createElement('script');
    _script.type = 'text/javascript';
    _script.src = url;
    _head.appendChild(_script);
}

then use it in your code like:

jsimport("example.class.js");

Be careful to use this when the head is already in the DOM, else it won't work.

answered Jun 3, 2011 at 12:13

aorcsik

15.6k5 gold badges42 silver badges50 bronze badges

Comments

Aaron Digulla · Accepted Answer · 2011-06-03 12:16:13Z

1

Yes: You can create script tags from JavaScript and load required classes on demand.

See here for a couple of solutions: http://ntt.cc/2008/02/10/4-ways-to-dynamically-load-external-javascriptwith-source.html

With careful use of id attributes or a global variable that contains "already loaded" scripts, it should be possible to develop a dependency resolution framework for JavaScript like Maven or OSGi for Java.

answered Jun 3, 2011 at 12:16

Aaron Digulla

330k111 gold badges626 silver badges840 bronze badges

Comments

Shaz · Accepted Answer · 2011-06-03 12:37:57Z

1

When we are talking about JavaScript, I feel it is better to include one file that includes everything you need instead of requesting a new file every time you need something that you don't currently have access to.

Each time you send out for another file, the browser will do many things. It checks if the requested file can in fact be found by sending an HTTPRequest, and if the browser has already seen this, is it cached and unchanged?

What you are wanting to do is not in the spirit of JavaScript. Doing what you are explaining will produce addition load times, and you wouldn't be able to do anything until the file has completely loaded, which creates wait times.

It would be better to use one file for this, include at the inner end of the </body tag (which won't cause the browser to wait until the script is done to load the page), then create one simple function that will execute when the page is completely loaded.

For example:

<html>
     <head></head>
     <body>
          <!-- HTML code here... -->
          <script src="javascript.js"></script>
          <script>
               (function r(f) {
                    /in/.test(document.readyState) ? setTimeout('r(' + f + ')', 9) : f()
               })(function() {
                       // When the page has completey loaded
                       alert("DOM has loaded and is ready!");
               });
          </script>
     </body>
</html>

edited Jun 3, 2011 at 12:37

answered Jun 3, 2011 at 12:30

Shaz

15.9k4 gold badges44 silver badges60 bronze badges

1 Comment

Cracker Over a year ago

I will be using this system in the development environment. When putting the stuff to production, I will combine all files to a single file.

Ma99uS · Accepted Answer · 2011-06-03 12:14:20Z

0

you can include one js file into another js file by doing something like this in the begginig of your js file:

 document.write("<script type='text/javascript' src='another.js'></script>");

answered Jun 3, 2011 at 12:14

Ma99uS

11k8 gold badges36 silver badges43 bronze badges

Comments

bjornd · Accepted Answer · 2011-06-03 12:18:24Z

0

The best approach in your situation is using of compiler of some kind. The greatest one is Google Closure Compiler. This is part of Google Closure Libraty which has structure similar to what you described.

answered Jun 3, 2011 at 12:18

bjornd

23k4 gold badges59 silver badges74 bronze badges

Collectives™ on Stack Overflow

How to split JavaScript code into multiple files and use them without including them via script tag in HTML?

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related