模块化相关规范
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>