深入理解 ES6 #13-用模块封装代码
什么是模块
模块是自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。
在模块顶部创建的变量不会自动被添加到全局变量作用域，这个变量仅在模块的顶级作用域中存在，而且模块必须导出一些外部代码可以访问的元素。
模块也可以从其他模块导入绑定。
在模块的顶部，this 的值是 undefined。
模块不支持 HTML 风格的代码注释。
导出的基本语法
用 export 关键字将一部分已发布的代码暴露给其它模块。
// 导出数据
export var color = "red";
export let name = "JiaJia";
export const magicNumber = 7
// 导出函数
export function sum(num1, num2) {
return num1 + num2;
}
// 导出类
export class Rectangle {
constructor(length, width) {
this.length = length;
this.width = width;
}
}
// this is private function
function subtract(num1, num2) {
return num1 - num2;
}
// define a function
function multiply(num1, num2) {
return num1 * num2;
}
// export it
export multiply;导入的基本语法
通过 import 关键字导入在另一个模块中导出的功能。
import { identifier1, identifier2 } from "./example.js"import 后面的大括号表示从给定模块导入的绑定（binding），关键字 from 表示从哪个模块导入给定的绑定。
当从模块中导入一个绑定时，它就好像使用 const 定义的一样。结果是你无法定义另一个同名变量（包括导入另一个同名绑定），也无法在 import 语句前使用标识符或改变绑定的值。
导入单个绑定
import { sum } from "./example.js";
console.log(sum(1, 2)); // 3
// 抛出错误
sum = 1;导入多个绑定
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不管在 import 语句中把一个模块导入了多少次，该模块只执行一次。
如果同一个应用程序中的其他模块也从 example.js 导入绑定，那么这些模块与此代码将使用相同的模块实例。
导入绑定的一个微妙怪异之处
export var name = "JiaJia";
export function setName(newName) {
name = newName;
}import { name, setName } from "./example.js";
console.log(name); // "JiaJia"
setName("L");
console.log(name); // "L"
name = "JiaJia"; // 抛出错误导出和导入时重命名
function sum(num1, num2) {
return num1 + num2;
}
export {
sum as add
};import { add as sum } from "./example.js";模块的默认值
模块的默认值指的是通过 default 关键字指定的单个变量、函数或类，只能为每个模块设置一个默认的导出值。
export default function (num1, num2) {
return num1 + num2;
}等同于
function sum (num1, num2) {
return num1 + num2;
}
export default sum;等同于
function sum (num1, num2) {
return num1 + num2;
}
export { sum as default };导入默认值
import sum from "./example.js";
console.log(sum(1, 2)); // 3导入默认值和以外的值：
import sum, { color } from "./example.js";或者
import { default as sum, color } from "./example.js";重新导出一个绑定
import { sum } from "./example.js";
export { sum }或者简写成如下形式：
export { sum } from "./example.js";导出时也可以定义别名
export { sum as add } from "./example.js";导出一切：
export * from "./example.js";无绑定导入
// 没有 export 或 import 的模块代码
Array.prototype.pushAll = function(items) {
if (!Array.isArray(items)) {
throw new TypeError("参数必须是一个数组");
}
return this.push(...items);
}import "./example.js"加载模块
在 Web 浏览器中使用模块
在
<script>元素中通过src属性指定一个加载代码的地址来加载 JavaScript 代码文件将 JavaScript 代码内嵌到没有
src属性的<script>元素中通过 Web Worker 或 Service Worker 的方法加载并执行 JavaScript 代码文件
在 <Script> 中使用模块
<!-- 加载一个 JavaScript 模块文件 -->
<script type="model" src="module.js"></script>
<!-- 内联引入一个模块 -->
<script type="model">
import { sum } from "./example.js";
let result = sum(1, 2);
</script>Web 浏览器中的模块加载顺序
模块按照它们出现在 HTML 文件中的顺序执行，也就是说，无论模块中包含的是内联代码还是指定 src 属性，第一个 <script type="module"> 总是在第二个之前执行。
Web 浏览器中的异步模块加载
当应用 async 属性时，脚本文件将在文件完全下载并解析后执行。
脚本在文档中的顺序不会影响脚本执行的顺序。
<!-- 无法保证这两个哪个先执行 -->
<script type="module" async src="module1.js"></script>
<script type="module" async src="module2.js"></script>将模块作为 Worker 加载
Worker，例如 Web Worker 和 Service Worker，可以在网页上下文之外执行 JavaScript 代码。
// 默认按照脚本的方式加载 script.js
let worker = new Worker("script.js");// 默认按照模块的方式加载 script.js
let worker = new Worker("script.js", { type: "module" });浏览器模块说明符解析
浏览器要求模块说明符具有以下几种格式之一：
- 以
/开头的解析为从根目录开始 - 以
./开头的解析为从当前目录开始 - 以
../开头的解析为从父目录开始 - 以 URL 格式
// 从 https://www.example.com/modules/example1.js 导入
import { first } from "./example1.js";
// 从 https://www.example.com/example2.js 导入
import { second } from "../example2.js";
// 从 https://www.example.com/example3.js 导入
import { third } from "./example3.js";
// 从 https://www.example.com/example4.js 导入
import { fourth } from "https://www.example.com/example4.js";