模块

收录于

一个小时学会JavaScript

2023-06-07 17:45 · 阅读时长4分钟

随着业务的增长，项目会越来越大，这个时候我们就需要把代码拆分到不同的文件中，这样可以让每个文件都更加简洁，也更容易管理，这些文件就是所谓的模块。目前 JavaScript 的模块标准是在 ECMAScript 6 (ES6) 规范中定义，我们可以使用 import 引用模块，使用 export 导出模块。

ES6 模块规范

如果想要使用 ES6 模块功能，我们还需要做一些额外的配置，如果是 node.js 项目，需要在 package.json 中配置type为module。

{    
    ...
    "type": "module"
    ...
}

如果是 HTML 页面，则需要在 script 标签中设置 type 属性为 module。

<script type="module" src="index.js"></script>

假如我们有两个文件，main.js 和 math.js ，我们想要在 main.js 中调用 math.js 中的方法，我们可以这样做。

// math.js 导出 sum 函数
export function sum(num1, num2) {
    return num1 + num2
}

// main.js 引入 math.js 中的 sum 函数
import { sum } from "./math.js"
// 直接调用引入的 sum 函数
let result = sum(1, 2)

export 和 import 除了这种形式以外，还有几种其它形式，下面我们看几种常用的形式。

// math.js
export default function sum(num1, num2) {    
    return num1 + num2
}

// main.js
import sum from "./math.js"

// math.js
function sum(num1, num2) {    
    return num1 + num2
}
export { sum }

// main.js
import { sum } from "./math.js"

除了函数以外，还可以导出变量和常量，不过导出后的变量和常量都是只读不可修改，如果是对象则可以修改它的属性值。

// math.js
export const PI = 3.1415926

// main.js
import { PI } from "./math.js"

除了 ES6 定义的模块规范，还有一种常用的模块管理方式CommonJS，不过这种方式通常用于服务端开发，很少用于 Web 前端开发，也就是 HTML 网页中。它使用 require / exports 来进行导入和导出模块。

如果想要使用CommonJS来管理模块，需要在 package.json 中，移除type属性，或者配置type为commonjs。

{    
    ...
    "type": "commonjs"
    ...
}

假如我们有两个文件，main.js 和 math.js ，我们想要在 main.js 中调用 math.js 中的方法，我们可以这样做。

// math.js
function sum(num1, num2) {    
    return num1 + num2
}
module.exports = { sum }

// main.js
const { sum } = require("./math")
let result = sum(1, 2)
console.log(result)

还可以使用这种方式导出

// math.js
exports.sum = function sum(num1, num2) {    
    return num1 + num2
}

同样的除了函数以外，还可以导出变量和常量。

// math.js
exports.PI = 3.1415926

// main.js
const { PI } = require("./math")
console.log(PI)

JavaScript模块