JavaScript模块化1. CommonJs规范 Node是CommonJS在服务器端一个具有代表性的实现； Bro

所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：

前面我们提到过模块化的核心是导出和导入，Node中对其进行了实现：

强调：exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出

bar.js中导出内容：

exports.name = name;
exports.age = age;
exports.sayHello = sayHello;

main.js中导入内容：

const bar = require('./bar'); //意味着bar等于bar.js中导出的exports

本质：bar对象是exports对象的浅拷贝；浅拷贝本质一种引用的赋值而已；

但是Node中我们经常导出东西的时候，又是通过module.exports导出的：

我们追根溯源，通过维基百科中对CommonJS规范的解析：

但是，为什么exports也可以导出呢？

注意：真正导出的模块内容的核心其实是module.exports，只是为了实现CommonJS的规范，刚好module.exports对exports对象有一个引用而已；

我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导入的对象。

那么，require的查找规则是怎么样的呢？

这里我总结比较常见的查找规则：

导入格式如下：require(X)

情况一：X是一个核心模块，比如path、http
- 直接返回核心模块，并且停止查找
情况二：X是以 ./ 或 ../ 或 /（根目录）开头的
- 查找目录下面的index文件
- 1> 查找X/index.js文件
- 2> 查找X/index.json文件
- 3> 查找X/index.node文件
- 1.如果有后缀名，按照后缀名的格式查找对应的文件
- 2.如果没有后缀名，会按照如下顺序：
- 1> 直接查找文件X
- 2> 查找X.js文件
- 3> 查找X.json文件
- 4> 查找X.node文件
- 第一步：将X当做一个文件在对应的目录下查找；
- 第二步：没有找到对应的文件，将X作为一个目录
- 如果没有找到，那么报错：not found
情况三：直接是一个X（没有路径），并且X不是一个核心模块
- 比如 /Users/coderwhy/Desktop/Node/TestCode/04_learn_node/05_javascript-module/02_commonjs/main.js中编写 require('why')
- 查找顺序
- 如果上面的路径中都没有找到，那么报错：not found

模块在被第一次引入时，模块中的js代码会被运行一次
模块被多次引入时，会缓存，最终只加载（运行）一次

为什么只会加载运行一次呢
- 这是因为每个模块对象module都有一个属性：loaded。
- 为false表示还没有加载，为true表示已经加载
循环引入：Node使用深度优先算法

main -> aaa -> ccc -> ddd -> eee ->bbb

CommonJS模块加载js文件的过程是运行时加载的，并且是同步的：

console.log("main代码执行");

const flag = true;
if (flag) {
  // 同步加载foo文件，并且执行一次内部的代码
  const foo = require('./foo');
  console.log("if语句继续执行");
}

CommonJS通过module.exports导出的是一个对象：

ES Module加载js文件的过程是编译（解析）时加载的，并且是异步的：

编译时（解析）时加载，意味着import不能和运行时相关的内容放在一起使用：
- 比如from后面的路径需要动态获取；
- 比如不能将import放到if等语句的代码块中；
- 所以我们有时候也称ES Module是静态解析的，而不是动态或者运行时解析的；
异步的意味着：JS引擎在遇到import时会去获取这个js文件，但是这个获取的过程是异步的，并不会阻塞主线程继续执行；
- 也就是说设置了 type=module 的代码，相当于在script标签上也加上了 defer 属性；
- 如果我们后面有普通的script标签以及对应的代码，那么ES Module对应的js文件和代码不会阻塞它们的执行；

<script src="main.js" type="module"></script>
<!-- 这个js文件的代码不会被阻塞执行 -->
<script src="index.js"></script>

ES Module通过export导出的是变量本身的引用：

export和import绑定的过程

所以我们下面的代码是成立的：

bar.js文件中修改

let name = 'coderwhy';

setTimeout(() => {
  name = "湖人总冠军";
}, 1000);

setTimeout(() => {
  console.log(name);
}, 2000);

export {
  name
}

main.js文件中获取

import { name } from './modules/bar.js';

console.log(name);

// bar中修改, main中验证
setTimeout(() => {
  console.log(name);
}, 2000);

但是，下面的代码是不成立的：main.js中修改

import { name } from './modules/bar.js';

console.log(name);

// main中修改, bar中验证
setTimeout(() => {
  name = 'kobe';
}, 1000);

导入的变量不可以被修改

思考：如果bar.js中导出的是一个对象，那么main.js中是否可以修改对象中的属性呢？