前端模块化的发展以及es6模块化详解

模块化类型

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。后面又有了es6模块化(export/import)。
CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
require()用来引入外部模块；exports对象用于导出当前模块的方法或变量，唯一的导出口；module对象就代表模块本身。npm作为node的包管理器，遵循CommonJS规范。

CMD是懒加载, 仅在require时才会加载模块; - AMD是预加载, 在定义模块时就提前加载好所有依赖

• ADM。主要为前端JS的表现定制规范，requireJS就是实现AMD规范
  AMD就只有一个接口：define(id?,dependencies?,factory);
  对于依赖的模块提前执行，依赖前置
• CMD。与AMD较接近。seaJS实现CMD规范
  define(function(require,exports,module){…});
  依赖就近，延迟执行

为什么使用模块化？

这种原始的加载方式暴露了一些显而易见的弊端：

• 1.全局作用域下容易造成变量冲突
• 2.文件只能按照

ES6模块化的特点

1、静态加载模块，效率比CommonJS 模块的加载方式高；
2、ES6 模块是编译时加载
3、不再需要UMD模块格式
4、不再需要对象作为命名空间（比如Math对象）
5、支持严格模式

导入和导出模块
导入导出代码，只能单独使用，不能使用变量或者表达式。在js执行之前已经开始编译。如果使用表达式或者变量的话，会识别不出

• 基本导出数据 export

export var a = 10;

• 导出多个

var a = 10;
var b = 10;
export {a,b};

导出数据如果有重名，可以取别名 as 。
一种可以导出的时候取，另外一种可以导入的时候取名 导出数据是动态绑定、导出的数据可以是任何数据

// 报错编译问题
// if(1===1){
//     export{a as a1,m,Score}
// }

• 匿名导出
  使用export default，一个js文件中只能使用一次，

//c.js
//只有一个类导出的情况：
// export default class Product{
class Product{
    buy(){
        console.log('购买商品');
    }
}
class Score{
    sum(){
        console.log('这是匿名导出里面的类')
    }
}
export default{
    p : Product;
    s : Score;
}

• 导入模块 import{导出数据的名字} from ‘文件’

var t = './a.js';   //会报错

import命令具有提升效果，会提升到整个模块的头部，首先执行

• 导入整体

import {a1,m,Score} from './b'
//等价于
import * as zonghe from './b'   //zonghe={a1:a1的值,m:m的值,Score:Score的值}

• 导入匿名导出的文件，可以任意取名，并且不加{}

import z from './c';
/*
z = {
    p : Product;
    s : Score;
}
*/