Import a Javascript file into another Javascript file

Question

I'm creating a simple HTML5 JS game, and at the moment my javascript file has reached nearly 1500 lines and it is slowly getting harder and harder to manage with so much more to do, is there a simple way to split some of the script up into "classes" which I mean separate files and then import all the "classes" files into one "main" file?

So for example I have this

File1.js

function pointInRect(pnt_x, pnt_y, rect_x, rect_y, rect_w, rect_h) { if ( (pnt_x >= rect_x) && (pnt_x <= rect_x + rect_w - 1) ) { if ( (pnt_y >= rect_y) && (pnt_y <= rect_y + rect_h - 1) ) {return true;} } return false; }

File2.js

if( pointInRect(1,1,1,1,1,1) == true){ console.log("Yo, there be a collision");}

how do I get file2 import file1 and use that method? If anyone could help me that would be awesome, it would really help me with manage my huge JS file.

Canvas

Nope. You either have to include all the files individually in your HTML markup, or you have to concatenate them on the server side. There are many build tools to do the latter. — Bergi, CommentedAug 14, 2013 at 14:20
Basically you just split your code into multiple files than you reference them in the correct order (based on dependencies) in your html file. Or have a look at requirejs.org/docs/start.html — Nicolae Olariu, CommentedAug 14, 2013 at 14:20
Whatever you write in file 1 would be accessible in file 2 as long as you have written it in a global scope and include file2 after file1. — reggaemahn, CommentedAug 14, 2013 at 14:21

rafaelcastrocouto · Accepted Answer · 2013-08-14 14:20:18Z

4

Just add the files with the script tag in the html, they will be executed in order.

<script type="text/javascript" src="file1.js"> <script type="text/javascript" src="file2.js">

answered Aug 14, 2013 at 14:20

rafaelcastrocouto

12.2k3 gold badges41 silver badges66 bronze badges

If it is that easy I will be annoyed :D, I will check it soon
– Canvas
CommentedAug 14, 2013 at 14:22
be also careful with what @Jeevan Jose said above
– Nicolae Olariu
CommentedAug 14, 2013 at 14:23
Yep it works, oohh I see, So i should load all of the assets before the main class you are saying. Awesome cheers this will really help me out
– Canvas
CommentedAug 14, 2013 at 14:24
This is the easiest way to do it, but you might also consider compiling and compressing all your scripts into a simple minified one to increase web performance. Here is a description of why this is important and how a tool like closure compiler can help. developers.google.com/speed/articles/compressing-javascript
– TimHayes
CommentedAug 14, 2013 at 15:27

Add a comment |

kaliatech · Accepted Answer · 2013-08-14 14:33:07Z

Others have pointed out how you break code in to multiple files. If you want to organize your code within those files, use scoped variables rather than global, and are familiar with classes/objects, then you might try something like this:

//class1.js MYNS = MYNS | {}; MYNS.Class1 = {}; MYNS.Class1.prototype.pointInRect = function(){ //magic here };

//class2.js MYNS = MYNS | {}; MYNS.Class2 = {}; MYNS.Class2.prototype.anotherMethod = function(){ //more magic };

//main.html <script type="text/javascript" src="class1.js"> <script type="text/javascript" src="class2.js"> var class1 = new MyNS.Class1(); var class2 = new MyNS.Class2(); class1.pointInRect (); class2.anotherMethod ();

But keep in mind that JavaScript is not OO in the traditional sense, and these are not true classes. Rather, this is a way of organizing JS code in to something that resembles classes and objects. If you try to do things resembling inheritance, etc., then the required complexity and level of understanding goes up very quickly.

Collectives™ on Stack Overflow

Import a Javascript file into another Javascript file

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related