CommonJS与ES6 Module的使用区别分析

目录
  • 前言
  • 1. CommonJS
    • 1.1 导出
    • 1.2 导入
  • 2. ES6 Module
    • 2.1 导出
    • 2.2 导入
  • 3. CommonJS 与 ES6 Module 的区别
    • 3.1 区别一
    • 3.2 区别二
  • 4. The end

前言

学了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区别的资料请关注我们其它相关文章!

(0)

相关推荐

  • CommonJS与ES6 Module的使用区别分析

    目录 前言 1. CommonJS 1.1 导出 1.2 导入 2. ES6 Module 2.1 导出 2.2 导入 3. CommonJS 与 ES6 Module 的区别 3.1 区别一 3.2 区别二 4. The end 前言 学了JS并且用过Node.js后,对模块化应该是有所了解和使用了,那么一定见过以下两种模块导入导出的方式 第一种: ES6 Module // B.js function show() { console.log('show方法被执行') } export de

  • 详解CommonJS和ES6模块循环加载处理的区别

    CommonJS模块规范使用require语句导入模块,module.exports导出模块,输出的是值的拷贝,模块导入的也是输出值的拷贝,也就是说,一旦输出这个值,这个值在模块内部的变化是监听不到的. ES6模块的规范是使用import语句导入模块,export语句导出模块,输出的是对值的引用.ES6模块的运行机制和CommonJS不一样,遇到模块加载命令import时不去执行这个模块,只会生成一个动态的只读引用,等真的需要用到这个值时,再到模块中取值,也就是说原始值变了,那输入值也会发生变化

  • seaJs使用心得之exports与module.exports的区别实例分析

    本文实例讲述了seaJs使用心得之exports与module.exports的区别.分享给大家供大家参考,具体如下: 1. exports 是 module.exports 的 辅助对象,exports对外提供api 时需要用return 返回exports 对象 2. module.exports 也可直接向外提供api 参考 : https://github.com/seajs/seajs/issues/242 exports Object exports 是一个对象,用来向外提供模块接口

  • 利用webpack理解CommonJS和ES Modules的差异区别

    前言 问: CommonJS 和 ES Modules 中模块引入的区别? CommonJS 输出的是一个值的拷贝:ES Modules 生成一个引用,等到真的需要用到时,再到模块里面去取值,模块里面的变量,绑定其所在的模块. 我相信很多人已经把这个答案背得滚瓜烂熟,好,那继续提问. 问:CommonJS 输出的值是浅拷贝还是深拷贝? 问:你能模拟实现 ES Modules 的引用生成吗? 对于以上两个问题,我也是感到一脸懵逼,好在有 webpack 的帮助,作为一个打包工具,它让 ES Mod

  • 详解Node.js中exports和module.exports的区别

    今天看了下node.js的require方法的源码,终于搞清楚exports和module.exports的区别了. 我们知道,node.js的模块暴露有两种方法. 1. 方式一:用exports //a.js exports.log =function (str) { console.log(str); } //b.js var s = require("./a"); s.log("哈哈哈哈"); 2. 方式二:用module.exports //a.js mod

  • jQuery中.attr()和.data()的区别分析

    $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q

  • 详解nodejs中exports和module.exports的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码.但很多新手可能会迷惑于 exports 和 module.exports 的区别,为了更好的理解 exports 和 module.exports 的关系,我们先来巩固下 js 的基础.示例: app.js var a = {name: 'nswbmw 1'}; var b = a; console.log(a); console.log(b); b.name = 'nswbmw 2'; cons

  • Node.js 中exports 和 module.exports 的区别

    Node.js 中exports 和 module.exports 的区别 require 用来加载代码,而 exports 和 module.exports 则用来导出代码.但很多新手可能会迷惑于 exports 和 module.exports 的区别,为了更好的理解 exports 和 module.exports 的关系,我们先来巩固下 js 的基础.示例: test.js var a = {name: 1}; var b = a; console.log(a); console.log

  • C#中String与string的区别分析

    本文实例展示了C#程序设计中String与string的区别,对于C#初学者来说有很好的参考借鉴价值.具体如下: 一.区别分析: String:类,System.String string:类型,变量 两者本质上没有任何区别,都是System.String,string只是System.String的别名而已 唯一的区别在于如何按照代码约定的来写,如声明变量时使用小写string,使用System.String下方法时使用大写的String 二.示例代码如下: class Program { s

  • Android中的Dalvik和ART详解及区别分析

    要想知道Dalvik和ART区别分析,首先我们要分别知道这两者是什么? 什么是Dalvik? Dalvik是Google公司自己设计用于Android平台的虚拟机. Dalvik虚拟机是Google等厂商合作开发的Android移动设备平台的核心组成部分之一. 它可以支持已转换为 .dex格式的Java应用程序的运行,.dex格式是专为Dalvik设计的一种压缩格式,适合内存和处理器速度有限的系统. Dalvik 经过优化,允许在有限的内存中同时运行多个虚拟机的实例,并且每一个Dalvik 应用

随机推荐