模块

模块介绍

一个 .js 文件即一个模块 模块之间可以通过关键字 import 与 export 相互加载

使用模块

export

在变量或函数前使用关键字 export 表明此变量或函数可以被其他模块 import

export function fun()
{
    ...
}
export let val = 0; 

import

加载目标模块, 并将其他模块中 export 的变量或函数导入当前模块, 名称不变

import {fun} from "./test.js"
fun();

浏览器

允许在浏览器中使用模块, 但其 type 属性要为 module

<script type='module' src='./test.js'></script>

且只用使用 html:// 访问下, module 才能生效, 直接打开 html 文件则失效

模块功能

默认严格模式

使用模块时, 默认使用严格模式, 变量在使用前必须声明

模块作用域

一个模块中的非 export 变量不能被另一个模块访问 当不同的模块 export 了同一个模块的同一个变量 两个模块 export 到的变量为同一个

// a.js
import {val} from "./test.js"
val = 100;
// b.js
console.log(val);//输出100

模块仅在第一次导入时解析

如果同一个模块被导入到多个其他位置，那么它的代码只会执行一次 即使多次 import, 模块仅会运行一次

模块中的 this

在模块中最外层的 this 为 undefined

导入与导出语法

export {}

通过 export {...} 将多个函数/变量同时导出 并且分离 export 与声明

import *

import * as obj from "./obj.js"

将模块 obj.js 以 obj 的成员的形式导出 此时从 obj.js 导出的变量将成为对象 obj 的成员 不推荐

import as

import {fun as f, val as v} from "./test.js"

使用 as 可以对导入的变量起别名

export as

也可以在导出时起别名

export {fun as f, val as v}

export default

当只有一个变量/函数被导出时, 可以使用 default 关键字 default 也可视为一个变量名, 在导出时将会把名称为 default 的变量默认导出

//a.js
export default function{...} // default 导出的变量/函数允许没有名称
//b.js
function b(){...}
export{b as default} // 当以名称 default 导出时, 也视为默认导出
//import.js
import a from "./a.js" // 导入默认导出模块时不需要加括号
import c from "./b.js" // 也不要求与导出变量同名

不推荐

export from

导入后导出

export {default as a} from "./a.js"
export {fun} from "./test.js"

当模块的功能由多个小模块构成时, 可将功能在一个 index.js 中集中导出 可以使用此方法

动态导入

import 语句不能用于 if 等结构内 可以使用 import() 以动态导入(不是函数, 为语法结构) 将返回一个 result 为所有导出的 Promise

let obj = await import("./a.js")
obj.default()// 当有默认导出时, 导出的变量名为 default

Node.js 模块

导入

node.js 中使用函数 require 导入模块 对于 npm 管理的模块可以直接输入模块名 否则要指定路径

const obj = require("./obj")

除了 .js 还可以导入 .json 与 .node (二进制模块) 其中, .js 可以省略

导出

// 导出多个变量时的导出方式
exports.fun = function()
{...}
// 导出单个变量的导出方式
module.exports = {
    ...
}
//只能使用其中一种