模块使用不同方式加载的JS文件。
模块化分为导出(export)@与导入(import)两个模块。
特点:
(1)模块自动开启严格模式;
(2)每一个模块内声明的变量都是局部变量;
(3)模块中可以导入和导出各种类型的变量;
(4)每一个模块只加载一次(是单例的),若再去加载同目录下同文件,直接从内存中读取;
(5)对于需要让模块外部代码访问的内容,模块必须导出它们;
基本的导出
使用export关键字将已发布代码部分公开给其他模块。
新建一个example.js文件,内容如下:
// 导出数据
export var color = "red";
export let name = "Nicholas";
export const magicNumber = 7;
// 导出函数
export function sum(num1, num2) {
return num1 + num1;
}
// 导出类
export class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
}
// 此函数为模块私有
function subtract(num1, num2) {
return num1 - num2;
}
// 定义一个函数……
function multiply(num1, num2) {
return num1 * num2;
}
// ……稍后将其导出
export { multiply };
单个导入
import { sum } from "./example.js";
let result = sum(1,2);
console.log(result); //3
多个导入
import { sum, multiply, magicNumber } from "./example.js";
console.log(sum(1,magicNumber)); // 8
console.log(multiply(1, 2)); // 2
完全导入(命名空间导入)
import * as example from "./example.js";
console.log(example.sum(1, example.magicNumber)); // 8
console.log(example.multiply(1, 2)); // 2
重命名导出,使用as关键字指定新名称
function sum(num1, num2) {
return num1 + num2;
}
export { sum as add };
重命名导入
import { add as sum } from "./example.js";
导出默认值,使用default关键字,函数不需要名称,因为代表此模块自身。
export default function(num1, num2) { //方式1
return num1 + num2;
}
导出默认值也可以使用下面两种方式
function sum(num1, num2) {
return num1 + num2;
}
export default sum; //方式2
//export { sum as default }; //方法3
导入默认值(不使用花括号)
import sum from "./example.js";
console.log(sum(1, 2)); // 3
既导出默认值,又导出非默认的绑定模块
export let color = "red";
export default function(num1, num2) {
return num1 + num2;
}
同时导入 color 以及作为默认值的函数
import sum, { color } from "./example.js";
//import { default as sum, color } from "example"; //使用重命名语法进行默认值的导入,等价于上行
console.log(sum(1, 2)); // 3
console.log(color); // "red"
当前模块已导入内容再导出
//方式1
import { sum } from "./example.js";
export { sum }
//方式2
//export { sum } from "./example.js";
//方式3:将一个值用不同名称导出
//export { sum as add } from "./example.js";
//方式4:将所有值完全导出
//export * from "./example.js";
无绑定的导入,如有些模块只是修改全局作用域的对象,则导入时可以简化为
import "./example.js";
Web浏览器使用模块
<!-- type="module"表示将指定文件中的代码当作模块 -->
<script type="module" src="module.js"></script>
<!-- 内联脚本导入模块 -->
<script type="module">
import { sum } from "./example.js";
let result = sum(1, 2);
</script>