模块化是管理JS代码的一种手段，把代码拆分成小模块，提高代码维护性，复用性，拓展性。
模块类似与Java的包，可以从外部导入。
模块有三种导出方式
-
分别导出
-
统一导出
-
默认导出
- 三种导出方式可以混用。
模块化的关键字有export、import、as和default。
ES6的模块会自动开启严格模式。
在被导入时，JS会把整个模块当作一个对象。该对象内部属性、方法都是局部的。
模块栗子
定义外部模块temp.js
temp.js
const title="张三自传";
function fun() {
console.log("张三开心的嘞");
}
class Person {
constructor() {
console.log("张三构造器")
}
say(){
console.log("张三的say方法");
}
}
定义导入模块app.js，也会被当作程序的入口
//此时空白
定义首页index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入JS文件 添加type='module' 属性,否则不支持ES6的模块化 -->
<script src="./app.js" type="module"></script>
</head>
<body>
基础定义完毕
</body>
</html>
结构如下，（忽略文件夹名）
分别导出
-
在外部模块temp.js中使用export关键字选择需要导出的内容。
-
在导入模块app.js中
-
使用import关键字导入模块
-
使用as关键字给导入模块设置对象名。（类似与SQL的设置别名）
-
使用from关键字填写导入模块的地址。
-
因为被导入的模块会被解析成一个对象，所以需要设置对象名。
temp.js
export const title="张三自传";//选择导出属性title
export function fun() {//选择导出方法fun
console.log("张三开心的嘞");
}
class Person {
constructor() {
console.log("张三构造器")
}
say(){
console.log("张三的say方法");
}
}
app.js
//*表示temp.js中的所有成员 zs为设置的对象名
import * as zs from "./temp.js";
console.log(zs.title);//输出zs对象的属性title 打印内容 张三自传
zs.fun();//测试fun方法 打印内容 张三开心的嘞
let p1=new zs.Person();//报错 zs.Person is not a constructor
因为只选择导出常量title和方法fun()， 所以Person对象不会被找到。
统一导出
-
在外部模块temp.js最后，使用export+花括号{}关键字统一导出，花括号内选择需要导出的内容。
-
在导入模块app.js中
-
使用import关键字导入模块
-
使用as关键字给导入模块设置对象名。（类似与SQL的设置别名）
-
使用from关键字填写导入模块的地址。
-
放置最后仅是确保导出生效。
temp.js
const title="张三自传";
function fun() {
console.log("张三开心的嘞");
}
class Person {
constructor() {
console.log("张三构造器")
}
say(){
console.log("张三的say方法");
}
}
//可以是无序的
export {Person,title}
app.js
//可以使用解构表达式，但名一定要相同
import {title,Person} from "./temp.js";
//可以有多个import
import * as zs from "./temp.js";
let p1=new Person();//张三构造器
console.log(title);//张三自传
let p2=new zs.Person();//张三构造器
console.log(zs.title);//张三自传
解构表达式使用{ }表示对象，使用[ ]表示数组
默认导出
-
在外部模块temp.js最后，使用export+default关键字选择一个导出，唯一
-
在导入模块app.js中
- 看注释
放置最后仅是确保导出生效。
temp.js
const title="张三自传";
function fun() {
console.log("张三开心的嘞");
}
class Person {
constructor() {
console.log("张三构造器")
}
say(){
console.log("张三的say方法");
}
}
//默认导出title
export default title;
app.js
//常规导入
import * as zs from "./temp.js";
//因为default本身是JS中的关键字了，需要使用解构表达式
import {default as z} from "./temp.js";
//等价于使用解构表达式{default as t}
import t from "./temp.js";
console.log(zs.default);//张三自传
console.log(z.default);//undefined
console.log(z);//张三自传
console.log(t);//张三自传
三种导出混写
temp.js
//分别导出title
export const title = "张三自传";
function fun() {
console.log("张三开心的嘞");
}
class Person {
constructor() {
console.log("张三构造器")
}
say() {
console.log("张三的say方法");
}
}
//统一导出Person
export {Person}
//默认导出fun()
export default fun();
app.js
import * as z from "./temp.js";
import {title,Person} from "./temp.js";
import {default as t} from "./temp.js";
console.log(title);
t;
let p1=new Person();
p1.say();
console.log(z.title);
let p2=new z.Person();
p2.say();
默认导出被第一个调用了，在中间新增z.default或者z.default()或者z都无法在控制台看见方法fun()，所以个人建议默认导出最好不用