js的模块模式被定义为给类提供私有和公共封装的一种方法，也就是我们常说的“模块化”。
怎么实现“模块化”？
通过闭包的原理来实现“模块化” ，具体实现：1.必须有外部的封闭函数，该函数必须至少被调用一次（每次调用都会创建一个新的模块实例）；2.封闭函数必须返回至少一个内部函数（返回多个函数时，以对象字面量的形式返回）
先看一个实例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <script> 9 function Module (){
//内部变量 10 var something = 'cool'; 11 var another = [1,2,3]; 12 //内部函数 13 function doSomething(){ 14 console.log(something); 15 } 16 17 function doAnother(){ 18 console.log(another); 19 } 20 //返回对象字面量形式，里面包含内部函数的引用， 这样就保持了内部变量是隐藏且私有的状态。 21 return { 22 doSomething: doSomething, 23 doAnother: doAnother 24 }; 25 } 26 //调用外部函数Module创建一个模块实例foo 27 var foo = Module(); 28 foo.doSomething();//cool 29 foo.doAnother();//[1,2,3] 30 </script> 31 </body> 32 </html>
简单分析一下代码：
首先，Module只是一个函数，必须通过他才能创建一个模块实例，如果不执行他，内部作用域和闭包都无法被创建。 其次，Module函数返回一个字面量对象，这个返回的对象含有对内部函数而不是内部变量的引用。这样就保持了内部变量是隐藏且私有的状态。可以将这个对象类型的返回值看作模块的公共API 这个API最终会被赋值给外部的变量foo，通过他就可以访问API中的属性方法，比如：foo.doSomething()。
上面的实例中，Module函数可以调用任意多次，每次调用都会创建一个新的模块实例。当只需要一个实例时，可以对这个模块进行简单的改进来实现单例模式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var foo = (function Module (){ var something = 'cool'; var another = [1,2,3]; function doSomething(){ console.log(something); } function doAnother(){ console.log(another); } return { doSomething: doSomething, doAnother: doAnother }; })(); foo.doSomething();//cool foo.doAnother();//[1,2,3] </script> </body> </html>
通过将模块函数转换为IIFE（立即执行函数），立即调用这个函数并将返回值直接赋值给电力的模块实例foo
模块也是普通的函数，因此可以接收参数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // var foo = (function Module (){ // var something = 'cool'; // var another = [1,2,3]; // function doSomething(){ // console.log(something); // } // function doAnother(){ // console.log(another); // } // return { // doSomething: doSomething, // doAnother: doAnother // }; // })(); // foo.doSomething();//cool // foo.doAnother();//[1,2,3] var foo = (function Module(id){ function change(){ publicAPI.id = id2; } function id1(){ console.log(id); } function id2(){ console.log(id.toUpperCase()); } var publicAPI = { change: change, id: id1 }; return publicAPI; })('hello'); foo.id();//hello foo.change(); foo.id();//HELLO </script> </body> </html>
可以看出：通过在模块实例的内部保留公共API对象的内部引用（API指的是引用return回来的字面量对象 ｛...｝），可以从内部模块实例进行修改，包括添加、删除方法和属性，以及修改它们的值。
现代的模块机制
大多数模块依赖加载器/管理器，本质上都是将模块定义为封装进一个API。 现在，宏观了解一下模块机制：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var myModule = (function Module(){ var modules = []; //定义一个define函数用于定义一个模块 function define(name, deps， impl){ for (var i = 0;i < deps.length;i++){ deps[i] = modules[deps[i]]; } modules[name] = impl.apply(impl, deps); } function get(name){ return modules[name]; } return { define: define, get: get }; })(); </script> </body> </html>
这段代码的核心就是：modules[name] = impl.apply(impl, deps)。 为了模块的定义（define函数）引入包装函数（可以传入任何依赖），并且将返回值，也就是模块的API，存储在一个根据名字来管理的模块列表中。（不是很理解啊？？）
下面展示了如何使用它来定义模块：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> var myModule = (function Module(){ var modules = []; function define(name, deps, impl){ for (var i = 0;i < deps.length;i++){ deps[i] = modules[deps[i]]; } modules[name] = impl.apply(impl, deps); } function get(name){ return modules[name]; } return { define: define, get: get }; })(); myModule.define('bar', [], function(){ function hello(who){ return "Hello," + who; }; return{ hello:hello }; }); myModule.define('foo', ['bar'], function(bar){ var hungry = 'hippo'; function awesome(){ console.log(bar.hello(hungry).toUpperCase()); }; return { awesome: awesome }; }); var bar = myModule.get('bar'); var foo = myModule.get('foo'); console.log(bar.hello('hippo'));//hello, hippo foo.awesome();//HELLO, HIPPO </script> </body> </html>
‘foo’和‘bar’模块都是通过一个返回公共API的函数来定义的。‘foo’甚至接受‘bar’的实例作为依赖参数，并使用它。
这就是模块的威力！！
总结一下：模块并不是什么神秘的东西，他只是一个外部函数返回内部函数的引用（字面量对象的形式返回），从而可以访问内部函数和变量的一种方式。
---摘自《你不知道的JavaScript》（上） 2017-3-22 23：24