JavaScript 中的模块化
最早的基于立即执行函数，闭包的模块化
const MountClickModule = function(){
let num = 0;
const handleClick = ()=>{
console.log(++num);
}
return {
countClick:()=>{
document.addEventListener('click',handleClick)
}
}
}();
MountClickModule.countClick();
(function(module) {
module.say = ()=>{
console.log(num) //undefined
//do something
}
})(MountClickModule);
MountClickModule.say();
这种闭包的坏处：
- 扩展模块间无法访问私有变量。
- 强依赖模块导入的顺序,项目变大后不好维护。
AMD 和 CommonJS 模块化JavaScript 应用
AMD 和 CommonJS 是两个互相竞争的标准，均可定义 JavaScript 模块。除了语法和原理的区别之外，主要区别是 AMD 的设计理念是明确基于浏览器，而 CommonJS 的设计是面向通用 JavaScript 环境
使用 AMD 定义模块依赖
AMD 异步模块定义规范制定了定义模块的规则，这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应（浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题）。
目前，AMD 最流行的实现是 RequireJS。
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//Or:
return require("beta").verb();
}
});
AMD 提供名为 aplha 的函数，它接收一下参数：
- 第一个参数，
id，是个字符串。它指的是定义中模块的名字，这个参数是可选的。如果没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。 - 第二个参数，dependencies，是个定义中模块所依赖模块的数组。
- 第三个参数是初始化模块的工厂函数，该函数接收dependencies作为参数 AMD异步获取依赖，以避免阻塞，如果依赖来自服务器，那么这个过程将花费一些时间，知道依赖全部加载完成后，调用模块的工厂函数，并传入所有的依赖。
可以看出，AMD 有一下几项有点：
- 异步加载模块，避免阻塞。
- 自动处理依赖，我们无需考虑模块的引入顺序。
- 在同一个文件中可以定义多个模块。
CMD
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出，在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：
define(function (require, exports, module) {
const foo = require('./foo')
a.doSomething()
// ...
const bar = require('./bar') // 依赖可以就近书写
b.doSomething()
// do something else
})
CommonJS
AMD 的设计明确基于浏览器，而 CommonJS 的设计是面向通用 JavaScript 环境。CommonJS 目前在 Nodejs 社区中具有最多的用户。CommonJS 使用基于文件的模块，所以每个文件中都只能定义一个模块，CommonJs 提供变量 module，该变量具有属性 exports,通过 exports 很容易扩展属性。最后，module.exports 作为模块的公共接口。
const beta = require('beta');
function alpha(){
return beta.verb();
//Or:
return require("beta").verb();
}
module.exports = alpha;
CommonJS 要求一个文件就是一个模块，文件中的代码就是模块的一部分，所以不需要使用立即执行函数来包装变量，在模块中定义的变量都是安全的再模块中，不会泄露到全局作用域。只有通过 module.exports 对象暴露的对象或函数才可以在函数外部访问 CommonJS 具有以下特点：
- 基于文件系统。
- 引入模块时文件同步加载，可以访问模块的公共接口。
- 模块加载相对更快 这是 CommonJS 在服务端更流行的原因。
ES6 模块的导入导出
ES6 模块结合了CommonJS 和 AMD 的有点，具体如下：
- 与 CommonJS 类似，ES6模块语法相对简单，并且基于文件（每一个文件就是一个模块）
- 与 AMD 类似，ES6 模块支持异步加载模块。
既 ES6 结合了两种模块化的有点，基于文件系统，既支持异步也支持同步，因为浏览器并没有实现 ES6 的模块化 API 所以具体是异步还是同步取决于loader api
ES6 模块的主要思想是必须显示的使用标志符导出模块，才能从外部访问模块。其他标志符，甚至在最顶级作用域中定义的标识符，只能在模块中使用。 ES6 引入两个关键字：
- export ---- 从模块外部指定标识符。
- import ---- 导入模块标识符。
从index.js模块中导出：
const hello = 'hello';
export const name = 'yunfly'
export function sayHi(){
return `${hello} ${name}!`
}
也可以在模块最后一起导出：
// foo.js
const hello = 'hello';
export const name = 'yunfly'
export function sayHi(){
return `${hello} ${name}!`
}
export { name, sayHi }
// export { name as firstName, sayHi }
// bar.js
// 使用 as 设置导如别名
import { name as firstName, sayHi } from 'foo'
console.log(name)
sayHi()
//bar2.js
// 导出全部标识符：
import * as sayModule from 'foo';
console.log(sayModule.name)
sayModule.sayHi()
// foo.js
class Foo {}
export default Foo
// bar.js
import Foo from './foo';
这存在一些可维护性的问题：
- 如果你在 foo.ts 里重构 Foo，在 bar.ts 文件中，它将不会被重新命名；
- 如果你最终需要从 foo.ts 文件中导出更多有用的信息（在你的很多文件中都存在这种情景），那么你必须兼顾导入语法。
- 在 ts 中默认导出的可发现性非常差，你不能智能的辨别一个模块它是否有默认导出。
文章参考：《JavaScript忍者秘籍》