ES6中的模块化规范

模块化相关规范

1.AMD

Require.js()

2.CMD

Sea.js()

3.CommonJS

• 模块分为单文件模块与包
• 模块成员导出：module.exports和exports
• 模块成员导入：require(‘模块标识符’)

*4.ES6模块化

在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD，CMD，CommonJS等模块化规范

但是这些社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准

• AMD和CMD适用于浏览器端的Javascript模块化
• CommonJS适用于服务器端的Javascript模块化

因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发

ES6模块化规范中定义：

• 每个JS文件哦都是一个独立的模块
• 导入模块成员使用import关键字
• 暴漏模块成员使用export关键字

1.默认导出与默认导入

• 默认导出：export default 默认导出成员
• 默认导入：import 接收名称 from ‘模板标识符’

let a =10
let c = 20
let d = 30
function show(){}
export default{
    a,c,show
}

import m1 from './m1.js'	//JS文件相对路径
console.log(m1)
{a:10,c:20,show:[Function:show]}

2.按需导出与按需导入

• 按需导出：export let s1 = 10
• 按需导入：import { s1 } from ‘模板标识符’
• as为导出变量重新命名

let a =10
let c = 20
let d = 30
function show(){}
export default{
    a,c,show
}
export let s1 = 30
export let s2 = 20
export function say() { }

import m1,{s1,s2 as ss2,say} from './m1.js'	//JS文件相对路径
console.log(m1)
console.log(s1)
console.log(ss2)
console.log(say)

3.直接导入并执行模块代码

指向单纯执行莫格模块中的代码，并不需要得到模块中向外暴漏的成员，此时，可以直接导入并执行模块代码

import './m2.js'

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

4.在HTML中引入

<script type="module">
    //引入代码
</script>