27

我正在阅读 Mozilla 的 Javascript指南当他们将 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;
4

3 回答 3

21

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

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

于 2012-10-28T02:05:15.777 回答
8

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

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

于 2012-10-28T02:10:21.180 回答
3

对于网站或游戏等中小型项目，本机命名空间和构造函数工作得很好。当加载顺序太复杂而无法在没有某种自动加载的情况下处理时，它们是一个糟糕的选择。

索引.html：

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

经理.js：

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

员工.js：

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

请注意，员工构造函数中的属性对经理是可见的。这个new词标志着一个构造函数。这也可以在没有构造函数的情况下通过返回具有属性的对象而不是如上所示的函数来实现。

于 2016-05-17T00:14:04.720 回答