1、为什么要使用模块化
当我们是以一个开发小组的形式开发项目,每个人负责项目的某个模块,若没有模块化思想,各模块之间定义的变量,方法很容易交杂在一起导致错误。
2、常见的模块化规范
- CommonJS
- AMD
- CMD
- ES6的Modules
3、export / import
导出和导入,一旦你通过导出的方式给别人暴露出来,任何人只需要通过导入的方式就可以调用。
实例:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./index.js"></script>
</head>
<body>
</body>
</html>
index.js:
// import 导入
// 按需导入
import { v1, v2 } from './sum.js';
//全部导入
import cal from './sum.js';
let sum1 = v1(1,2,3,4);
// let sum2 = v2(1,2,3,4);
// let sum1 = cal.v1(1,2,3,4);
// let sum2 = cal.v2(1,2,3,4);
console.log(sum1);
// console.log(sum2);
// console.log(cal.obj.name);
console.log(cal.fun());
sun.js
/ export 导出
// 函数 导出
export function v1(...arr) {
let sum = 0;
for (const iterator of arr) {
sum += iterator;
}
return sum;
}
export function v2(...arr) {
let sum1 = 0;
for (const iterator of arr) {
sum1 -= iterator;
}
return sum1;
}
// 对象 导出
export default {
fun(){ // 相当于 fun:function (){
return this.fun.name
},
fun2, //相当于fun2 : fun2
}
function fun2 (){
return "fun2"
}
// let obj = {
// name:"李四",
// age:18,
// sex:"男"
// }
// export default{
// v1,
// v2,
// obj
// }