前端模块化的发展以及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; } */