一、模块化
1. 引入原因
1. 一个html中,引入的多个js文件可能存在同名变量,从而引起冲突
2. 在html中引入的js的顺序不同,可能导致不同的结果
3. var会引发 let就会直接编译错误
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--引入其他两个js-->
<script src="second.js"></script>
<script src="first.js"></script>
<script>
console.log(flag)
</script>
</body>
</html>
first.js
var flag = true;
second.js
var flag = false;
2. 常见模块化框架
CommonJS AMD CMD
ES6的Modules(最常用)
二、Moudles
1. 逐个导入
index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1. 模块化引入不同的js组件:各个组件的变量不会冲突
2. 不同js类似隔离的不同的房子,但是各个房子之间不能交互-->
<script src="second.js" type="module"></script>
<script src="first.js" type="module"></script>
</body>
</html>
first.js
/*1. 导出变量*/
let name = 'lucy'
export {name};
let age = 14;
let address = "shanxi";
export {age, address};
/*2. 导出函数*/
function add(num1, num2) {
return num1 + num2;
}
export {add}
/*3. 直接导出变量*/
export let sex = "man";
/*4. 直接导出函数*/
export function minus(num1, num2) {
return num1 - num2;
}
/*5. 直接导出类*/
export class people {
run(){
return "running";
}
}
second.js
/*导入方式一:别人导出什么(函数不带参数),这边取什么,名称不能变*/
/*1. 导入变量*/
import {name} from "./first.js";
console.log(name);
import {age,address} from "./first.js";
console.log(age,address);
/*2. 导入函数*/
import {add} from "./first.js";
console.log(add(1,2))
/*3. 直接导入变量*/
import {sex} from "./first.js";
console.log(sex);
/*4. 直接导入函数*/
import {minus} from "./first.js";
console.log(minus(4,1))
/*5. 直接导入类*/
import {people} from "./first.js";
let li = new people();
console.log(li.run());
2. 一次性导入
second.js
import {add, address, age, minus, name, people, sex} from "./first.js";
console.log(name);
console.log(age, address);
console.log(add(1, 2))
console.log(sex);
console.log(minus(4, 1))
let li = new people();
console.log(li.run());
second.js
import * as obj from "./first.js";
console.log(obj.name);
console.log(obj.age, obj.address);
console.log(obj.add(1, 2))
console.log(obj.sex);
console.log(obj.minus(4, 1))
let li = new obj.people();
console.log(li.run());