commonJS和ES6模块化

什么是模块化？

• 将一个程序问卷按照某种规则进行拆分为多个文件，拆分的每一个文件就是一个模块
• 模块之间相互隔离，模块中的数据都是私有
• 可以通过一些手段将模块中的指定数据抛出，供其他模块使用

模块化好处：

• 避免全局变量污染（命名冲突）
• 避免依赖混乱问题：无需保证文件的引入顺序（被依赖的文件必须放在依赖文件的前面）
• 保证数据安全：只返回需要给别人看到的数据
• 提高代码复用性

CommonJS模块化标准

在commonjs规范中，通过require导入时，接收一个对象，对象中存着对应模块导出的数据，若模块中没导出任何数据，则返回一个空对象

可以认为每个模块中都存在一个空对象

导出方式一：exports导出
在模块中可以通过exports参数向空对象中添加数据 

导出方式二：module.exports 

module.exports 接收一个对象，对象中存放需要导出的数据，导入时，require接收module.exports导出的对象

注意点：

1.module.exports 、this、exports在初始化时都指向同一个空对象，即当前模块需要导出的数据

2. 最终导出的数据都以module.exports为准 

3. exports主要是为了给导出对象添加属性，所以不能用export = value 的方式，但是可以使用module.exports = value的形式

导入

因为require导入接收的是一个对象，所以可以使用解构赋值的方式

commonjs是如何实现模块之间的隔离

每个commonjs规范中写的代码都会单独包在一个独立的函数体中

浏览器拓展

ES6模块化标准

import 导入

import导入接收一个特殊的module导入对象

export导出

分别导出

统一导出：或者使用类对象的方式，统一导出（注：这里的{}不是对象，只是一个导出标记）

默认导出：export default 

通过export default进行导出，会在module对象中添加一个default属性，export default导出的内容都存放在这个属性中

可以通过导出对象的方式进行统一导出（这里的{}就是一个真实对象，与export导出的{}不同）

上述导出方式可以同时使用

导入方式 

统一导入 （可以导入所以导出形式的数据）

命名导入：对应分别导出和统一导出（这里的{}也不是对象，是导入的格式）

 

默认导入：对应默认导出 

默认导入可以随意更改导入接收的命名参数

默认导出的方式也可以通过统一导入的方式接收，通过module对象中的default属性读取导出值

混合使用

动态导入 

通过import函数进行导入，返回一个promise值

import不接收任何值

ES6模块隔离

类似commonJS规范

解决依赖混乱的问题

通过模块化的编写方式，每个模块所需依赖都直接在对应模块中引入的，而不是在全局中引入，自然解决了依赖混乱问题，每个模块只需关系自己需要依赖的文件，以及向外界提供的数据即可

数据引用问题 

使用commonJs规范

两个sum都打印1

module.exports导出一个对象，其中的sum是模块中sum的复制品，
而increment函数修改的是模块中sum的值，即模块中的sum是3 

使用ES6规范

es6规范中，导出的是值的引用，共享同一内存空间，所以increment函数的执行也会影响导出的sum值

所以，使用es6规范的导出时，最好将需要导出的变量都声明成常量，防止外部的修改。