JavaScript-模块化编程
- 将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起
- 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信
为什么需要模块化？
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
- 便于维护和单元测试
CommonJS
Node 应用由模块组成，采用 CommonJS 模块规范。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。
- 模块引用
var example = require("./example.js");
console.log(example.x); // 5
console.log(example.addX(1)); // 6
- 模块定义
// 定义模块math.js
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = {
//在这里写上需要向外暴露的函数、变量
add: add,
basicNum: basicNum
};
- 模块标识
即为传递给require()方法的参数，必须是符合小驼峰命名的字符串。可以是没有后缀的js文件
CommonJS 用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。
CommonJS构建的这套模块的导出和引入机制，不用考虑变量污染。每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见
- 所有代码都运行在模块作用域，不会污染全局作用域。
- 模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
- 模块加载的顺序，按照其在代码中出现的顺序。
AMD
Asynchronous Module Definition的缩写，意思就是异步模块定义, AMD规范是 CommonJS 模块规范的延伸；模块的定义如下：
define(id?,dependencies?,factory)
//定义没有依赖的模块
define(function() {
return 模块;
});
//定义有依赖的模块
define(["module1", "module2"], function(m1, m2) {
return 模块;
});
// 使用
require(["module1", "module2"], function(m1, m2) {
// 使用m1 / m2;
});
AMD 规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。更适合浏览器
CMD
CMD 是另一种 js 模块化方案，它与 AMD 很类似
不同点在于：AMD 推崇依赖前置、提前执行，CMD 推崇依赖就近、延迟执行。
/** AMD写法 **/
define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) {
// 等于在最前面声明并初始化了要用到的所有模块
a.doSomething();
if (false) {
// 即便没用到某个模块 b，但 b 还是提前执行了
b.doSomething();
}
});
/** CMD写法 **/
define(function(require, exports, module) {
var a = require("./a"); //在需要时申明
a.doSomething();
if (false) {
var b = require("./b");
b.doSomething();
}
});
require, exports, module通过形参传递给模块。在需要模块时，随时调用require引入
ES6 模块化
/** 定义模块 math.js **/
var basicNum = 0;
var add = function(a, b) {
return a + b;
};
export { basicNum, add };
/** 引用模块 **/
import { basicNum, add } from "./math";
function test(ele) {
ele.textContent = add(99 + basicNum);
}
ES6 模块与 CommonJS 模块的差异
require用于读取并执行 js 文件， 并返回该模块的 exports 对象， 若无指定模块， 会报错。 Node 使用 CommonJS 模块规范， CommonJS 规范加载模块是同步的， 只有加载完成， 才能执行后续操作;
Node中require不论是核心模块还是文件模块，对相同模块的加载都是采用缓存优先的原则。第一优先级
import 用于引入外部模块， 其他脚本等的函数， 对象或者基本类型。 import 属于 ES6 的命令， 它和 require 不一样， 它会生成外部模块的引用而不是加载模块， 等到真正使用到该模块的时候才会去加载模块中的值
-
CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
CommonJS模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6模块的运行机制与CommonJS不一样。JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
-
CommonJS模块是运行时加载，ES6模块是编译时输出接口,在代码静态解析阶段就会生成。- 运行时加载:
CommonJS模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。 - 编译时加载:
ES6模块不是对象，而是通过export命令显式指定输出的代码，import时采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。
- 运行时加载: