ES6模块化规范

ES6模块化规范是一个的范，它是在语言标准的层面上实现了模块化功能，是目前模块化规范，且浏览器与服务端均支持该规范。

初步体验

1. 创建school.js

// 导出name
export let name = {str:'折木'}
// 导出slogan
export const slogan = '任何可以用js实现，终将使用js实现！'

// 导出name
export function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

2. 创建student.js

// 导出name
export const name = '张三'
// 导出motto
export const motto = '相信明天会更好！'

// 导出getTel
export function getTel (){
  return '19986494173'
}

function getHobby(){
  return ['抽烟','喝酒','coding']
}

3. 创建index.js

// 引入school模块暴露的所有内容
import * as school from './school.js'

// 引入student模块暴露的所有内容
import * as student from './student.js'

4. 页面中引入index.js

<script type="module" src="./index.js"></script>

Node中运行ES6模块

Node.js中运行ES6模块代码有两种方式：

• 方式一：将js文件后缀从.js 改为.mjs，Node 则会自动识别ES6模块。
• 方式二：在package.json中设置type属性值为module。

导出数据

ES6模块化提供3 种导出方式：

1. 分别导出
2. 统一导出
3. 默认导出

分别导出

备注：

在上方【初步体验中】环节，我们使用的导出方式就是【分别导出】

// 导出name
export let name = {str:'折木'}
// 导出slogan
export const slogan = '任何可以用js实现，终将使用js实现！'

// 导出getTel
export function getTel (){
  return '19986494173'
}

统一导出

const name = {str:'折木'}
const slogan = '任何可以用js实现，终将使用js实现！'

function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

// 统一导出了：name,slogan,getTel
export {name,slogan,getTel}

默认导出

const name = '折木'
const motto = '任何可以用js实现，终将使用js实现！'

function getTel (){
  return '19986494173'
}

function getHobby(){
  return ['抽烟','喝酒','coding']
}

//默认导出：name,motto,getTel
export default {name,motto,getTel}

备注：

上述多种导出方式，可以同时使用

// 导出name ———— 分别导出
export const name = {str:'折木'}
const slogan = '任何可以用js实现，终将使用js实现！'

function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

// 导出slogan ———— 统一导出
export {slogan}
// 导出getTel ———— 默认导出
export default getTel

导入数据

对于ES6模块化来说，使用何种，要根据决定。

导入全部（通用）

可以将模块中的所有导出内容整合到一个对象中。

import * as school from './school.js'

命名导入（对应导出方式：分别导出、统一导出）

导出数据的模块

//分别导出
export const name = {str:'折木'} 
//分别导出
export const slogan = '任何可以用js实现，终将使用js实现！' 

function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

//统一导出
export { getTel }

命名导入：

import { name,slogan,getTel } from './school.js'

通过as重命名：

import { name as myName,slogan,getTel } from './school.js'

默认导入（对应导出方式：默认导出）

导出数据的模块

const name = '折木'
const motto = '走自己的路，让别人五路可走！'

function getTel (){
  return '19986494173'
}

function getHobby(){
  return ['抽烟','喝酒','coding']
}

//使用默认导出的方式，导出一个对象，对象中包含着数据
export default { name,motto,getTel }

默认导入：

import student from './student.js' //默认导出的名字可以修改，不是必须为student

与可以混合使用

导出数据的模块

//分别导出
export const name = {str:'折木'} 
//分别导出
export const slogan = '走自己的路，让别人五路可走！'

function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

//统一导出
export default getTel

【命名导入】与【默认导入】混合使用，且默认导入的内容必须放在前方：

import getTel,{name,slogan} from './school.js'

动态导入（通用）

允许在运行时模块，返回值是一个Promise。

const school = await import('./school.js');
console.log(school)

import可以不接收任何数据

例如只是让mock.js参与运行

import './mock.js'

提示

此时，我们感受到模块化确实解决了

数据引用问题

思考1： 如下代码的输出结果是什么？（不要想太多，不涉及模块化相关知识）

function count (){
  let sum = 1
  function increment(){
    sum += 1
  }
  return {sum,increment}
}

const {sum,increment} = count()

console.log(sum)
increment() 
increment()
console.log(sum)

思考2：使用CommonJS规范，编写如下代码，输出结果是什么？

count.js

let sum = 1

function increment (){
  sum += 1
}

module.exports = {sum,increment}

index.js

const {sum,increment} = require('./count.js')

console.log(sum)
increment()
increment()
console.log(sum)

思考3：使用ES6模块化规范，编写如下代码，输出结果是什么？

count.js

let sum = 1

function increment(){
  sum += 1
}

export {sum,increment}

index.js

import {sum,increment} from './count.js'

console.log(sum) //1
increment()
increment()
console.log(sum) //3

使用原则

导出的常量，务必用const定义。