每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，前面我们介绍了模块化的历史，今天介绍模块化处理方案

ES Module

• JavaScript没有模块化一直是它的痛点，所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD等， 所以在ES推出自己的模块化系统时，大家也是兴奋异常。
  
• ES Module和CommonJS的模块化有一些不同之处:

• 一方面它使用了import和export关键字;
• 另一方面它采用编译期的静态分析，并且也加入了动态引用的方式;

• ES Module模块采用export和import关键字来实现模块化:

• export负责将模块内的内容导出;
• import负责从其他模块导入内容;

• 采用ES Module将自动采用严格模式:use strict
  

exports关键字

• export关键字将一个模块中的变量、函数、类等导出;
  
• 我们希望将其他中内容全部导出，它可以有如下的方式:

• 方式一:在语句声明的前面直接加上export关键字
  
• 方式二:将所有需要导出的标识符，放到export后面的 {}中

• 注意:这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的;
• 所以: export {name: name}，是错误的写法;

• 方式三:导出时给标识符起一个别名
  

代码演示

// 1.第一种方式: export 声明语句
export const name = "why"
export const age = 18
export function foo() {
  console.log("foo function")
}
export class Person {
}
// 2.第二种方式: export 导出 和 声明分开
const name = "why"
const age = 18
function foo() {
  console.log("foo function")
}
export {
  name,
  age,
  foo
}
// 3.第三种方式: 第二种导出时起别名
export {
   name as fName,
   age as fAge,
   foo as fFoo
}

import关键字

• import关键字负责从另外一个模块中导入内容
  
• 导入内容的方式也有多种:

• 方式一:import {标识符列表} from '模块';

• 注意:这里的{}也不是一个对象，里面只是存放导入的标识符列表内容;

• 方式二:导入时给标识符起别名
  
• 方式三:通过 * 将模块功能放到一个模块功能对象(a module object)上
  

代码演示

// 1.导入方式一: 普通的导入
import { name, age, foo } from "./foo.js"
import { fName, fAge, fFoo } from './foo.js'
// 2.导入方式二: 起别名
import { name as fName, age as fAge, foo as fFoo } from './foo.js'
// 3.导入方式三: 将导出的所有内容放到一个标识符中
import * as foo from './foo.js'
console.log(foo.name)
console.log(foo.age)
foo.foo()
const name = "main"
console.log(name)
console.log(age)

export和import结合使用

• 补充:export和import可以结合使用
  
• 为什么要这样做呢?

• 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中;
• 这样方便指定统一的接口规范，也方便阅读;
• 这个时候，我们就可以使用export和import结合使用;

代码演示

import { add, sub } from './math.js'
import { timeFormat, priceFormat } from './format.js'
export {
   add,
   sub,
   timeFormat,
   priceFormat
}

default用法

• 前面我们学习的导出功能都是有名字的导出(named exports):

• 在导出export时指定了名字;
• 在导入import时需要知道具体的名字;

• 还有一种导出叫做默认导出(default export)

• 默认导出export时可以不需要指定名字;
• 在导入时不需要使用 {}，并且可以自己来指定名字;
• 它也方便我们和现有的CommonJS等规范相互操作;

• 注意:在一个模块中，只能有一个默认导出(default export);
  

代码演示

const name = "why"
const age = 18
const foo = "foo value"
// 1.默认导出的方式一:
export {
  // named export
  name,
  // age as default,
  // foo as default
}
// 2.默认导出的方式二: 常见
export default foo
// 注意: 默认导出只能有一个