RequireJS 管理大型模块答案

【问题标题】：RequireJS managing large modulesRequireJS 管理大型模块
【发布时间】：2017-04-12 08:43:08
【问题描述】：

直到现在我才考虑使用 RequireJS 和 AMD 模块。到目前为止 - 所有的事情都是通过几个全局变量和自调用函数来管理的。

例如，我的模块的外观：

function HugeModule() {
    //usage = new HugeModule();  
};
HugeModule.prototype.functionX = function() {
    //Lets say - around 50 functions for HugeModule prototype
};

HugeModule.SubModule = function() {
    //usage = new HugeModule.SubModule();
    //And here could be multiple subModules like this
};
HugeModule.SubModule.prototype.functionX = function() {
    //Lets say - around 20 functions for HugeModule.SubModule prototype
};

现在我会这样写，我会把它分成至少 4 个文件：

//HugeModule.js
var HugeModule = (function() {
    function HugeModule() {
        //usage = new HugeModule();  
    };
    return HugeModule;
})();
//HugeModule.somePrototypeFunctions.js
(function() {
    HugeModule.prototype.functionX = function() {
        //Lets say - around 50 functions for HugeModule prototype
    };
})();
//HugeModule.SubModule.js
(function() {
    HugeModule.SubModule = function() {
        //usage = new HugeModule.SubModule();
        //And here could be multiple subModules like this
    };
})();
//HugeModule.SubModule.someOtherPrototypeFunctions.js
(function() {    
    HugeModule.SubModule.prototype.functionX = function() {
        //Lets say - around 20 functions for HugeModule.SubModule prototype
    };
})();

我真的很想用 AMD 模块和 RequireJS 编写这些模块，我对它们应该如何编写有一个基本的想法，但我不确定 - 我将如何在多个模块之间拆分它们。

我可以这样写：

define([], function() {
    function HugeModule() {
        //usage = new HugeModule();  
    };
    HugeModule.prototype.functionX = function() {
        //Lets say - around 50 functions for HugeModule prototype
    };
    return HugeModule;
});

但我想在多个文件之间拆分它。我不希望使用连接文件的构建工具。

我想要的是一个必需的模块 - HugeModule，它将解决 HugeModule.somePrototypeFunctions 和 HugeModule.SubModule 的所有依赖关系（这将解决 HugeModule.SubModule.someOtherPrototypeFunctions 的依赖关系）

我应该如何解决这个问题？

【问题讨论】：

标签： javascript requirejs amd

【解决方案1】：

首先要注意一个重要的问题：您尝试做的事情并不适合 ES6 类的工作方式。如果您曾经编写 ES6 类或使用类语法类似于 ES6 的语言（例如，TypeScript 具有 ES6 + 类型注释的类），您将不得不解决类语法或遇到转译问题。考虑将您的HugeModule 重构为多个较小的类以避免这些问题。（有关 TypeScript 上下文中问题的讨论，请参阅 here。）

如果上述警告不是问题，您可以通过如下组织代码来实现您的目标。我已经成功使用这种模式很多年了。

HugeModule.js 只是组合了类的各个部分，并为其余代码提供了一个外观：

define(["./HugeModuleCore", "./HugeModuleA", "./HugeModuleB"], function (HugeModuleCore) {
    return HugeModuleCore;
});

HugeModuleCore.js 创建类并在其上创建一些“核心”方法：

define([], function () {
    function HugeModule() {
    };

    HugeModule.prototype.someCoreFunction = function() {
    };

    return HugeModule;
});

HugeModuleA.js 向核心添加了一些方法类别：

define(["./HugeModuleCore"], function (HugeModule) {
    HugeModule.prototype.someFunction = function() {
    };

    // You don't really need to return anything here.
});

HugeModuleB.js 向核心添加了一些其他类别的方法：

define(["./HugeModuleCore"], function (HugeModule) {
    HugeModule.prototype.someOtherFunction = function() {
    };

    // You don't really need to return anything here.
});

【讨论】：