Question

现在我才考虑使用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的依赖关系）

我该如何解决这个问题？

Answer 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.
});

RequireJS管理大型模块

1 个答案: