如何将我的 JavaScript 代码分成多个文件？答案

【问题标题】：How can I breake my javaScript code into multiple files?如何将我的 JavaScript 代码分成多个文件？
【发布时间】：2012-09-02 11:52:37
【问题描述】：

我的应用程序使用这个主对象，正如您所见，大部分工作都是在这个方法中完成的。问题是如果我想把它全部写在一个文件中，这个对象会变得太大。而且代码很难调试。有什么方法可以用来将此对象拆分为多个文件（例如一个文件中的每个函数）？我还希望能够从这些函数中访问和更改 displayArray、userOptions 和查询变量。
任何形式的建议表示赞赏。谢谢:)

application = {
    displayArray : new Array(),
    userOptions : new Array(),
    query : '', 
    status : false,

    initilize : function () {
        //its going to initialize displayArray, userOptions and status.
    },

    loadOptions : function () {
        //this function builds userOptions array
    },

    JSONConverter : function () {
      //this function uses query to builds displayArray  
    },

    display : function () {
       //this function will use displayArray to build HTML elements on page
    },

};

【问题讨论】：

标签： javascript oop scope

【解决方案1】：

例如：

 // file: application.js
(function (window, undefined) {
  var application = {
     // ...
  };
  window['application'] = application;
}(window));

// file: application-module1.js
(function (application, window, undefined) {
  var module_foo = {
     // ...
  };
  application['module_foo'] = module_foo;
}(application, window));

// file: application-module2.js
(function (application, window, undefined) {
  var module_bar = {
     // ...
  };
  application['module_bar'] = module_bar;
}(application, window));

【讨论】：

【解决方案2】：

你可以！编写几个 .js 脚本，然后将它们嵌入到 html 文件中，如下所示：

<head>
    <script type="text/javascript" src="script1.js"></script>
    <script type="text/javascript" src="script2.js"></script>
</head>

This 是一个很好的例子。 (source)

【讨论】：

【解决方案3】：

abstract.js

function abstractClass(construct_options){{

}

someObject.js

someObject.prototype = new abstractClass();
someObject.prototype.foo = function(){


}

otherObject.js

otherObject.prototype = new abstractClass();
otherObject.prototype.toe = function(){


}

你还可以这样做：

var a = new someObject();
var b = new otherObject();

【讨论】：

【解决方案4】：

您可以将所有函数移动到单独的文件中，并将它们添加到应用程序的原型中。

文件初始化.js：

function initialize () {
    this.displayArray =  new Array();
}

文件 initilize.js：

function() Application{
    this.userOptions = new Array();
    this.query = '';
    this.status = false;
    this.initialize();
}

Application.prototype.initialize = initialize;

此解决方案将使用外部文件中的所有功能污染您的全局名称空间。因此，如果它是一个更大的项目，您应该开始使用 AMD 解决方案，例如 requirejs:

文件初始化.js：

define(function () {
    return function () {
        this.displayArray =  new Array();
    }
})

文件 initilize.js：

define(['initialize'], function (initialize) {
    function() Application{
        this.userOptions = new Array();
        this.query = '';
        this.status = false;
        this.initialize();
    }

    Application.prototype.initialize = initialize;
    return Application;
})

【讨论】：

非常感谢，你帮了我很多，我喜欢使用名称空间的想法。

【解决方案5】：

您可以在一个文件中定义应用程序“类”，然后使用原型将每个函数添加到单独的文件中，例如

var application = function () { };

application.prototype.method1 = function (arg1) {
window.alert(arg1);
}

var a = new application();
a.method1('Hello, World!');

【讨论】：