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

Question

我正在阅读 Javascript Guide来自 Mozilla 当他们将 JS 与 Java 进行对比时，我开始思考，Java 代码很容易与自己文件中的每个类分开。经过进一步的搜索，我明白在 JS 中可以通过命名空间和模块模式来完成同样的事情 - 我搞乱了它，但感到非常困惑(特别是在将 File1.js 中声明的构造函数调用到 File2.js 中时)

所以这是层次结构:

但我就是不知道如何正确地使其工作

我该如何简单地从

//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;

对此:

 // 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;

Answer 1

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

// employe.js

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

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

和Manager.js可能看起来像

// Manager.js

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

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

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