如何将我的 javascript 代码拆分为单独的文件？答案

【问题标题】：How can I split my javascript code into separate files?如何将我的 javascript 代码拆分为单独的文件？
【发布时间】：2023-03-13 19:06:01
【问题描述】：

我正在阅读来自 Mozilla 的 Javascript Guide 当他们将 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;

【问题讨论】：

您所要做的就是以正确的顺序包含文件。
@FelixKling：由于代码只声明了构造函数，并没有创建任何东西，因此文件包含的顺序甚至无关紧要。
@Guffa：确实如此，他们正在为原型继承创建一个实例，例如Manager.prototype = new Employee;.
@FelixKling：哦，你是对的。我站得更正了。它们确实需要以正确的顺序包含在内。
如果使用现代的classes，我这样解决了这个问题：stackoverflow.com/a/62142995/1599699

标签： javascript class dependencies hierarchy

【解决方案1】：

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

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

【讨论】：

这很有意义，谢谢 - 我查看了 requireJS，但我不太明白它在这里对我有什么帮助 - 我想我在 require php 样式和 JS 之间感到困惑
我猜你在每个文件中添加了window.myNameSpace = window.myNameSpace || { }; 以避免任何加载错误。对吗？
@zachdyer 我同意。看看 EaseIJS 是怎么做的：github.com/CreateJS/EaselJS/blob/master/src/easeljs/filters/…，它做同样的把戏

【解决方案2】：

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

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

【讨论】：

是的 - 但它是否是好的做法也不方便。你应该提到，这只是因为 global object 是 variable object 对于它自己，因此，所有 var 和 function i> 声明被隐式写入。像这样破坏全局对象仍然是恶业。
@jAndy：是的，你是对的，将标识符保留在全局范围之外是更好的做法，但这根本不需要将代码放在单独的文件中。
@Guffa 我一直在读到我们应该避免“污染”全局范围除了不公开我们不想修改的变量之外还有其他原因吗？
@MimiEAM：是的。当您在一个页面中使用多个脚本库时，如果它们定义的全局标识符越少，它们的标识符冲突的风险就越小。
今天的 JS 类不是这样。

【解决方案3】：

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

index.html:

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

Manager.js：

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

Employee.js：

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

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

【讨论】：