JavaScript示例模块模式
我找不到任何可访问的例子，显示两个（或更多）不同的模块如何连接在一起工作。
所以，我想问问是否有人有时间写一个例子说明模块如何协同工作。
为了接近模块化devise模式，您需要首先理解这些概念：
立即调用函数expression式（IIFE）：
(function() { // Your code goes here }()); 有两种方法可以使用这些function。 1.函数声明2.函数定义 这里使用的是函数定义expression式。
什么是命名空间？ 现在，如果我们将命名空间添加到上面的代码片段
var anoyn = (function() { }());
什么是JS的封闭？
这意味着如果我们声明任何具有任何variables作用域的函数/在另一个函数内（在JS中，我们可以在另一个函数内声明一个函数！），那么它将始终计算该函数作用域。 这意味着外部函数中的任何variables都将被读取。 它不会读取具有相同名称的全局variables（如果有的话）。 这也是使用模块化devise模式避免命名冲突的目标之一。
var scope = "I am global"; function whatismyscope() { var scope = "I am just a local"; function func() {return scope;} return func; } whatismyscope()()
现在我们将应用上述三个概念来定义我们的第一个模块化devise模式：
var modularpattern = (function() { // your module code goes here var sum = 0 ; return { add:function() { sum = sum + 1; return sum; }, reset:function() { return sum = 0; } } }()); alert(modularpattern.add()); // alerts: 1 alert(modularpattern.add()); // alerts: 2 alert(modularpattern.reset()); // alerts: 0
上面的代码jsfiddle。
目标是隐藏来自外部世界的variables可访问性。
希望这可以帮助。 祝你好运。
我真的build议任何人进入这个课题阅读Addy Osmani的免费书籍：
“学习JavaScriptdevise模式”。
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
当我开始编写更易维护的JavaScript时，这本书帮了我很大的忙，我仍然把它作为参考。 看看他不同的模块模式实现，他解释得很好。
我想通过谈论如何将模块组合到应用程序中来扩展上述答案。 我在doug crockford的书中读到过这个，但是对于javascript来说是新的，但是它仍然有点神秘。
我来自交stream背景，所以添加了一些我觉得有用的术语。
HTML
你会有一些顶级的HTML文件。 这有助于将其视为您的项目文件。 您添加到项目中的每个JavaScript文件都希望进入此操作，不幸的是，您不会获得对此的工具支持（我正在使用IDEA）。
您需要使用如下脚本标签将文件添加到项目中：
<script type="text/javascript" src="app/native/MasterFile.js" /></script> <script type="text/javascript" src="app/native/SomeComponent.js" /></script>
看起来崩溃的标签导致事情失败 – 而它看起来像XML这真的是疯狂的规则！
命名空间文件
MasterFile.js
myAppNamespace = {};
而已。 这只是为我们的代码的其余部分添加一个全局variables。您也可以在这里（或在它们自己的文件中）声明嵌套的命名空间。
模块（一个或多个）
SomeComponent.js
myAppNamespace.messageCounter= (function(){ var privateState = 0; var incrementCount = function () { privateState += 1; }; return function (message) { incrementCount(); //TODO something with the message! } })();
我们在这里做的是给我们的应用程序中的variables分配一个消息计数器函数。 这是一个函数，它返回一个我们立即执行的函数。
概念
我认为这有助于将SomeComponent中的最上面一行看作是声明某些东西的命名空间。 唯一需要注意的是，所有的命名空间都需要首先出现在其他文件中 – 它们只是我们应用程序variables的根源。
我现在只采取了小步骤（我重构了一些正常的JavaScript的extjs应用程序，所以我可以testing它），但它似乎相当不错，因为你可以定义一些function单位，同时避免“这个泥泞' 。
您也可以使用此样式来定义构造函数，方法是返回一个返回具有函数集合的对象的函数，而不是立即调用它。
这里https://toddmotto.com/mastering-the-module-pattern你可以find彻底解释的模式。; 我会补充说，关于模块化JavaScript的第二件事是如何在多个文件中构build代码。 许多人可能会build议你在这里与AMD合作，但是我可以从经验中得知，由于大量的HTTP请求，你将会在某些时候遇到页面响应慢的问题。 出路在于按照CommonJS标准将JavaScript模块（每个文件一个）预编译为一个文件。 看看这里的样品http://dsheiko.github.io/cjsc/
你可以在这里find模块模式JavaScript http://www.sga.su/module-pattern-javascript/
