介绍
模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。
模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
ES6 之前的模块化规范有
- CommonJS => NodeJS、Browserify
- AMD => requireJS
- CMD => seaJS
ES6 模块化语法
模块功能主要由两个命令构成:export 和 import。
- export 命令用于规定模块的对外接口
- import 命令用于输入其他模块提供的功能
暴露方式
1、分别暴露
export let school = '尚硅谷';
export function teach() {console.log("我们可以教给你开发技能");
}
2、统一暴露
let school = '尚硅谷';
function findJob(){console.log("我们可以帮助你找工作!!");
}
export {school, findJob};
3、默认暴露
export default {school: 'ATGUIGU',change: function(){console.log("我们可以改变你!!");}
}
导入
<script type="module">//1. 通用的导入方式//引入 m1.js 模块内容// import * as m1 from "./src/js/m1.js";// //引入 m2.js 模块内容// import * as m2 from "./src/js/m2.js";// //引入 m3.js // import * as m3 from "./src/js/m3.js";//2. 解构赋值形式// import {school, teach} from "./src/js/m1.js";// import {school as guigu, findJob} from "./src/js/m2.js";// import {default as m3} from "./src/js/m3.js";//3. 简便形式 针对默认暴露// import m3 from "./src/js/m3.js";// console.log(m3);
</script>