ES6(3)

1.模块化

什么是模块化

• 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
• 模块化的优势有以下几点：
  • 防止命名冲突
  • 代码复用
  • 高维护性

模块化规范产品

• CommonJS=> NodeJS、Browserify
• AMD => requireJS
• CMD => seaJS
• ES6

2. ES6 模块化

• 模块功能主要由两个关键字构成：export 和 import
• export 命令用于规定模块的对外接口
• import 命令用于输入其他模块提供的功能

3. import

export 有两种导出模式，export 和 export default(一个模块中只能有一个 default)

导出变量

export 后边可以是一个变量声明表达式或者是一个{}里边包含变量名，但是不能直接输出一个变量， export default 后边可以直接跟一个常量或者变量，但是不能跟声明表达式

export var a = 1 //正确

const age = 100
export { age } //正确

export age //错误

export default age //正确

export default 50 //正确

export default var name='abc ' //错误

导出函数

export 和 export 都可以直接导出函数声明语句，但是 export 后边不能跟匿名函数，如果直接导出函数名 export 需要用{}包裹

//正确
 export default function test () {
  console.log('test function')
}
   //正确
 export  function test2 () {
  console.log('test function')
}
//错误
 export  function  () {
  console.log('test function')
}
 //正确
 export default function  () {
  console.log('test function')
}

function test3(){
 console.log('test3 function')
}

//正确
expor {test3}
//正确
export default test3
错误
export  test3

使用 as 别名导出

let a = 100;

export { a as age };

4. import

• 对于使用 export default 导出的，倒入时不需要使用{},且名字可以任意定义

• 对于使用 export 导出的，必须使用{}倒入，且名字必须一致

• 可以使用通配符* 方式全部导入 (import * as obj from ‘…/a.js’)

  //对于export default 导出的
  
  import myFn from './a.js';
  
  //对于使用export 导出的
  
  import { test1, test2 } from './a.js';
  

5. 按需加载

采用回调函数的方式，所有的引入直接在回调中

document.onclick = function () {
  import('./a.js').then(data => {
    console.log(data);
  });
};

6. async 和 await

• async 和 await 两种语法结合可以让异步代码像同步代码一样
• async 函数的返回值为 promise 对象
• promise 对象的结果由 async 函数执行的返回值决定
• await 必须写在 async 函数中
• await 右侧的表达式一般为 promise 对象
• await 返回的是 promise 成功的值
• await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理