19

Possible Duplicate:
How to include js file in another js file?

Suppose I have a few JavaScript source files: a.js, a1.js, and a2.js. Functions of a.js invoke functions from a1.js and a2.js.

Now I have to declare all these files in my HTML page. I would like to declare only a.js in the HTML and "import/include" a1.js, and a2.js in the a.js source file.

Does it make sense? Can I do that in JavaScript?

ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Michael
  • 10,185
  • 12
  • 59
  • 110
  • 1
    To do that you must use a tool like [require.js](http://requirejs.org/), or concatenate your js files (and minify them in the same move, for exemple using the [closure compiler](https://developers.google.com/closure/compiler/)). You can't specify imports in vanilla javascript. – Denys Séguret Jun 28 '12 at 16:10
  • @devsundar why didn't you ask for close as duplicate ? – Denys Séguret Jun 28 '12 at 16:15
  • @dystroy Thanks for suggestion. Initially i was looking for an option to close. I did it now using the "flag" option. It was not intuitive for me... – 18bytes Jun 28 '12 at 16:18
  • @devsundar sorry, I didn't see you didn't yet have the privilege to cast a vote to close. – Denys Séguret Jun 28 '12 at 16:20

3 Answers3

16

You can't specify imports in vanilla javascript.

So your solutions (excluding heavy server side frameworks) are :

  • simply do the imports

  • concatenate your js files (and minify them in the same move, for exemple using the closure compiler)

  • use a module itool like require.js

As long as you're not experienced, and if your number of files is low (less than 15), I recommend to simply choose the first or second solution. Using a module loader may have side effects you don't want to debug when beginning to learn javascript.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
12

You can import:

<script type="text/javascript"src="a1.js"></script>
<script type="text/javascript"src="a2.js"></script>
<script type="text/javascript"src="a3.js"></script>

if you want to do it directly from the JS, you may use Ajax, this post explains how to: include-javascript-file-inside-javascript-file

Community
  • 1
  • 1
Israelm
  • 1,607
  • 3
  • 23
  • 28
2

You can bundle JavaScript (and also CSS) files together using certain tools to reduce the number of files you must include. This also increases page load performance.

These tools combine multiple JavaScript files into a single JavaScript file (optionally minifying the files as well), and multiple CSS files into a single CSS file. This results in fewer HTTP connections from the browser to the server, so there are fewer things to be fetched serially.

ASP.Net MVC 4 has built-in support for this:

http://theshravan.net/bundling-and-minification-support-in-asp-net-mvc-4/

There are a number of solutions for other environments as well such as Juicer.

If you cannot bundle all resources (perhaps some come from a CDN while others are served locally), you can use a load manager such as require.js.

Eric J.
  • 147,927
  • 63
  • 340
  • 553