为什么引入模块化思想?
当我们是以一个开发小组的形式开发项目,每个人负责项目的某个模块,若没有模块化思想,各模块之间定义的变量,方法很容易交杂在一起导致错误。
模块化实现的基本思想
闭包
- 在匿名函数内部,定义一个对象
- 给对象添加各种需要暴露到外面的属性和方法
- 将这个对象返回,外面加一个ModuleA接收
var ModuleA=(function(){
//1、定义一个对象
var obj={};
//2、在对象内部添加变量和方法
obj.flag=true //属性flag
obj.myFunc=function(info){
console.log(info);
//3、返回对象
return obj;
}
使用:
if(ModuleA.flag){
console.log('输出内容');
}
moduleA.myFunc('输出');
常见的模块化规范:
- CommonJS
- AMD
- CMD
- ES6的Modules
export / import
导出和导入,一旦你通过导出的方式给别人暴露出来,任何人只需要通过导入的方式就可以调用。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Es6模块化</title>
</head>
<body>
<script src="./xiaoming.js" type="module"></script>
<script src="./xiaohong.js" type="module"></script>
<script src="./xiaogang.js" type="module"></script>
</body>
</html>
xiaoming.js:
const name='xiaoming';
function sum(num1,num2) {
return num1+num2;
}
if (flag){
console.log(sum(20,300))
}
//导出方式1
export {
name,sum
}
//导出方式2
export var age=18;
export var flag=true;
export function sum1(num1,num2){
return num1+num2;
}
//Es5定义类
function Person5() {
}
//Es6定义类
export class Person6 {
run(){
console.log('奔跑')
}
}
//导出方式3 export default 导入这可以自己明明,当然default导出时只能设置一个
const city='山东青岛';
export default city;
//导出方式2
export var age=18;
export var flag=true;
xiaogang.js:
//导入方式1
import {flag} from "./xiaoming.js";
//导入方式2 导入export default时可以随意命名
import abcd from "./xiaoming.js";
//导入方式3 全部统一导入
import * as abc from "./xiaoming.js"
if(flag){
console.log('很强');
console.log(abc.name);
console.log(abcd);
}
输出结果: