- 作用：
- 解决多人协作等引发的代码冲突的问题
- 防止作用域污染
- 提高代码的复用性
- 维护成本降低
-
一个文件就是一个独立的作用域，除非模块主动导出，其他地方才能使用
-
模块化只能在服务器环境下运行
服务器：一种软件程序，改程序会提供对外访问的功能，当外部程序访问到该服务器时，服务器会把响应的资源发送过去。
装了服务器软件的计算机，我们也称之为服务器。
-
export default
<!-- modules 中的代码-->
let c = 10;
let d = "a";
function fn(a,b){
return a + b;
}
// 一个模块中只能有一个 export default 导出
export default fn;
<!--使用-->
<script type="module">
// f 可以重新命名
import f from "./modules/index.js";
console.log(f(10,20));
</script>
- export：
<!-- modules 中的代码-->
let c = 10;
let d = "a";
function fn(a,b){
return a + b;
}
// 一个模块中只能有一个 default 导出, 但是可以有多个 export 导出
export default fn;
export {c,d} // 导出多条
export let e = "b";
<!--使用-->
<script type="module">
<!--这里名字c, d 要与modules中导出的名字保持一致，不能重新命名-->
import {c, d} from "./modules/index.js";
console.log(c, d);
</script>
- 如果即要接收export导出的，也要接收export default导出的
<script type="module">
// 起别名：：原名 as 新名字
// 重新命名之后，不能再叫原名，需要叫新名字
// f 为export default 导出的，{ } 中的为export导出的
// export导出的名字如果不用as重新命名，需要一一对应
import f, {c as cc,e} from "./modules/index.js";
console.log(f(10,20));
console.log(cc,e);
</script>
- 导出所有数据
<script type="module">
import * as obj from "./modules/index.js";
console.log(obj); //这里是导出的所有数据对象
console.log(obj.default) // 这里访问的是fn函数
console.log(obj.d);
- 前置依赖与按需加载
<script type="module">
// 前置依赖写法
// import 默认情况下 import 导入是前置依赖，也就是模块的导入，要写在前边
// import * as obj from "./modules/index.js";
document.onclick = async function(){
// 按需加载写法
// 这里的import方法内置了一个Promise
let obj = await import("./modules/index.js");
console.log(obj);
}
</script>
总结：
- 浏览器默认模块化 script 里加入 "type=module"；
- 导出 关键字 export 依赖前置(前置依赖)
- 导出 方式一 ：
export { a ,b , c} - 导出方式二 关键字 "as"
export { a as aa ,b , c} - 导出方式三
export let c = ()=>{console.log("I am c function...")} - 导出方式四
export default a;- 等同
export {a as default};
- 等同
- export 可以导出多个，export default 只能导出一个；
- 导出 方式一 ：
- 导入方式：关键字 import
- export导出的,命名要保持一致
import {aa , b , c} from './moduleb.js'; - export导出的，命名可以自定义；
import myfn from './moduleb.js'; - 通配符 "*"方式导入
import * as obj from './moduleb.js';
- export导出的,命名要保持一致
