构建Javascript模块

我有一个用于客户端路由和模板加载的小库。 它由几个较小的模块构成，例如Tpl、路由器

每个模块检查库名称空间是否已定义，然后将其自身应用于该名称空间

代码如下：

例如，Tpl组件将自身绑定到微库（主库）

然后我用构造函数调用库

var micro = new Micro(properties);

问题是，如果我想创建另一个实例，依赖关系将在内部发生冲突

var micro2 = new Micro(properties);

对于构建，我使用gulp并将模块连接到一个文件中

有谁能提出一种将多个模块构建为一个模块的好方法，比如沙箱？ 或者一些不使用webpack、requireJs等的最佳实践和模式。

按原样使用

如果你不想污染全球范围。。。 …您可以实现子模块。您将无法完全避免全局范围污染，但您将限制它以声明顶级模块：

// Module1.js
var Module1 = (function(Module1) {
    exports.Micro = function() {};
    exports.Micro.prototype = {
         // Properties...
    };
})(Module1 || {});

// Module2.js
(function(Module1) {
    Module1.Module2 = Module1.Module2 || {};

    exports.Other = function() {

    };

    exports.a = 11;
})(Module1 || {});

---

顺便说一句，继续使用一种解决方案，比如配置模块，避免依赖地狱（否则，您需要手动添加脚本文件，并按照特定顺序添加脚本文件，以使依赖模块可用…）。例如，使用

me.events=Micro.Pubsub

所有实例将共享相同的

Pubsub

实例，这是有问题的，但您可以通过为每个

Micro

实例实例化一个新的

Pubsub

来解决这个问题。可能有更多的共享状态（例如，

document.querySelectorAll（“[hub link]”）

），但我还没有深入研究

一旦您摆脱了

Micro

构造函数中的共享状态，仍然有问题的是使用不同子模块（例如Tpl、Routes）的多个

Micro

实例。这是因为您没有在

Micro

构造函数中使用任何形式的依赖项反转来解析这些子模块

---

但这可能不是问题，因为我怀疑单个应用程序是否会同时使用不同的子模块实现。不过，您可能希望使依赖项显式化，并允许将子模块依赖项注入到

Micro

构造函数中。

在不使用任何额外代码（通过CommonJS或AMD工具）的情况下分割应用程序的一个好方法就是在每个子模块的末尾检查是否存在主模块

如果它不存在，我们可以全局公开模块并单独使用、测试或类似的方法

;(function (window, document){

    function Tpl(props){

    }

    Tpl.prototye = {
      // some methods
    }


    if(typeof Micro === "function" && Micro.prototype.isMicro){
      Micro['Tpl'] = Tpl;
    }
    else if ( typeof module != 'undefined' && module.exports ){
        module.exports = Tpl;
    }else if( typeof define == 'function' && define.amd ){
        define( function () { return Tpl; }); 
    }
    else{
        window.Tpl = Tpl;
    }



}(window, document));

**在主模块内声明**

me.tpl = new Micro.Tpl(props);

---

如果您的业务逻辑是模块化的，并且模块之间有很多依赖关系，那么我建议您使用

CommonJs

体系结构。这是NodeJs使用的体系结构。你熟悉NodeJs吗？是的，我熟悉NodeJs和CommonJS方法。它使用导出和请求。。但我需要使用RequireJS或类似的。。我更喜欢一些定制的解决方案名称空间本身也可以是一个函数，就像OP的设计一样，这并不重要。这并不能回答问题。@plalx可能OP不应该使用名称空间之类的函数。建议OP应该利用模块模式。这是我对OP的问题/担忧的回答。我不确定我的回答是否解决了这个问题。如果我只是回答OP如何期望解决方案的问题，那就太有限了。。。那么，为什么要在StackOverflow中提问呢我现在不想使用SystemJS、Browsify或任何其他工具，即使我知道这样做很容易。目前的目标是学习一些东西，包括我的大脑，而不是立即依赖大量的工具。我喜欢用grunt实现自动化。我可能应该在每次微创建时创建新的依赖项对象，事情应该会顺利进行。@sgora si我已经为您提供了一个普通的解决方案。。System JS只是一个建议，我说这不能回答OP的问题，因为你没有解释为什么他不能有多个

Micro

实例，这是主要的问题。您提出的方法与OP已经在做的方法相同或非常接近，但它无法解决该问题。这完全取决于

Micro

构造函数是如何在内部实现的。

;(function (window, document){

    function Tpl(props){

    }

    Tpl.prototye = {
      // some methods
    }


    if(typeof Micro === "function" && Micro.prototype.isMicro){
      Micro['Tpl'] = Tpl;
    }
    else if ( typeof module != 'undefined' && module.exports ){
        module.exports = Tpl;
    }else if( typeof define == 'function' && define.amd ){
        define( function () { return Tpl; }); 
    }
    else{
        window.Tpl = Tpl;
    }



}(window, document));

me.tpl = new Micro.Tpl(props);