ES6模块---前端模块

ES6模块***（前端模块）

前端模块化分类

es6模块化诞生之前，js社区尝试提出了AMD,CMD，Commonjs模块化规范

AMD,CMD适用于浏览器端的JavaScript模块化规范

Commonjs适用于服务器端的JavaScript模块化

Es6既适用于浏览器端也适用于服务器端

ES6模块化规范定义

• 每个js文件都是一个独立的模块
• 导入其它模块成员使用 import
• 向外共享模块成员 适用 export

注意：
NodeJS默认仅支持Commonjs模块化规范，想基于node.js体验es6的模块化，需要配置
1：安装了 v14.15.1或更高版本的node
2：在package.json的根节点中添加  "type":"module"

默认导出

export default 默认导出的成员

注意：每个模块中，只允许使用唯一的一次export defaut ，否则会报错

var a = 10
function show() {}
const arr = [11, 22, 33]

export default {
  a,
  show,
}

默认导入

默认导入的时候接收名称可以是任意名称，只要是合法的成员名称就可以

// 导入export default 向外共享的成员
import aa from './01test.js'

console.log(aa)  //{ a: 10, show: [Function: show] }

按需导入

import aa, { s as ss, say, s1 } from './03test.js'

console.log(ss, say, s1)
console.log(aa)

按需导出

var a = 12
function show() {}
const arr = [11, 22, 333]

// 按需导出
export let s = 'aaa'
export function say() {}
export let s1 = true

export default {
  a,
  show,
  arr,
}

按需导入和按需导出的注意事项

• 每个模块中可以使用多次按需导出
• 按需导入的成员必须和按需导出的名称保持一致
• 按需导入时，可以使用as进行重命名
• 按需导入可以和默认导入一起使用

直接导入并 执行模块中的代码

如果只想单纯的指向某个模块中的代码，并不需要得到模块中向外共享的成员

for (let i = 0; i < 3; i++) {
  console.log(i)
}

import './06test.js'