CommonJS与ES6 Module的使用与区别
CommonJS与ES6 Module的使用与区别
学了JS
并且用过Node.js
后,对模块化应该是有所了解和使用了,那么一定见过以下两种模块导入导出的方式
第一种: ES6 Module
// B.js
function func() {
console.log('func方法被执行')
}
export default func
// A.js
import func from './B.js'
func() // func方法被执行
第二种: CommonJS
// B.js
function func() {
console.log('func方法被执行')
}
module.exports = {
func
}
// A.js
const bModule = require('./B.js')
bModule.func() // func方法被执行
以上两种导入导出方法涉及到了两种模块规范,分别是ES6 Module
、CommonJS
本文就来聊聊这两者之间的具体使用与区别
1. CommonJS
CommonJS
是2009年由JavaScript
社区提出的包含了模块化的一个标准,后来被Node.js
所采用并实现,也就是说我们在Node.js
中用到的模块导入导出都是依照CommonJS
标准来实现的
1.1 导出
我们可以把一个文件看成一个模块,每个模块之间是互相独立的,即不会互相影响。当需要使用到某个模块时,只需在文件中将目标模块导入即可
要想被其它模块导入首先需要导出需要向外暴露的变量或方法,在CommonJS
中导出的语法有以下两种方式
// B.js
// 定义了函数func
function func() {
console.log('func方法被调用')
}
// 定义了变量count
let count = 6
/*-------------- 导出方法 --------------*/
// 第一种
module.exports = {
func,
count
}
// 第二种
exports.func = func
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) // 6
bModule.func() // func方法被调用
从上述代码中可以看到,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 func() {
console.log('func方法被调用')
}
export let count = 6
/*-------- 批量导出 ----------*/
function func() {
console.log('func方法被调用')
}
let count = 6
export { func, count }
上述代码分了两种情况,且这两种写法是等价的
第一种是单个的变量或函数导出,只需要直接在开头使用 export
关键字即可;
第二种情况是批量地把多个变量或函数导出,只需要把它们储存到一个对象中即可
第二种: 默认导出
// B.js
function func() {
console.log('func方法被调用')
}
// 命名导出变量count
export let count = 6
// 默认导出函数func
export default func
默认导出是在 export
关键词后面再跟上一个 default
表示导出的该变量或函数是匿名的
注意: 一个模块只能默认导出一次,否则就会报错,具体原因会在后面讲解
2.2 导入
ES6 Module
的导入用到的关键字是 import
,具体代码如下
// A.js
import { func, count } from './B.js'
func() // func方法被调用
console.log(count) // 6
ES6 Module
的导入需要用一对 {}
大括号来接收我们需要导入的方法或函数
注意: 大括号中的变量或函数名必须与导出时的名称一模一样
那么如果我们想修改导入的变量或函数的名称,可以通过 as
关键词来命名,代码如下
// A.js
import { func as print, count as number } from './B.js'
print() // func方法被调用
console.log(number) // 6
如果我们要想将所有的变量或函数都导入,可以通过 *
来整体导入,代码如下
import * as bModule from './B.js'
bModule.func() // func方法被调用
console.log(bModule.count) // 6
*
表示全部的意思,我们将其全部导入,并赋值给 bModule
,这样我们就可以通过 bModule
获取想要的变量或对象了
以上所说的都是针对命名导出的变量或函数,那么如何导入一个默认导出的变量或函数呢?
// 将通过 export default 导出的变量导入
import print from './B.js'
print() // func方法被调用
命名导出的变量都是通过 {}
来接收的,那么去掉 {}
,接收的就是默认导出的变量了,因为导出的变量是匿名的,因此我们可以随意地起个变量名用于接收
补充: 这里特别提一下,与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 = 6
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文件的结果
改变前:6
原count值为:7
改变后:6
在上述代码中我们可以看到,在 A.js
文件中导入了 B.js
文件中的变量 count
和 函数 change
,因为导入的 count
只是对原有值的一个拷贝,因此尽管我们调用了函数 change
改变了 B.js
文件中变量 count
的值,也不会影响到 A.js
文件中的变量 count
根据这个结果得出结论:CommonJS
导入的变量是对原值的拷贝
接下来再来验证一下ES6 Module
,代码如下
// B.js
let count = 6
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文件的结果
改变前:6
原count值为:7
改变后:7
相比较于CommonJS
的结果,ES6 Module
导入的变量 count
随着原值的改变而改变了
根据这个结果得出结论:ES6 Module
导入的变量是对原值的引用
CommonJS与ES6 Module的使用与区别的更多相关文章
- 深入 CommonJs 与 ES6 Module
目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...
- 再次梳理AMD、CMD、CommonJS、ES6 Module的区别
AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...
- 彻底掌握 Commonjs 和 Es Module
目录 Commonjs commonjs 实现原理 require 文件加载流程 require 模块引入与处理 require 加载原理 require 避免重复加载 require 避免循环引用 ...
- 探讨ES6的import export default 和CommonJS的require module.exports
今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...
- 通过ES6 Module看import和require区别
前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...
- 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解
目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...
- ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export
1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...
- amd、cmd、CommonJS以及ES6模块化
AMD.CMD.CommonJs.ES6的对比 他们都是用于在模块化定义中使用的,AMD.CMD.CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的 什么 ...
- JavaScript ES6 module 模块
在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...
随机推荐
- 通用JS9
Symbol.toStringTag 该符号作为一个属性表示"一个字符串,该字符串用于创建对象的默认字符串描述."由内置方法Object.prototype.toString()使 ...
- RuntimeError: DataLoader worker (pid 18255) is killed by signal: Killed.
RuntimeError: DataLoader worker (pid 18255) is killed by signal: Killed. 通过观察内存发现,数据加载过程中内存会被耗尽.
- Redis三种集群模式介绍
三种集群模式 redis有三种集群模式,其中主从是最常见的模式. Sentinel 哨兵模式是为了弥补主从复制集群中主机宕机后,主备切换的复杂性而演变出来的.哨兵顾名思义,就是用来监控的,主要作用就是 ...
- 模仿ToDoList
1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- NOIP模拟72
T1 出了个大阴间题 解题思路 看了看数据,大概是个状压 DP,但是感觉记忆化搜索比较好写一点(然而并不是这样递归比迭代常熟大了许多..) 不难判断出来 b 的数值与合并的顺序无关于是我们可以预先处理 ...
- 高德 Serverless 平台建设及实践
作者 | 邓学祥(祥翼) 来源 | Serverless 公众号 高德从 FY21 财年开始启动 Serverless 建设,至今一年了,高德 Serverless 业务的峰值超过十万 qps 量级, ...
- java 文档自动生成的神器 idoc
写文档 作为一名开发者,每个人都要写代码. 工作中,几乎每一位开发者都要写文档. 因为工作是人和人的协作,产品要写需求文档,开发要写详细设计文档,接口文档. 可是,作为一个懒人,平时最讨厌的一件事情就 ...
- visualbox安装ubuntu18过程中不能输入name,password,密码,姓名问题的解决办法+一些基本操作
问题描述:visualbox安装ubuntu18,,,,卡在注册处,无法输入姓名,密码-点击无法输入............如下图: 解决办法:更改你的Ubuntu的主板内存,主板内存默认的值 ...
- NOIP 模拟 七十七
100+60+95+30; T4 一个变量打错挂了40.. T1 最大或 考虑从高到低枚举的二进制位,然后和的对应二进制位进行比较.如果两 者相同,那么不论怎么选择,,答案在这个位置上的值一定和在这个 ...
- 洛谷2408不同字串个数/SPOJ 694/705 (后缀数组SA)
真是一个三倍经验好题啊. 我们来观察这个题目,首先如果直接整体计算,怕是不太好计算. 首先,我们可以将每个子串都看成一个后缀的的前缀.那我们就可以考虑一个一个后缀来计算了. 为了方便起见,我们选择按照 ...