网站首页JavaScript

export和import的使用

<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>export和import的使用</title>
</head>
<body>
<!-- 重要提醒：type属性必须设为“module”，不能设为“text/javascript” -->
<script type="module" src="./demo.js"></script>
</body>
</html>



// 文件：math.js

// 导出pi()函数
export function pi() {
    return 3.1415926535898;
};

// 导出mt_rand()函数
export function mt_rand(min, max) {
    let argc = arguments.length;

    if (argc === 0) {
        min = 0;
        max = 2147483647;
    } else if (argc === 1) {
        throw new Error('Warning: mt_rand() expects exactly 2 parameters, 1 given');
    } else {
        min = parseInt(min, 10);
        max = parseInt(max, 10);
    }

    return Math.floor(Math.random() * (max - min + 1)) + min;
    ;
};



// 文件：demo.js

// 说明：在math.js文件里，是先导出pi()函数，再导出mt_rand()函数，但是导入时并没有数量和顺序的限制。
import {mt_rand, pi} from './math.js';
// import {mt_rand} from './math.js'; // 可以单独导入mt_rand()函数
// import {pi} from './math.js';      // 可以单独导入pi()函数

for (let i = 1; i <= 5; i++) {
    let rand = mt_rand(10000, 99999);
    console.info('第' + i + '个随机数：' + rand);
}
// 第1个随机数：31718
// 第2个随机数：12524
// 第3个随机数：81645
// 第4个随机数：25503
// 第5个随机数：51524

console.info('圆周率：' + pi());
// 圆周率：3.1415926535898


//========== 总结 ==========//
// 使用export和import的好处
// --------------------------------------------------
// 代码组织：将代码分割成多个模块，每个模块负责特定的功能或任务，使代码更易于管理和维护。
// 依赖管理：通过明确指定模块的依赖关系，使得代码更易于理解和测试。
// 重 用 性：不同的模块可以重用相同的代码，减少了重复的代码量。
// 封 装 性：模块内部的状态和实现细节被隐藏起来，只暴露必要的接口给外部使用，提高了代码的安全性和可维护性。

Copyright © 2024 码农人生. All Rights Reserved