一篇文章帮你弄懂ES6模块化

前端模块化是前端工程化的基石。时下，大前端时代中对模块的运用更是无处不在，而放眼将来，es6中所提出的import和export的形式彷佛将统一先后端的模块化加载。

1、模块化概述

隔离不一样的js文件，仅暴露当前模块所须要的其余模块，这就是模块化思想。

在学习ES6的模块化以前先复习一下以前出现的模块化，比较经常使用的有三种规范定义：CommonJS、AMD、CMD。

它们的特色与相互间的区别是：

1. CommonJS适用于服务端，写法为：

   var clock = require('clock.js')
   clock.start();
   复制代码

   上例表示，clock的调用必须等待clock.js请求加载成功，换句话说，是同步操做，而这也致使了CommonJS普遍应用于服务端而不是客户端（服务器读取模块都是在本地磁盘，加载速度快，而若是是在客户端则容易出现‘假死’状态）那么能不能用异步加载模块呢？

2. AMD (Asynchronous Module Definition) 就是异步加载模块，多用于浏览器（ requireJs应用了这一规范），写法为：

   require([module],callback);
   
   // eg
   require(['clock.js'],function(clock){
     clock.start();
   })
   复制代码

   虽然实现了异步加载，规避了浏览器的“假死”问题，可是也存在缺点： 一开始就把全部依赖写出来是不符合逻辑顺序的。那么，能不能像CommonJS同样用的时候才require，而后还能支持异步加载后执行呢？

3. CMD (Common Module Definition) 则是依赖就近，用的时候再require（ seajs推崇的规范 ），写法为：

   define(function(require,exports,module){
     var clock = require('clock.js');
     clock.start();
   })
   复制代码

AMD和CMD的区别是对依赖模块的执行时机不一样，而不是加载处理方式不一样，两者皆为异步加载模块。

AMD依赖前置，js能够方便地清楚依赖模块有哪些，当即加载；

CMD就近依赖，开发者能够在须要用到依赖的时候再require，可是对于js处理器来讲，须要把代码处理为字符串解析一遍才知道依赖了哪些模块，即牺牲性能来得到开发的便利，虽然实际上解析的时间短到能够忽略，可是也有不少人诟病CMD这一点。

ES6的模块化设计思想是尽可能静态化，使得编译时就能肯定模块的依赖关系。

对比CommonJS和ES6模块：

// CommonJS
let { start, exists, readFile } = require('fs')
// 至关于
// let _fs = require('fs')
// let start = _fs.start, exists = _fs.exists, readFile = _fs.readFile

// ES6
import { start, exists, readFile } from 'fs'
复制代码

上述例子中，CommonJS的实质是总体加载fs模块生成一个_fs对象，以后再从对象中分别读取3个方法，称为“运行时加载”。而ES6模块是加载3个方法，称为“编译时加载”

2、ES6模块化的语法规范

严格模式

在ES6模块中自动采用严格模式。规定：

• 变量必须先声明
• 函数参数不能有同名属性
• 不能使用with
• 对只读属性赋值、delete不可删除属性直接报错
• 不可删除变量delete prop、只能删除属性delete global[prop]
• eval不会再外层做用域引入变量
• eval和arguments不可从新赋值
• arguments不会自动反应函数参数变化
• 禁止this指向全局
• 增长保留字：static、interface、protected等。

注意：在ES6模块中，顶层this为undefined，不该该被使用。

export命令

第一种：

export var a = '123';
export const _b = '2323'
export let c = '2222' 
复制代码

第二种：

var a = '123';
const _b = '2323'
let c = '2222' 
export {a, _b, c}; // 推荐
复制代码

第三种（第二种基础上加上as关键词重命名）

var a = '123';
const _b = '2323'
let c = '2222' 
export {
  a as stream1,
  _b as stream2,
  c as stream3 };
复制代码

注意：

1. export语句输出的接口是对应值的引用，也就是一种动态绑定关系，经过该接口能够获取模块内部实时的值。

   对比CommonJS规范：CommonJS模块输出的是值的缓存，不存在动态更新。

2. export命令规定要处于模块顶层，一旦出如今块级做用域内，就会报错，import同理。

import命令

第一种：

import {a, _b ,c} from './profile'
复制代码

第二种：

import {stream1 as firstVal} from './profile'
复制代码

import 是静态执行，不能够应用表达式、变量和if结构。

if(x == 1){
  import { foo } from 'module1'
}else{
  //...
}
复制代码

import语句是Singleton模式：虽然foo和bar在两个语句中加载，可是对应的是同一个my_module实例。

import { foo } from './module1'
import { bar } from './module1'

// 至关于
import {foo,bar} from './module1'
复制代码

模块的总体加载

可使用*来指定一个对象，全部输出值都加载到这个对象上：

import * as circle from './module1'
circle.foo();
circle.bar();
复制代码

因为模块总体加载所在的对象都是能够静态分析的，因此不容许运行时改变。

