Node与ES6模块

最新推荐文章于 2024-03-05 13:53:09 发布

黄名富

最新推荐文章于 2024-03-05 13:53:09 发布

阅读量695

点赞数

分类专栏： JavaScript权威指南文章标签：前端 node.js javascript

本文链接：https://blog.csdn.net/qq_25308331/article/details/133800299

版权

JavaScript权威指南专栏收录该内容

15 篇文章 0 订阅

订阅专栏

模块化的作用主要体现在封装和隐藏私有实现细节，以及保证全局命名空间清洁上，因而模块之间不会意外修改各自定义的变量、函数和类。

1 模块

1.1 代码打包工具基本工作原理

在函数中声明的局部变量和嵌套函数都是函数私有的。这意味着我们可以使用立即调用的函数表达式来实现某种模块化，把实现细节和辅助函数隐藏在包装函数中，只将模块的公共API作为函数的值返回。

打包工具把每个文件的内容包装在一个立即调用的函数表达式中，还可以跟踪每个函数的返回值，并将所有内容拼接为一个大文件：

以上代码展示了浏览器代码打包工具(webpack)的基本原理，也是对Node程序中使用的require()函数的一个简单介绍。

1.2 Node中的模块

在Node模块中，每个文件都是一个拥有私有命名空间的独立模块。在一个文件中定义的常量、变量、函数和类对该文件而言都是私有的，除非该文件会导出它们。而模块导出值只有被另一个模块显式导入后才会在该模块中可见。

Node使用require()函数导入其他模块，通过设置Exports对象属性或完全替换module.exports对象来导出公共API。

function product() {
console.log("生产商品");
}

function design() {
console.log("设计商品");
}

module.exports = { product, design };

factory.js

module.exports = function () {
console.log("消费商品")
};

customer.js

const factory = require("./factory");
const customer = require("./customer");

factory.design(); // 设计商品
factory.product(); // 生产商品
customer(); // 消费商品

shop.js

1.3 ES6中的模块

ES6模块化与Node的模块化在概念上是相同的。与Node模块的区别在于导入和导出所用的语法，以及浏览器中定义模块的方式。

要从ES6模块导出，只要在声明前加上export关键字即可。导入其他模块要使用import关键字。

function work() {
console.log("努力工作");
}

function fished() {
console.log("偶尔摸鱼");
}

export { work, fished }

employee.js

export default function () {
console.log("发薪水");
}

boss.js

export { work, fished } from "./employee.js";
export { default as payByBoss } from "./boss.js";
console.log(import.meta.url); // http://localhost:63342/js-study/day2/company.js

company.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公司</title>
</head>
<body>
<script type="module">
    import { work, fished, payByBoss } from "./company.js";
    work(); // 努力工作
    fished(); // 偶尔摸鱼
    payByBoss(); // 发薪水
</script>
</body>
</html>

company.html