1.为什么前端要模块化
假设两个人合作写项目，引用的第一个js（a写的）里面定义了个变量，然后第二个js里面b修改了这个变量（可能命名重复但不知情），a又引用第三个js文件，再次调用这个变量，结果无法得出正确效果，造成变量污染
代码：
index.html：
<body>
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</body>
a.js:
var flag = true;
if(flag) {
console.log("flag is true");
}
b.js:
var flag = false;
c.js:
if(flag) {
console.log("c.js");
}
结果：
c并没有得到想要的结果，而且代码多起来这种bug难以排查，所以限制作用域十分重要
2.ES6模块化的实现
还是上面的代码，但script里面加一个属性
index.html：
<body>
<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
<script src="c.js" type="module"></script>
</body>
a.js:
var flag = true;
if(flag) {
console.log("flag is true");
}
b.js:
var flag = false;
c.js:
if(flag) {
console.log("c.js");
}
结果直接报错
说明各个文件的变量互不影响，无法用其他页的变量
3.ES6三种导入/导出方式（a.js做导出，c.js做导入）：
// 导出方式中少了默认导出，写在文章最后面
a.js :
var flag = true;
if(flag) {
console.log("a: flag is true");
}
function sum(num1, num2) {
return num1 + num2;
}
console.log("a:sum " + sum(10, 20));
//1.导出方式1，统一导出，导出函数/变量为例子：
export {
flag, sum
}
//2.导出方式2，分别导出，导出类/函数为例子
export function mul(num1, num2) {
return num1 * num2;
}
export class Person {
run(){
console.log("run");
}
}
// 以下三种方式（其实约等于两种）无论哪种导出方式（包括默认导出）都可以接收，
// 前两种统称为解构赋值导入，第三种称为通用导入，还有一种写在文章最后面，就是默认导出的专属导入
c.js：
//1.导入方式1，直接导入函数/变量（与导入方式2区别不大）
import {flag, sum} from "./a.js";
if(flag) {
console.log("c.js");
}
console.log("c:sum from a", sum(10, 30));
//2.导入方式2，导入函数/类
import {mul, Person} from "./a.js";
console.log("c:mul from a", mul(10, 20));
var p =new Person();
p.run();
//3.全导入
import * as aaa from "./a.js";
console.log("c:sum from a by import *", aaa.sum(10, 30));
console.log("c:mul from a by import *", aaa.mul(10, 30));
三种导入的结果：
a.js：
export {
flag, sum
}
b.js:
import {flag} from "./a.js";
flag = 0;
导入不能直接修改，会报错：
如果导入其他文件里面想要用不同的名字和不加大括号：
默认导出的导入方式
export default {
name: "TabBar"
}
import TabBar from "./components/TabBar";
3366
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
