Node中的js模块思想（module）

Author： YH_evIs
发布时间：November 5, 2019
25334views
4 comments
2592字数
Categories： JavaScript

#写在前头#
一般我们刚学习js的时候，我们会用外链的方式引入一个库，如：
```html
<script type="text/javascript" src="jquery"></script>
```
而随着我们所做的项目越来越大，就会发现一个严重的问题：因为外部不能调用局部变量的原因，每个所调用的库都需要自己去暴露一些参数，这就导致全局变量（也就是windows对象下的变量）会越来越多，这就意味着你会担心在未来的某一个时间会不会因为一些偶然的因素会因为全局污染的问题而导致windows这个对象原始参数被覆盖，所以我们在这里就需要所谓的模块（module）。

module的思想在于把一个大项目分解成互相依赖的小文件，再用简单的方式组合起来。

> 注：文中的“出水口”指把自身参数暴露给其他文件的方法，“入水口”指接收别的文件暴露参数的方法。

##ES6诞生之前的做法##
####出水口####
Node.js给每个js文件内置了两个对象：module和exports
我们可以使用这两个方法暴露自身“类”的一些参数，如：
```javascript
module.exports = {name: 'a',age:'18'}；
//或者
exports = {name: 'b',age:'15'}
```
然而，require引入的对象本质上是module.exports。这就产生了一个问题，当 module.exports和exports指向的不是同一块内存时，exports的内容就会失效。也就是说当上述两行代码写在一起时，实质上传输的内容是module.exports内的参数：
```javascript
let people = require('./上述js'); //require()方法详见下文入水口
console.log(people);//输出：{name: 'a'}
```

####入水口####
在ES5中用require方法可以接受其他文件的参数如：
```javascript
let { name, age} = require('./上述js');
```
或者你可以写成：
```javascript
let people = require('./上述js');
let name = people.name;
let age = people.age;
```
上面两种方法效果是一样的。

##E6诞生之后的做法##

es6新增export和export default导出模块，import导入模块：

#####export default的方法#####
```javascript
const Programmer = {name: 'a',age:25}
export default Programmer
```
对应的“入水口”
```javascript
import Programmer from './a.js'
```
#####export的方法#####
```javascript
//a.js
const uncle = {name: 'UncleFirefly',age:25}
const aunt = {name: 'AuntFirefly',age:25}
export {uncle, aunt}
```
对应的“入水口”
```javascript
//b.js
import {uncle, aunt} from './a.js'
```
那么问题来了
###export和export default有什么区别呢？###
我们可以尝试打印一下两者：

#####export default#####
```javascript
//a.js
const Programmer = {name: 'a',age:18}
export default Programmer
console.log(module)
/*
//打印结果
{exports: {default:{age:18,name:'a'}, hot:{...}}
*/
```

#####export#####
```javascript
//a.js
const uncle = {name: 'a',age:18}
const aunt = {name: 'b',age:15}
export {uncle, aunt}
/*
//打印结果
{exports: {aunt:{age:15,name:'b'},uncle:{age:18,name:'a'}, hot:{...}}
*/
```

#####出水口时#####

export相当于把对象添加到module的exports中。
export default相当于把对象添加到module的exports中，并且对象的key叫default。

#####入水口时#####

不带{}的导入
本质上就是导入exports中的default属性（注：如果default属性不存在，则导入exports对象）。

带{}的导入
本质上按照属性key值导入exports中对应的属性值。

####此外####
根据<a href="https://www.cnblogs.com/mengfangui/p/9073459.html" target="_blank">CSDN</a>上指出的思路：
(1) 输出单个值，使用export default
(2) 输出多个值，使用export
(3) export default与普通的export不要同时使用

##涉及资料##
<a href="http://nodejs.cn" target="_blank">node</a>
<a href="https://jquery.com" target="_blank">jquery</a>
<a href="https://blog.csdn.net/xiasohuai/article/details/86541632" target="_blank">CSDN上的大佬的整理</a>
<a href="https://www.cnblogs.com/mengfangui/p/9073459.html" target="_blank">CSDN上的大佬的整理_2</a>

Last modification：November 15th, 2019 at 02:44 pm

如果觉得我的文章对你有用，请随意赞赏

4 comments

panther
November 13th, 2019 at 07:08 pm

Reply
1. YH_evIs
  November 13th, 2019 at 08:09 pm
  
  @panther
  
  Reply
两仪橙
November 6th, 2019 at 09:31 am

老伯曾经说
书山有路勤为径
学海无涯落子愁
悔创JS~

Reply
1. YH_evIs
  November 6th, 2019 at 09:36 am
  
  @两仪橙
  所以别做程序员了，和老伯一起做上帝吧
  
  Reply