如何将我的javascript代码拆分成单独的文件？

I'm reading the Javascript Guide from Mozilla And when they contrasted JS to Java , It got me thinking, Java code is easily split up with each class in his own file. after futher search , I understand that the same can be accomplished in JS with namespacing and module pattern - I messed around with it but got very confused ( especially with calling a constructor declared in File1.js into File2.js )

我正在阅读Mozilla的Javascript指南当他们将JS与Java对比时，我想到了，Java代码很容易与他自己的文件中的每个类分开。在进一步搜索之后，我明白在JS中使用命名空间和模块模式可以实现同样的效果 - 我搞砸了它但是非常困惑（特别是调用File1.js中声明的构造函数到File2.js中）

so here is the hierarchy: 如何将我的javascript代码拆分成单独的文件？

所以这是层次结构：

But i just can't figure out how to properly make it works

但我无法弄清楚如何正确地使它工作

how do i simply go from

我该怎么做才干

//employe.js
function Employee () {
  this.name = "";
  this.dept = "general";
}

function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

function WorkerBee () {
  this.projects = [];
}
WorkerBee.prototype = new Employee;

function SalesPerson () {
  this.dept = "sales";
  this.quota = 100;
}
SalesPerson.prototype = new WorkerBee;

to this :

对此：

 // employe.js
function Employee () {
  this.name = "";
  this.dept = "general";
}

 // Manager.js   
function Manager () {
  this.reports = [];
}
Manager.prototype = new Employee;

 // WorkerBee.js     
function WorkerBee () {
  this.projects = [];
}
WorkerBee.prototype = new Employee;

 // SalesPerson.js      
function SalesPerson () {
 this.dept = "sales";
 this.quota = 100; 
 }
SalesPerson.prototype = new WorkerBee;

3 个解决方案

#1

You should have one global namespacing object which every module has to access and write to. Modify your files like so:

您应该有一个全局命名空间对象，每个模块都必须访问和写入。像这样修改你的文件：

// employe.js

window.myNameSpace = window.myNameSpace || { };

myNameSpace.Employee = function() {
    this.name = "";
    this.dept = "general";
};

and Manager.js could look like

和Manager.js看起来像

// Manager.js

window.myNameSpace = window.myNameSpace || { };

myNameSpace.Manager = function() {
    this.reports = [];
}
myNameSpace.Manager.prototype = new myNameSpace.Employee;

This is of course a very simplified example. Because the order of loading files and dependencies is not child-play. There are some good librarys and patterns available, I recommend you looking at requireJS and AMD or CommonJS module patterns. http://requirejs.org/

这当然是一个非常简单的例子。因为加载文件和依赖项的顺序不是儿童游戏。有一些很好的库和模式可用，我建议你看看requireJS和AMD或CommonJS模块模式。 http://requirejs.org/

#2

You don't need to do anything differently. Just include the script files and they work as if it was a single file.

您不需要做任何不同的事情。只需包含脚本文件，它们就像是单个文件一样工作。

Javascript doesn't have file scope. Once the code is parsed it doesn't matter where the code came from.

Javascript没有文件范围。解析代码后，代码的来源无关紧要。

#3

For small and medium projects like a website or game, the native namespacing and constructors work very well. They are a poor choice when the loading order is too complex to handle without some sort of autoloading.

对于像网站或游戏这样的中小型项目，本机命名空间和构造函数运行良好。如果加载顺序过于复杂而无法进行某种自动加载，则它们是一个糟糕的选择。

index.html:

index.html的：

<script src="Employee.js"></script>
<script src="Manager.js"></script>

Manager.js:

Manager.js：

var Manager = function() {
    var employee1 = new window.Employee(this);
    var employee2 = new window.Employee(this);
};

Employee.js:

Employee.js：

var Employee = function(boss) {
    // work stuff here
    this.wage = 5;
};

Note, properties inside the employee constructor function are visible to the manager. The new word signals a constructor. This is also possible without a constructor by return public properties.

请注意，员工构造函数内的属性对经理可见。新词表示构造函数。通过返回公共属性，没有构造函数也可以这样做。

#1