问将javascript拆分成几个文件

EN

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

以前的做法是创建一个名称空间对象，比如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。请注意，编译部分几乎可以与监视器无缝连接。

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

// 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都可以访问在其他地方定义的任何变量，那么就很难知道会发生什么。

看一看名称空间：

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

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