模块(Module):一块具有独立功能的代码,可以是一个函数、一个对象、甚至一个字符串或数字,通常存储为一个单独的JS文件。
过去,JS很难编写大型应用,因为有以下两个问题:
1.全局变量污染
2.难以管理的依赖关系
于是,先后出现了两大模块化标准,用于解决以上两个问题:CommonJS/ES6 Module
CommonJS标准和使用
node中的所有代码均在CommonJS规范下运行
具体规范如下:
1.一个JS文件即为一个模块
2.如果一个模块需要暴露一些数据或功能供其他模块使用,需要使用代码module.exports = xxx,该过程称之为模块的导出
3.如果一个模块需要使用另一个模块导出的内容,需要使用代码require("模块路径")
1.路径必须以./或../开头
2.如果模块文件后缀名为.js,可以省略后缀名
3.require函数返回的是模块导出的内容
4.模块中的所有全局代码产生的变量、函数,均不会对全局造成任何污染,仅在模块内使用
5.模块具有缓存,第一次导入模块时会缓存模块的导出,之后再导入同一个模块,直接使用之前缓存的结果。
ES6 module
由于种种原因,CommonJS标准难以在浏览器中实现,因此一直在浏览器端一直没有合适的模块化标准,直到ES6标准出现
ES6规范了浏览器的模块化标准,一经发布,各大浏览器厂商纷纷在自己的浏览器中实现了该规范
ES6标准和使用
1.模块的导出分为两种,基本导出和默认导出。可以将整个模块的导出想象成一个对象,基本导出导出的是该对象的某个属性,默认导出导出的是该对象的特殊属性default 。
2. 模块的导入
import c, {a,b} from "模块路径" //相当于 import {default as c, a, b} from "模块路径"
总结:
CommonJS和ES6 Module模块化标准区别:
1. ES6 module 是官方的模块化标准,CommonJS 不是 2. CommonJS 是通过新增API而实现的模块化,ES6 module是通过新增语法实现模块3. ES6 module 采用依赖预加载模式,所有模块导入代码均会提升到代码顶部,而且不能动态依赖。CommonJS使用的是运行时依赖,因此可以使用动态依赖 4. ES6 module 导入时绑定的标识符是不可变的(常量),而CommonJS无此约束。5. ES6 module 导入时绑定的标识符始终指向原始值,而CommonJS是值的传递
node中的所有代码均在CommonJS规范下运行,浏览器运行的是html页面,并加载页面中通过script元素引入的js,而nodejs遵循EcmaScript标准,但由于脱离了浏览器环境,因此CommonJS标准难以在浏览器中实现。ES6规范了浏览器的模块化标准,现在很多浏览器对ES6支持良好。