JS模块化-CommonJS/ES Module

 二者区别总结：

• CommonJs是运行时加载模块，ESModule是在静态编译期间就确定模块的依赖。
• ESModule在编译期间会将所有import提升到顶部，CommonJs不会提升require。

1. CommonJS模块化

• Node是CommonJS在服务器端一个具有代表性的实现；
• Browserify是CommonJS在浏览器中的一种实现；
• webpack打包工具具备对CommonJS的支持和转换；

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

•  在Node中每一个js文件都是一个单独的模块；
• 这个模块中包括CommonJS规范的核心变量：exports、module.exports、require；
• 使用这些变量来方便的进行模块化开发；

模块化的核心是导出和导入，Node中对其进行了实现：

• exports和module.exports可以负责对模块中的内容进行导出；
• require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

①exports导出

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

从这个文件导出 

exports.name = name;
exports.age = age;
exports.foo = foo;

另一个文件导入 

const bar = require('./bar')

• 着main中的bar变量等于exports对象；
• 也就是require通过各种查找方式，最终找到了exports这个对象；
• 并且将这个exports对象赋值给了bar变量；
• bar变量就是exports对象了； 

 ②module.exports

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

module.exports和exports的关系与区别：

通过维基百科中对CommonJS规范的解析：

• CommonJS中是没有module.exports的概念的；
• 但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是 module；
• 所以在Node中真正用于导出的其实根本不是exports，而是module.exports；
• 因为module才是导出的真正实现者；

exports可以导出的原因：

• 是因为module对象的exports属性是exports对象的一个引用；
• module.exports = exports = main中的bar；

③require细节

require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。

比较常见的查找规则：导入格式如下：require(X)

• 情况一：X是一个Node核心模块，比如path、http：

        直接返回核心模块，并且停止查找；

• 情况二：X是以 ./ 或 ../ 或 /（根目录）开头的：

        第一步：将X当做一个文件在对应的目录下查找：

        如果有后缀名，按照后缀名的格式查找对应的文件，如果没有后缀名，会按照如下顺序：

        1> 直接查找文件X 2> 查找X.js文件 3> 查找X.json文件 4> 查找X.node文件；

        第二步：没有找到对应的文件，将X作为一个目录：

        查找目录下面的index文件：

        1> 查找X/index.js文件 2> 查找X/index.json文件 3> 查找X/index.node文件；

        如果没有找到，那么报错：not found

④模块的加载过程

• 结论一：模块在被第一次引入时，模块中的js代码会被运行一次 ；

• 结论二：模块被多次引入时，会缓存，最终只加载（运行）一次；

• 结论三：如果有循环引入，那么加载顺序是什么？

        是一种数据结构：图结构；

        图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS,         breadth first search）；

        Node采用的是深度优先算法；

⑤CommonJS规范缺点

CommonJS加载模块是同步的：

• 意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
• 意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；

2. ES Module模块化

ESModule是JavaScript语言本身推出的模块化；

ES Module和CommonJS的模块化有一些不同之处：

• 一方面它使用了import和export关键字；
• 另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

ES Module模块采用export和import关键字来实现模块化：

• export负责将模块内的内容导出；
• import负责从其他模块导入内容；

采用ES Module将自动采用严格模式：use strict

 ①exports关键字

export关键字将一个模块中的变量、函数、类等导出；

• 方式一：在语句声明的前面直接加上export关键字
• 方式二：将所有需要导出的标识符，放到export后面的 {}中；
  • 注意：
  • 这里的 {}里面不是ES6的对象字面量的增强写法，{}也不是表示一个对象的；
  • export {name: name}，是错误的写法；
• 方式三：导出时给标识符起一个别名；

②import关键字

import关键字负责从另外一个模块中导入内容；

• 方式一：import {标识符列表} from '模块'；
  • 注意：这里的{}也不是一个对象，里面只是存放导入的标识符列表内容；
• 方式二：导入时给标识符起别名；
• 方式三：通过 * 将模块功能放到一个模块功能对象（a module object）上；

③export和import结合使用

exports {sum as barSum} from './bar.js';

• 在开发和封装一个功能库时，通常我们希望将暴露的所有接口放到一个文件中；
• 这样方便指定统一的接口规范，也方便阅读；
• 这个时候，我们就可以使用export和import结合使用； 

注意：在脚手架中from './bar'可以省略后缀，因为脚手架中会自动添加后缀然后查找，平时使用时不可省略；