Question

我有一些javascript代码基本上是

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

我有没有办法将这些功能分成几个文件，即使它们大部分都是相互依赖的？

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

有没有办法在没有麻烦或重写所有代码的情况下做到这一点？

Answer 1

很多人都在努力解决这个问题，就像你现在正在做的那样。

旧方法是拥有一个名称空间对象，如MYAPP。这样，唯一的全局变量是MYAPP，并且您将所有函数/变量放在其上，如下所示：

file1.js

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

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

file2.js

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

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

浏览器端javascript的主要问题是它没有“include”或“require”，就像其他服务器端语言一样。这使得很难在你想要的地方“包含”一个JS文件（以及它的函数/变量）。

如今，人们已经考虑过这个问题并主要通过两种方式解决问题：

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

Answer 2

如果您真的需要从任何地方访问这些全局变量，仍然有很多方法可以模块化您的代码。这是一个：

// file 1
(function(){
    myapp = myapp || {};
    myapp.myvar = ...;
    myapp.myfunc = function(){...};
})();

// file 2
(function(){
    myapp = myapp || {};
    myaapp.myothervar = ...
    myapp.myotherfunc = function(){...};
    myapp.start = function(){...};
    }
})();

// last file

$(myapp.start);

但你显然必须稍微重构你的代码。

变体是定义子模块，因此“全局变量”不太全局。如果你没有暴露太多，通常会更容易管理：如果你有20个文件，任何文件的任何LOC都可以访问其他地方定义的任何变量，那么知道会发生什么事情会有点难以理解。

Answer 3

看一下命名空间：

http://addyosmani.com/blog/essential-js-namespacing/

http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

命名空间是module pattern的概念。

通过对代码结构使用分层方法，您可以从抽象对象移动到更具体的对象来构建代码。通常你会从一个总体对象开始。

var JSApp = JSApp || {};
JSApp.someMethod = function() {};
JSApp.someProperty = "foo";
JSApp.someObject = {
    internalStuff: "bar"
};
JSApp.implement = function() {
    this.someMethod();
};

在另一个档案中：

JSApp.someFactory = function() {
    //JSApp is the common namespace.
};

建立像这样的总体结构允许单个全局。现在，您可以通过将代码添加到JSApp对象，将代码分解为多个模块（不同）文件。

您需要做的就是在$(document).ready()回调中拨打您需要的任何内容。

$(document).ready(function() {
    JSApp.implement();
});

当然，在你将所有对象分配到命名空间之前，应该执行一些检查，即使你认为它应该在那里。

将javascript分成几个文件

3 个答案: