CommonJS与ES6 Module的使用区别分析
作者:「零一」
前言
学了JS并且用过Node.js后,对模块化应该是有所了解和使用了,那么一定见过以下两种模块导入导出的方式
第一种: ES6 Module
// B.js function show() { console.log('show方法被执行') } export default show // A.js import show from './B.js' show() // show方法被执行
第二种: CommonJS
// B.js function show() { console.log('show方法被执行') } module.exports = { show } // A.js const bModule = require('./B.js') bModule.show() // show方法被执行
以上两种导入导出方法涉及到了两种模块规范,分别是ES6 Module 、CommonJS
本文就来聊聊这两者之间的具体使用与区别
1. CommonJS
CommonJS是2009年由JavaScript社区提出的包含了模块化的一个标准,后来被Node.js所采用并实现,也就是说我们在Node.js中用到的模块导入导出都是依照CommonJS标准来实现的
1.1 导出
我们可以把一个文件看成一个模块,每个模块之间是互相独立的,即不会互相影响。当需要使用到某个模块时,只需在文件中将目标模块导入即可
要想被其它模块导入首先需要导出需要向外暴露的变量或方法,在CommonJS中导出的语法有以下两种方式
// B.js // 定义了函数show function show() { console.log('show方法被调用') } // 定义了变量count let count = 3 /*-------------- 导出方法 --------------*/ // 第一种 module.exports = { show, count } // 第二种 exports.show = show exports.count = count
上述代码中,两种导出方式是等价的。
第一种导出方式是将需要导出的函数或变量存储到 module.exports
里面,其中 module.exports
原本是一个空对象
第二种导出方式中,exports
在内部其实是指向了 module.exports
,所以当我们执行 exports.变量 或 exports.函数 时,其实就相当于把变量或函数存储到 module.exports
中
注意: 这里要特别强调的是,在使用第二种导出方式时,不能对 exports
进行重新赋值,否则就将 module.exports
直接全部覆盖了
1.2 导入
再来看一下CommonJS的导入语法
// A.js const bModule = require('./B.js') console.log(bModule.count) // 3 bModule.show() // show方法被调用
从上述代码中可以看到,CommonJS是通过 require
方法来导入模块的,其参数为模块文件路径,要特别注意的是,我们导入模块后接收到的其实是一个对象,也就是 module.exports
的值,我们能从该对象中获取到所需的变量或函数
另外,比较特别的是,require
方法还可以接收一个表达式作为参数,代码如下
let fileName = 'B.js' const bModule = require('./' + fileName)
因此,我们是可以动态的改变并决定模块的加载导入路径的
2. ES6 Module
如标题名写的,该模块标准是在ES6时才被提出的,此后JS才具有了模块化这一特性
2.1 导出
在ES6 Module 中,导出用到了关键字 export
,导出的方式也大致分为两种,分别是命名导出 、默认导出
第一种: 命名导出
// B.js /*-------- 单个变量或函数导出 ----------*/ export function show() { console.log('show方法被调用') } export let count = 3 /*-------- 批量导出 ----------*/ function show() { console.log('show方法被调用') } let count = 3 export {show, count}
上述代码分了两种情况,且这两种写法是等价的
第一种是单个的变量或函数导出,只需要直接在开头使用 export
关键字即可;
第二种情况是批量地把多个变量或函数导出,只需要把它们储存到一个对象中即可
第二种: 默认导出
// B.js function show() { console.log('show方法被调用') } // 命名导出变量count export let count = 3 // 默认导出函数show export default show
默认导出是在 export
关键词后面再跟上一个 default
表示导出的该变量或函数是匿名的
注意: 一个模块只能默认导出一次,否则就会报错,具体原因会在后面讲解
2.2 导入
ES6 Module 的导入用到的关键字是 import
,具体代码如下
// A.js import {show, count} from './B.js' show() // show方法被调用 console.log(count) // 3
ES6 Module的导入需要用一对 {} 大括号来接收我们需要导入的方法或函数
注意: 大括号中的变量或函数名必须与导出时的名称一模一样
那么如果我们想修改导入的变量或函数的名称,可以通过 as
关键词来命名,代码如下
// A.js import {show as print, count as number} from './B.js' print() // show方法被调用 console.log(number) // 3
如果我们要想将所有的变量或函数都导入,可以通过 *
来整体导入,代码如下
import * as bModule from './B.js' bModule.show() // show方法被调用 console.log(bModule.count) // 3
* 表示全部的意思,我们将其全部导入,并赋值给 bModule
,这样我们就可以通过 bModule
获取想要的变量或对象了
以上所说的都是针对命名导出的变量或函数,那么如何导入一个默认导出的变量或函数呢?
// 将通过 export default 导出的变量导入 import print from './B.js' print() // show方法被调用
命名导出的变量都是通过 {} 来接收的,那么去掉 {} ,接收的就是默认导出的变量了,因为导出的变量是匿名的,因此我们可以随意地起个变量名用于接收
补充: 这里特别提一下,与CommonJS不同,ES6 Module 的导入文件路径是不支持表达式的
3. CommonJS 与 ES6 Module 的区别
这两者的主要区别主要有以下两点:
- 对于模块的依赖,CommonJS是动态的,ES6 Module 是静态的
- CommonJS导入的是值的拷贝,ES6 Module导入的是值的引用
3.1 区别一
对于模块的依赖,何为动态?何为静态?
动态是指对于模块的依赖关系建立在代码执行阶段;
静态是指对于模块的依赖关系建立在代码编译阶段;
上文提到,CommonJS导入时,require
的路径参数是支持表达式的,例如
// A.js let fileName = 'example.js' const bModule = require('./' + fileName)
因为该路径在代码执行时是可以动态改变的,所以如果在代码编译阶段就建立各个模块的依赖关系,那么一定是不准确的,只有在代码运行了以后,才可以真正确认模块的依赖关系,因此说CommonJS是动态的。
那么现在你也应该也知道为什么 ES6 Module 是静态的了吧
3.2 区别二
为了验证这一点,我准备用实例来演示一下
首先来验证CommonJS,代码如下
// B.js let count = 3 function change() { count ++ // 变量count + 1 console.log('原count值为:', count); // 打印B.js模块中count的值 } module.exports = { count, change } // A.js let count = require('./B.js').count let change = require('./B.js').change console.log('改变前:', count); change() // 调用模块B.js中的change方法,将原来的count + 1 console.log('改变后:', count);
运行A.js文件的结果
改变前:3
原count值为:4
改变后:3
在上述代码中我们可以看到,在 A.js
文件中导入了 B.js
文件中的变量 count
和 函数 change
,因为导入的 count
只是对原有值的一个拷贝,因此尽管我们调用了函数 change
改变了 B.js
文件中变量 count
的值,也不会影响到 A.js
文件中的变量 count
根据这个结果得出结论:CommonJS导入的变量是对原值的拷贝
接下来再来验证一下ES6 Module,代码如下
// B.js let count = 3 function change() { count ++ // 变量count + 1 console.log(count); // 打印B.js模块中count的值 } export {count, change} // A.js import {count, change} from './B.js'; console.log('改变前:',count); change() // 调用模块B.js中的change方法,将原来的count + 1 console.log('改变后:', count);
运行A.js文件的结果
改变前:3
原count值为:4
改变后:4
相比较于CommonJS的结果,ES6 Module导入的变量 count
随着原值的改变而改变了
根据这个结果得出结论:ES6 Module导入的变量是对原值的引用
4. The end
本篇文章就到此结束啦,关于CommonJS和ES6 Module,还有一些本文未提及的知识,还是希望大家深入了解,更多关于CommonJS与ES6 Module区别的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:
- JavaScript ES6 Module模块详解
- node.js的exports、module.exports与ES6的export、export default深入详解
- ES6入门教程之Class和Module详解
- ES6中module模块化开发实例浅析
- ES6新特性之模块Module用法详解
- Node.JS中的模块、exports和module讲解
- Node.js 中的 module.exports 与 exports区别介绍
- Node.js中module.exports 和exports使用误区
- 详解Node.js中exports和module.exports的区别
- Node.js 中exports 和 module.exports 的区别
- node.js中module.exports与exports用法上的区别
- module.exports和exports使用误区案例分析