Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite

Possible Duplicate:
Include JavaScript file inside JavaScript file?

I am looking for semething that can include JavaScript file inside another JavaScript file. Something that would have the same value as @import in CSS. Is-it possible ? Thx.

share|improve this question
1  
View this answer: stackoverflow.com/questions/950087/… – Frankline Dec 13 '12 at 9:48
add comment (requires an account with 50 reputation)

marked as duplicate by Yoshi, Jan Dvorak, Quentin, Linger, AlphaMale Dec 13 '12 at 14:19

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

4 Answers

up vote 3 down vote accepted

There are basically 3 common approaches to cope with your problem.

1) The typical approach for this is to append a script to the head, like this:

   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'helper.js';
   head.appendChild(script);

2) Alternatively, there are script loaders like jQuery's .getScript (see here: http://api.jquery.com/jQuery.getScript/) - based on ajax.

$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log(jqxhr.status); //200
   console.log('Load was performed.');
});

3) A third way is to use asynchronous script loaders like requirejs, so you will end up using this:

require(["myscript.js"], function onload(script) { ... } , function onerror(script) { ... });

Generally speaking, the people at requirejs have solved lots of problems (cross browser stuff) for you, so this might be the best way to go.

Update

An other way came to my mind, which is so nasty that I forgot it first:

document.write("<script src='script.js'><\/script>");

Just mentioned it for the sake of completeness.

share|improve this answer
This is not what the OP is looking for. – Gordon Freeman Dec 13 '12 at 9:51
@Ian: what is he looking for? The answer (head.appendChild method) is almost same as yours. – Salman A Dec 13 '12 at 9:52
@IanAtkin So you are mentioning jQuery $.getScript like I do, what's the problem here? – David Müller Dec 13 '12 at 9:53
He wants to include JS in JS. – Gordon Freeman Dec 13 '12 at 9:53
@DavidMüller None at all, now that you've enhanced your original answer with the magic of edit. – Gordon Freeman Dec 13 '12 at 9:54
show 4 more commentsadd comment (requires an account with 50 reputation)
up vote 0 down vote

You can use RequireJS (requirejs.org).

share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

jQuery...

$.getScript("something.inc.js", function(){

   // function and variables can now be accessed from the included file

});
share|improve this answer
add comment (requires an account with 50 reputation)
up vote 0 down vote

I feel this question deserves some open mindedness, so rather than just listing some answers, I have added some insight and considerations for issues which may arise relating to this, so please note, I know this may not be exactly what is being asked, but, hopefully goes above and beyond the call of duty.

I guess you can look at this question from two perspectives.

1. From a development perspective:

Say for example you are developing a JavaScript based application (web or otherwise), and you have several script files. You may want to "include" these files (like "using" in .NET or "import" in java), so that you can see the prototypes and objects you have created in other files and their behavior, as you write your code. Unfortunately, JavaScript does not support such a feature, however some of this can be achieved by good JavaScript editors.

WebStorm by JetBrains provides various mechanisms for being able to see prototypes and objects from different scripts across a project, and in my opinion, WebStorm is an exceptionally good editor, which provides good intellisense, multi-script development, code validation etc...and comes at a very reasonable price.

Visual Studio has also come a long way in this field. The intellisense has improved vastly over the past couple of versions, and you can use something called VSDoc, which you can "include" in your script file to provide documentation regarding prototypes and objects in other JavaScript files.

Here is an example of using VSDoc in a Visual Studio JavaScript file.

/// <reference path="foo.js" />
/// <reference path="bar.js" />
/// <reference path="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1-vsdoc.js" />

2. From a release & run perspective:

Now you get to the point that you want to release & run your application. VSDoc no longer works because this is something that is implemented in Visual Studio, and is not supported by JavaScript implementations. Technically there would be no point in supporting such a feature as VSDoc only documents what a JavaScript file can do. It does not handle anything to do with the implementation of the script. Equally, all of the "helping hand" functionality you get in WebStorm no longer works as it's implemented as part of the WebStorm IDE, not as a JavaScript standard.

So, when it comes to releasing and running your JavaScript, you have the following options (which have already been pointed out. I'm just adding them for the sake of completeness)

  • You can append a script to the head tag of a HTML document (this does not work in browser-less JavaScript applications as there is no HTML)

  • You can use jQuery's $.getScript function

  • You can use RequireJS

  • You can use the document.write function to append a script tag containing your JavaScript file (this does not work in browser-less JavaScript applications as there is no HTML)

Unfortunately, as I have already pointed out, the idea of referencing in JavaScript is currently un-implemented (and would certainly be a nice feature in ECMAScript-6 or above)! These workarounds seem to be the best solutions given the lack of standardized functionality!

Considerations:

If you are writing large JavaScript based applications, you might want to consider using Dart, TypeScript or CoffeeScript, all of which are super-sets of JavaScript. Dart and TypeScript are very new to the development scene, and provide things like classes and type inference, both of which are lacking in current JavaScript implementations. The beauty of these languages is that they compile to pure JavaScript, so you can still run your application on a JavaScript engine.

share|improve this answer
add comment (requires an account with 50 reputation)

Not the answer you're looking for? Browse other questions tagged or ask your own question.