1

我有一些基本上是

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

我有什么办法可以将这些函数分成几个文件，即使它们大多都相互依赖？

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

有没有办法做到这一点而不需要很多麻烦或重写所有代码？

4

3 回答 3

7

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

这样做的旧方法是拥有一个命名空间对象，例如MYAPP. 这样，唯一的全局变量是MYAPP，你把所有的函数/变量放在上面，像这样：

文件1.js

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

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

文件2.js

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

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

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

现在人们主要从2个方面思考和解决这个问题：

  • AMD 方式：异步模块定义，允许您异步加载其他 JS 文件，从而具有某种浏览器端“包含”。这种库最好的例子是require.js。异步加载有利于开发目的，但生产代码必须为性能问题进行预编译。
  • CommonJS 方式：使用 node.js 方式，同步 require 一个模块，使用module.exports对象定义一个模块。但是，在您在浏览器上使用代码之前，它需要一个编译部分。这种库最好的例子是browserify。请注意，编译部分几乎可以与观察者无缝连接。
于 2013-05-25T13:22:12.187 回答
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 都可以访问在其他地方定义的任何变量，那么很难知道会发生什么。

于 2013-05-25T13:13:15.010 回答
1

看一下命名空间：

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

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

命名空间是模块模式的一个概念。

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

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();
});

诚然，在您随意将所有对象分配给命名空间之前，应该实施一些检查，即使您认为它应该在那里。

于 2013-05-25T13:15:25.533 回答