目录
1、模块化概述
将复杂的功能分解成各自独立的子模块，所有子模块按照一种方式进行组合，最终完成复杂功能的过程，它的优势是各模块是独立工作的，更利于复用和维护，同时更有利于节略资源，提高效率。
2、export关键字
2.1、概述
将一个项目拆分成一个个独立的模块后，如登录模块、注册模块、公用模块等，各自放入一个单独的文件，若一个模块想调用另一个模块的某个方法，就要使用关键字export。
export关键字是导出模块中的变量和方法。
export关键字就像是一个标签，标记了export关键字的就是可以给其他模块使用，没有标记的就是私有的，不可外部访问。
2.2、使用export关键字导出的几种方法
2.2.1、直接导出单个特性
export let name = "小蓝同学";
export let age = 18;
let work = "一直在写代码呢！";
在这段代码中，name和age前有export关键字，这两个变量就是公开出去的，可以被其他模块 使用，而work变量则只能在这个模块中使用。
2.2.2、合并成一个对象导出（导出列表）
let name = "小蓝同学";
let age = 18;
let work = "一直在写代码呢！";
export { name, age };将要导出的变量合并成一个对象。
export关键字不仅可以导出模块中的变量，还可以导出模块中的方法，如：
function say() {
console.log("我的名字叫小蓝");
}
function act() {
console.log("我的工作是写代码");
}
export function log() {
console.log("说点什么。。。");
}
export { say, act };以上代码就用export关键字导出了log方法，和以对象的形式导出了say方法和act方法。
注意：导出方法时不要在方法名后加括号，只输出方法的名称就行，否则会报错。
2.2.3、用关键字as来修改导出后的名称（重命名导出）
export {
say(), //报错，不能加括号
act as userWork
}以上代码是将导出的act方法改为useWork方法。
2.3、导出默认值（default）
2.3.1、默认导出单个特性
export default function log() {
console.log("说点什么。。。");
}
function say() {
console.log("我的名字叫小蓝");
}
export default say;2.3.2、as关键字导出默认值
function act() {
console.log("我的工作是写代码");
}
export { act as default};3、import
3.1、概述
import的功能是导入已经使用关键字export导出的内容，它们是对应关系，
export负责导出，而import则用于接受导出的内容，即负责导入。
3.2、导入方法
3.2.1浏览器中导入
<script type="module" src="app.js"></script>
<script type="module">
import {sum} from "./example.mjs" ;
let result = sum( 1,2);
console.log ( result) ;<
/script>
- 使用<script>元素以及src属性了制定代码价值的位置。
以上代码就在当前浏览器界面导入了app.js文件，就可以使用app.js里面导出的变量和方法。不使用src属性则需要 。导入的是整个模块。
- 使用<script>元素但不使用src属性，来嵌入内联的JS代码。·使用type=“module”。
以上代码就在当前浏览器界面不使用scr属性导入了example.js文件。导入的是模块中的多个绑定。
3.2.2、大括号导入（导入多个绑定）
在当前js文件中导入，而非浏览器导入则不需要<script>标签。但是语法是一样的。
关键字 import 在输入模块中加载输出模块的变量时，使用大括号包裹全部变量名（可以单个也可以多个），各个变量之间使用逗号分割，再通过 from 指定输出模块的路径，这个路径可以是绝对的，也可以是相对的。
import {sum,act} from "./example.mjs"; //输出模块位置
console.log(sum(2,3));以上代码是在当前js文件中导入example.mjs文件中的sum函数和act函数。
3.2.3、完全导入一个模块（*）
import* as example from "./ example.mjs" ;
console.log(example.sum( 1, example.magicNumber));
console.log (example.multiply ( 1，2));
console.log(example) ;
以上代码是使用*（星号）将整个example.mjs文件导入当前js文件中。整体加载是静态的，不能改变值，example.sum=123;是不允许的。
3.2.4、重命名导入 （as关键字）
import { 变量1 as a1，变量2 as fn，变量3，...} from 输出模块位置3.3、导入默认值
以下代码都在当前app.js文件中执行默认导入。
3.3.1、导入单个特征
import div from "./ example.mjs";
console.log(div(6，2));
3.3.2、导入多个特性和对象（用逗号隔开）
import div, { multiply } from "./ example.mjs";
console.log(div(6,2)) ;.
console.log(multiply(6，2) );
3.3.3、重命名默认导入
import { default as div,multiply } from "./example.mjs" ;
console.log(div(6,2));
console.log(multiply(6，2));
注意：
- 无论对同一个模块使用了多少次import ,该模块都只会执行一次。
- export和import 必须被用在其他语句或表达式的外部，只能在模块的顶级作用域中使用。
- export和import要处于模块顶层，否则会报错。
4、实例：
4.1、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="./app.js"></script>
</head>
<body>
</body>
</html>4.2、app.js文件
//import导入
import {name,person as p,steName} from "./example.js";
console.log(name);//name=hello
p.name="world";
console.log(p);//p={name:"world",age:20}
steName("tom");
console.log(name);//tom
4.3、example.js文件
//export导出，在模块代码中导出暴露在外面供其他使用
export let name="hello";
export let person={name,age:20};
export function steName(n){
name=n;
}
console.log("(in module example)",name,person.age);
//(in module example) hello 20
4.4、执行顺序及结果
4.4.1、结果：
4.4.2、顺序：
- 先执行html文件，
- 再执行导入文件app.js中import导入的模块文件example.js，
- 再执行app.js
- 由外向内加载(html->app.js->example.js)，
- 由内向外解析（先example.js->appjs->html)
3975
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
