将Javascript文件导入另一个Javascript文件

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

Answer 1

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">

Answer 2

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.