javascript - 构建 Javascript 模块

Question

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

每个模块检查是否定义了库命名空间，然后将自己应用于它。

这是代码:https://github.com/sgoran/micro

例如，Tpl 组件将自身绑定(bind)到 Micro 库(主库)

if(typeof Micro === "function" && Micro.prototype.isMicro){
      Micro['Tpl'] = Tpl;

然后我用构造函数调用库

var micro = new Micro(properties);

问题是如果我想创建另一个实例...依赖项会在内部发生冲突

var micro2 = new Micro(properties);

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

任何人都可以提出一种将多个模块构建为一个模块的好方法，比如将它们沙盒化吗？或者一些不使用 webpack、requireJs 等的最佳实践和模式。

Answer 1

使用module pattern 原样。

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

// Module2.js
var Module2 (function(exports, Module1) {
    var micro = new Module1.Micro();
})(exports, Module1); 

// Module3.js
var Module3 (function(exports, Module1) {
    // No collission here because Module3 creates an isolated scope
    // like Module2 already does too!
    var micro = new Module1.Micro();
})(exports, Module1); 

如果不想污染全局范围...

...您可以实现子模块。您将无法完全避免全局范围污染，但您将限制它以声明顶级模块:

// 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 || {});

顺便说一句，继续前进并使用像SystemJS这样的解决方案配置您的模块并避免依赖 hell (否则，您需要手动添加脚本文件并按特定顺序让您的依赖模块可用...)。