模块化
模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
模块化规范产品
ES6 之前的模块化规范有:
- CommonJS => NodeJS、Browersify
- AMD => requireJS
- CMD => seaJS
ES6 模块化语法
- export 命令用于规定模块的外对接口
- import 命令用于输入其他模块提供的功能
基本使用
模块暴露
// 分别暴露 m1.js
export let school = '福田中学'
export function teach() {
console.log('陈朝鸿1')
}
// 统一暴露 m2.js
let school = '福田中学'
function findJob() {
console.log('找工作')
}
export {school, findJob}
// 默认暴露 m3.js
export default {
school: '福田中学',
change: function () {
console.log('改变自己')
}
}
<script type="module">
// 1.通用的导入方式
// 引入 m1.js 模块内容
// import * as m1 from './js/m1.js'
// console.log(m1)
// 引入 m2.js 模块内容
// import * as m2 from './js/m2.js'
// 引入 m3.js 模块内容
// import * as m3 from './js/m3.js'
// console.log(m3)
// m3.default.change()
// 2.解构赋值形式
// import {school, teach} from './js/m1.js'
// import {school as fz, findJob} from "./js/m2.js"
// import {default as m3} from './js/m3.js'
// console.log(m3)
// 3.简便形式
// import m3 from './js/m3.js'
// console.log(m3)
</script>