Javascript模块化布局：如何从一个模块调用另一个模块中定义的函数？

下面是javascript应用程序的模块化布局示例。我想开始在我的工作中使用这种结构。我正在努力弄清楚它是如何工作的，需要了解如何从不同的模块调用在一个模块中定义的函数？这绝对是一种布局大量使用JavaScript的应用程序的下注方式吗

window.MainModule = (function($, win, doc, undefined) {
    var modules = {};

    // -- Create as many modules as you need ...
    modules["alerter"] = (function(){
        var someFunction = function(){ alert('I alert first'); };

        return { 
            init: someFunction
        };
    }());

    modules["alerter2"] = (function(){
        var someFunction = function(){ alert('I alert second'); };

        return { 
            init: someFunction
        };
    }());

    return { 
        init: function(){
            for (var key in modules){
                modules[key].init();
            }
        }
    };
}(jQuery, this, document));

$(window.MainModule.init);

---

为了访问任何内容，它需要在您调用的范围内可用。JS中的“Module”或任何封装方法都是“function”的意思。模块只是一个匿名（未命名）函数。因此，要从函数A内部访问另一个函数B（模块）中定义的元素，它要么必须在全局范围内可用（在浏览器中：窗口对象），要么必须以其他方式获得访问权限，例如通过某个函数调用接收引用。YUI3([http://developer.yahoo.com/yui/3/对于后者来说，这是一个有趣的例子，你的应用程序在全球范围内没有任何应用（我认为Yui3是一个迄今为止最好的JS框架来进行严重的软件开发，当然也要检查，尤其是Javascript God的道格拉斯克罗克福德的任何视频。（我通常不习惯做这种陈述）。 使用Javascript时需要记住的是，编译器在C等语言中所做的部分工作现在是在运行时进行的您应该记住，该代码在加载期间只运行一次，但在运行时执行完全不同的代码-这取决于加载时代码的执行情况

在您的示例中，window.MainModule=…之后的函数是在加载JS代码时执行的。请注意，window.MainModule并不指向该函数！！！ 相反，正如我所说，该函数是在加载时执行的，结果被分配给window.MainModule。结果是什么？只有一个return语句，它返回and object，而object只有一个属性“init”，它指向一个匿名函数

但是，在返回该对象之前，该函数会在其局部作用域中创建一个变量“modules”，该变量指向一个对象。该对象有两个属性，这些属性的赋值方式与window.MainModule的赋值方式相同，因此总共有三个闭包

所以在加载之后，您有一个全局变量

window.main模块={ init:function（）{…}

所以在加载之后，您有一个全局变量

window.main模块={ init:function（）{…} }

在最后一行执行该函数

}

在最后一行执行该函数

---

不过，这个示例没有太多意义，因为您没有真正封装任何内容。您使用双指针提供私有函数：从init到局部变量someFunction，没有隐藏任何内容。查看上述URL（Yahoo Developer Theater）为了获得更好的示例和非常透彻的解释。即使你从未接触过YUI3，这也是必须观看的-尤其是D.Crockford的视频是通用的JS技术。

为了访问任何需要在你调用的范围内可用的东西，JS中的“模块”或任何封装方法总是意味着“功能”.A模块只是一个匿名（未命名）函数。因此，要从函数A内部访问另一个函数B（模块）中定义的元素，它必须在全局范围内可用（在浏览器中：窗口对象），或者必须以其他方式获得访问权，例如通过某个函数调用接收引用。YUI3([http://developer.yahoo.com/yui/3/对于后者来说，这是一个有趣的例子，你的应用程序在全球范围内没有任何应用（我认为Yui3是一个迄今为止最好的JS框架来进行严重的软件开发，当然也要检查，尤其是Javascript God的道格拉斯克罗克福德的任何视频。（我通常不习惯做这种陈述）。 使用Javascript时需要记住的是，编译器在C等语言中所做的部分工作现在是在运行时进行的您应该记住，该代码在加载期间只运行一次，但在运行时执行完全不同的代码-这取决于加载时代码的执行情况

在您的示例中，window.MainModule=…之后的函数是在加载JS代码时执行的。请注意，window.MainModule并不指向该函数！！！ 相反，正如我所说，该函数是在加载时执行的，结果被分配给window.MainModule。结果是什么？只有一个return语句，它返回and object，而object只有一个属性“init”，它指向一个匿名函数

但是，在返回该对象之前，该函数会在其局部作用域中创建一个变量“modules”，该变量指向一个对象。该对象有两个属性，这些属性的赋值方式与window.MainModule的赋值方式相同，因此总共有三个闭包

所以在加载之后，您有一个全局变量

window.main模块={ init:function（）{…}

所以在加载之后，您有一个全局变量

window.main模块={ init:function（）{…} }

在最后一行执行该函数

}

在最后一行执行该函数

不过，这个例子没有太多意义，因为你没有真正封装任何东西。你用双指针提供私有函数：从init到局部变量someFunction，没有隐藏的东西

define( ["dependency"] , function( dep ){

   return {
      speak: function(){
          alert( dep.message );
      }
   }

} );

define( {
    message: "Hello world!"
} );

if ( $(".someCssExpression").length ) {
    require( [ "module1" ] , function( mod ){

        mod.speak();

    });
}

...

<script src="require.js" data-main="impl"></script>

...