前端模块化

共有四种规范

1. ES6 Module
2. CommonJS
3. AMD
4. 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 模块的差异

1. 输出不同: CommonJS模块是值的拷贝; ES6 模块是值的引用;
2. 加载时机不同: CommonJS 模块是运行时加载; ES6 模块是编译时加载;
3. 输出不同的影响
   1. CommonJS模块：一旦输出一个值，模块内部的变化就影响不到这个值;
   2. ES6 ：动态引用，不缓存值，模块里面的变量绑定其所在的模块;???
4. 返回值不同:
   1. module.exports返回的是模块对象本身 ———— 需要new对象之后使用;
   2. exports返回的是模块函数 —— 可以直接使用

• JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。ES6 的import有点像 Unix 系统的“符号连接”，原始值变了，import加载的值也会跟着变。

运行时加载和编译时加载区别

• 运行时加载：（common.js）模块就是对象，也就是在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，
• 编译时加载: (ES6) 模块不是对象，而是通过 export 命令显式指定输出的代码，import是采用静态命令的形式。即在import时可以指定加载某个输出值，而不是加载整个模块。
  CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。