前端模块化
共有四种规范
- ES6 Module
- CommonJS
- AMD
- CMD
ES6 Module
ES6模块并非对象，import命令会被 JavaScript 引擎静态分析
在编译的时候被 JavaScript 引擎静态分析并加载，所以无法实现条件加载
使用方法
两种情况
情况1: export { 变量1, 变量2 }
/** 定义模块 math.js **/
const a = 1;
const b = 2;
+ export { a, b }
/** 引用模块 **/
+ import { a, b} from './math.js'
console.log(a)
console.log(b)
情况2: export default
/** export default **/
//定义
const a = 1;
const b = 2;
+ export default { a,b };
//引用
+ import math from './math';
console.log(math.a) // 1
console.log(math.b) // 2
CommonJS
CommonJS 采用同步加载模块，在服务器端模块文件都保存在磁盘，读取速度特别块，所以这样做不会有什么问题，但是对于浏览器来说，由于网速等原因，采用异步加载的方式更合适，所以一般CommonJS一般用在Node.js中；
四个环境变量: module、exports、require、global
module.exports使用方法
- module.exports定义当前模块对外输出的接口（不推荐直接用exports），
- require 引入模块;
/*
* 举例1：导出多个变量
*/
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = {
add,
basicNum
}
var math = require('./math');
math.add(2, 5);
const { add } = require('./math')
// 引用“核心”模块时，不需要带路径
var http = require('http');
http.createService(...).listen(3000);
/*
* 使用举例2：导出一个对象
*/
module.exports = function(name, age) {
this.name = name;
this.age = age;
this.about = function() {
console.log(this.name + 'is' + this.age + '岁');
};
};
var Rocker = require('./rocker.js');
var r = new Rocker('occy',98);
r.about();
exports使用方法
- exports是指向的module.exports的引用
// 定义
function handleAdd(a, b) {
return a + b;
}
exports.handleAdd = handleAdd;
// 引用
const test = require('./components/test')
console.log(test.handleAdd(1,2)) // 3
ES6 模块与 CommonJS 模块的差异
- 输出不同: CommonJS模块是值的拷贝; ES6 模块是值的引用;
- 加载时机不同: CommonJS 模块是运行时加载; ES6 模块是编译时加载;
- 输出不同的影响
- CommonJS模块：一旦输出一个值，模块内部的变化就影响不到这个值;
- ES6 ：动态引用，不缓存值，模块里面的变量绑定其所在的模块;???
- 返回值不同:
- module.exports返回的是模块对象本身 ———— 需要new对象之后使用;
- exports返回的是模块函数 —— 可以直接使用
- JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。
运行时加载和编译时加载区别
- 运行时加载：（common.js）模块就是对象，也就是在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，
- 编译时加载: (ES6) 模块不是对象，而是通过 export 命令显式指定输出的代码，import是采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块。
CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。