import * as circle from './module1'
// 下面两行都是不容许的
circle.foo = 123;
circle.bar = function(){}
复制代码

默认输出

export default命令能够为模块默认输出

// module2.js
export default function(){
  console.log('123')
}
// 至关于
function a(){
  console.log('123')
}
export {a as default}; 
复制代码

import命令能够为匿名函数指定任意名字

import defaultFn from './module2'
// 至关于
import {default as defaultFn} from './module2'
复制代码

export和import的复合写法

export { foo, bar} from 'my_module';
// 等同于
import {foo,bar} from 'my_module';
export{foo,bar};
复制代码

export {es6 as default} from './someModule'
// 等同于
import {es6} from './someModule'
export default es6;
复制代码

import()方法

前面提到过，require是动态加载，便可以在用的时候再require；而import是静态执行，只能处于代码最顶层，不能够存在于块级做用域中。这致使import没法在运行中执行（相似于AMD的缺点）。 因而就有了一种提案：引入import()函数，相似于Node的require函数（CommonJS），可是它实现了异步加载。

定义：import()函数接收与import相同的参数，返回一个Promise对象，加载获取到的值做为then方法的回调参数。

const main = document.querySelector('main')

import(`./section-modules/${someVariable}.js`)
	.then(module => {
  	module.loadPageInto(main);
	})
	.catch(err => {
    main.textContext = err.message;
  })
复制代码

// 加载得到接口参数：
import('./module1.js')
.then(({default:defaultFn,foo,bar}) => {
  console.log(defaultFn)
})
复制代码

// 同时加载多个模块并应用于async函数中
async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] = 
        await Promise.all([
          import('./module1,js'),
          import('./module2.js'),
          import('./module3.js')
        ])
}
main();
复制代码

3、不一样规范间加载

import加载CommonJS模块

• 使用import命令加载CommonJS模块，Node会自动将module.exports属性当作模块的默认输出，即等同于export default

  // a.js
  module.exports = {
    foo: 'hello',
    bar: 'world'
  }
  
  // 在import引入时等同于
  export default {
    foo: 'hello',
    bar: 'world'
  }
  复制代码

• CommonJs模块是运行时肯定输出接口，因此采用import命令加载CommonJS模块时，只能使用总体输入（*）。

  import {readfile} from 'fs' //当'fs'为CommonJS模块时错误
  // 总体输入
  import * as express from 'express'
  const app = express.default();
  复制代码

require加载ES6模块

• require命令加载ES6模块时，全部的输出接口都会成为输入对象的属性。

  // es.js
  let foo = {bar : 'my-default'};
  exxport default foo;
  foo = null;
  
  // cjs.js
  const es_namespace = require('./es')
  console.log(es_namespace.default);// {bar:'my-default'}
  复制代码

4、对比CommonJS

有了新欢也不能忘了旧爱,让咱们再来继续对比CommonJS和ES6模块化的区别，进一步体会理解ES6模块化的特性。

加载原理

CommonJS一个模块对应一个脚本文件，require命令每次加载一个模块就会执行整个脚本，而后生成一个对象。这个对象一旦生成，之后再次执行相同的require命令都会直接到缓存中取值。也就是说：CommonJS模块不管加载多少次，都只会在第一次加载时运行一次，之后再加载时就返回第一次运行的结果，除非手动清除系统缓存。

循环加载

// a.js
exports.done = false;
var b = require('./b.js'); // 1. a.js暂停执行，转到执行b.js ； b.js完毕后回来，b:{done:true}
console.log('在a.js中，b.done=%j',b.done); // 5. '在a.js中，b.done=true'
exports.done = true;
console.log('a.js执行完毕') // 6. 'a.js执行完毕'

// b.js
exports.done = false;
var a = require('./b.js') // 2. a:{done:false}
console.log('在b.js中，a.done=%j',a.done); // 3. '在b.js中，a.done=false'
exports.done = true;
console.log('b.js执行完毕') // 4. 'b.js执行完毕'，继续执行a.js

// main.js
var a = require('./a.js');
var b = require('./b.js');
console.log('在main.js中，a.done=%j，b.done=%j',a.done,b.done); //'在main.js中，a.done=true，b.done=true'
复制代码

从上面也能够看到：1. CommonJS输入的是被输出值的复制，而不是引用。2. 因为CommonJS模块遇到循环加载返回的是当前已经执行的部分的值，而不是代码所有执行后的值（上面的第2步注释）

对比：ES6模块是动态引用，变量不会被缓存

// a.js
import {bar} from './b.js';
export function foo(){
  console.log('foo')
  bar();
  console.log('执行完毕')
}
foo();

// b.js
import {foo} from './a.js' // 若是为CommonJS，这里直接就返回undefined值且不会再更改
export function bar(){
  console.log('bar')
  if(Math.random() > 0.5){
    foo();
  }
}

// 执行结果可能为：foo bar 执行完毕
// 执行结果也可能为： foo bar foo bar 执行完毕 执行完毕复制代码