模块系统

2021-11-23 大约 2 分钟

# 模块系统

JavaScript 是一个 10 天造就的语言,不可避免地很多地方会考虑不周到,遗留或多或少的语言糟粕。

比如,其他很多语言都有的模块系统,JavaScript 就没有。

前端程序员都知道,我们写一个页面,通过<script>标签的方式将各种 js 引入进来,其实他们就相当于写在同一个文件里。

也就是说,如果我们定义了一个相同的变量名和函数,后面变量和函数,会将之前引入的覆盖掉。

这就很棘手,不利于多人合作和问题排查。

那么,作为晚 JavaScript 14 年诞生的 Node.js,显然会避免这种问题的发生。

而我们的 JavaScript 14 周岁之际,也通过另外一种形式,实现了自己的模块化编程开发之道。

那么,什么是模块化呢?

我们这里暂时只需要记住这几个关键字。

  • module
  • exports
  • require

那么,示例代码如下。

a.js 文件

// 使用exports导出一个plus函数,传入2个数字,返回两数之和
exports.plus = function (x, y) {
    return x + y;
};
1
2
3
4

b.js 文件

// 使用require引入a.js文件,并使用plus函数求和
let mymath = require("./a.js");
let sum = mymath.plus(1, 2);
console.log(sum); // 结果:3
1
2
3
4

这样,我们就能在任意不同的文件里面,定义相同的函数和变量,然后导入使用,而不会引起变量冲突。

那么,module 的作用是什么呢?请看代码。

c.js 文件

// 只导出一个函数
module.exports = function (x, y) {
    return x + y;
};
1
2
3
4

d.js 文件

// 引入的c.js文件就是一个函数
let plus = require("./c.js");
let sum = plus(1, 2);
console.log(sum); // 结果:3
1
2
3
4

所以,同学们,看到区别没有?当然,这是比较简单的区别,更深的原理探究,将在后续文章分享。

更多内容,请访问 陈随易 https://chensuiyi.com (opens new window)

上次编辑于: 2021年11月23日 21:04
贡献者: chensuiyi