javascript - 将 javascript 拆分为多个文件

Question

我有一些 javascript 代码，基本上是

$( document ).ready(function() {
    // Global variable definitions
    // Bunch of functions depending on variables
});

有没有办法让我将这些函数分成几个文件，即使它们大多相互依赖？

我正在创建一个 html5 游戏，我想分离很多代码，例如我希望将用于绘制对象的代码放在特定文件中，用于更新游戏状态的代码放在另一个文件中等等所以我仍然可以访问所有全局变量。

有没有一种方法可以做到这一点，而不需要很多麻烦或重写所有代码？

Answer 1

很多人都在为此苦苦挣扎，就像您现在所做的那样。

旧的方法是使用命名空间对象，例如 MYAPP。这样，唯一的全局变量是 MYAPP，您可以将所有函数/变量放在上面，如下所示:

文件1.js

(function() {
    var MYAPP = MYAPP || {};

    MYAPP.func = function() { console.log(1); };
}());

文件2.js

(function() {
    var MYAPP = MYAPP || {};

    MYAPP.func(); // 1
}());

浏览器端 JavaScript 的主要问题是它没有像其他服务器端语言那样具有“include”或“require”。这使得很难在您想要的地方“包含”JS 文件(及其函数/变量)。

目前，人们思考并主要通过两种方式解决这个问题:

• AMD方式:异步模块定义，允许您异步加载其他JS文件，从而具有某种浏览器端“包含”。这种库最好的例子是 require.js 。异步加载有利于开发目的，但出于性能问题必须预编译生产代码。
• CommonJS方式:使用node.js方式，同步请求一个模块，并使用module.exports对象定义模块。然而，在浏览器上使用代码之前，它需要编译部分。这种库最好的例子是 browserify 。请注意，编译部分可以通过观察者几乎无缝进行。