将大型javascript文件转换为多个文件

我的问题：如何最好地将一个大型的、单一的javascript对象文本分解成多个离散的文件？

我有一个javascript文件，它由一个对象文本和许多附加方法组成。它越来越长，我想把它分成更小的部分，更容易管理

我听说我可以使用AMD或CommonJS来组织事情，我听说我应该使用RequireJS，我应该使用Webpack或Browserify，我应该使用任何其他工具/技术。在看了这些东西之后，我对什么是最好的方法感到困惑

你会怎么做？如何将一个由数千行javascript（由“搜索”、“登录”和“用户”等函数组成）组成的单一对象文本重新组织为多个文件，让开发人员更容易处理这些文件？单一的、巨大的文件正变得越来越难以处理，而且选项似乎多种多样且不明确。这是一个相当简单的应用程序，使用vanillaJS，一个小jQuery，位于Grails后端之上

我认为这个问题很清楚，但如果您真的需要代码，这里有一个我所说的对象文本类型的示例：

var myObj = {

    foo: "one",
    bar: "two",
    baz: false,
    deez: -1,

    login: function() {
        // lots and lots of code
    },

    user: function() {
        // lots and lots of code
    },

    beers: function() {
        // lots and lots of code
    },

    varieties: function() {
        // lots and lots of code
    }

    init: function() {
        myObj.login.init();
        myObj.user.init();
        // lots of jQuery document.ready stuff
    }
}

myObj.init();

---

虽然有一些自动化的方法可以做到这一点，但我确信，我也对这个问题的答案很感兴趣，我建议只需进入并将方法定义移动到不同的文件中，然后正常调用函数

method（param）并将文件链接到html页面

这将有多种用途，包括您希望实现的将代码分解为更易于管理的模块的用途。这些目的中还包括这样一个事实，即不需要为对象的每个实例将这些定义写入内存，而只需要定义一次对象，并在需要时引用它

抱歉，如果没有看到JavaScript文件，我将无法提供更多帮助

如果在实现这一目标时需要更多指导，您可以参考

您不必在对象或类中定义所有方法，最好将这些方法模块化为不同的文件，并使用
标记将它们全部包含在html/php页面中

以下是我使用的模式：


如果可能，将概念分解为它们自己的子对象
不管是否有子对象，首先声明任何未分解的属性，然后根据需要添加到其中
如果文件跨越多个文件，并且不希望每个文件使用子对象，请使用临时对象来保存其他特性，然后扩展原始对象

样本：

var myObj = {
  foo: "one",
  bar: "two",
  baz: false,
  deez: -1
}

myObj.login = function() {
    // lots and lots of code
};

myObj.user = function() {
    // lots and lots of code
};

myObj.drinks = {
  beer: function() {},
  wine: function() {},
  sunnyDelight: {
    drinkIt: function() {},
    burp: function() {}
  }
};

myObj.init = function() {
  myObj.login.init();
  myObj.user.init();
  // lots of jQuery document.ready stuff
}

myObj.init();

请注意，“饮料”本身就是一个概念，包含多种属性和方法。您的概念可能类似于“ui”、“utils”、“data”或所包含属性的角色

对于我提出的扩展点，这里也不需要太多代码

// "utilities.js"
var myObj = {
  // a bunch of properties and/or methods
};

myObj.moreStuff = "more stuff!";

在另一个文件中，您有两个选择。在不覆盖对象的情况下添加到对象（需要使用点表示法）：

如果你细分你的概念，上述方法尤其有效。。。因为您仍然可以拥有相当完整的对象，这些对象不会践踏myObj的其余部分。但是，您可能想直接添加到myObj，而不需要践踏和细分关注点：

// "ui.js"
var myObj = myObj || {};

// ultimately, the CONTENTS of this object get merged into the existing myObj
var myObjSupplement = {
  header: function() {},
  dialogBox: function() {},
  heroBiscuit: "A yummy biscuit made from heroes!"
}

// using jQuery here, but it's not the only way to extend an object
$.extend(myObj, myObjSupplement)

我看不出有太多机会使用上面的方法，因为myObjSupplement现在位于全局名称空间中，并且违背了限制添加到全局名称空间的目的，但是如果您需要，它就在那里

[编辑以添加：]

正如我所想，它可能不会“不说就说”——但如果您有一个构建过程，可以将它们连接到一个适合缩小的文件中，那么将它们划分为许多不同的文件可能会效果最好。您不希望有100个甚至6个单独的文件，每个文件都需要一个同步HTTP调用来获取

AMD/RequireJS等技术有更现代、可能更好的方法。。。但是，如果问题是“如何将一个对象文字分割成几个文件”，我给出的上述答案是我可以支持的。
您将看到许多解决问题的建议和方法，我不能说它们中有任何一个是错误的，它们只是不同而已

我的方法是使用ES6及其本机模块支持

为了实现这一点，我总是使用我自己的名为的样板文件来编译模块，帮助您进行开发、单元测试磁带、CSS预处理，并编译一个兼容的ES5包，您可以轻松地在应用程序中使用它

现在，使用ES6模块的方法与命名导出类似：

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

或使用默认导出：

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

您可以在
中了解有关ES6模块的更多信息，需要注意的一件事是，如果您将代码分散在多个文件中，请确保在加载所有需要的文件后调用任何init方法。在OPs示例中，myObject.user.init（）由myObject.init（）调用，因此您需要确保在最后的init（）调用之前加载包含myObject.user.init（）的任何文件。