学了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 ModuleCommonJS

本文就来聊聊这两者之间的具体使用与区别

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 的区别

这两者的主要区别主要有以下两点:

  1. 对于模块的依赖,CommonJS动态的ES6 Module静态的
  2. 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的使用与区别的更多相关文章

  1. 深入 CommonJs 与 ES6 Module

    目前主流的模块规范 UMD CommonJs es6 module umd 模块(通用模块) (function (global, factory) { typeof exports === 'obj ...

  2. 再次梳理AMD、CMD、CommonJS、ES6 Module的区别

    AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范, ...

  3. 彻底掌握 Commonjs 和 Es Module

    目录 Commonjs commonjs 实现原理 require 文件加载流程 require 模块引入与处理 require 加载原理 require 避免重复加载 require 避免循环引用 ...

  4. 探讨ES6的import export default 和CommonJS的require module.exports

    今天来扒一扒在node和ES6中的module,主要是为了区分node和ES6中的不同意义,避免概念上的混淆,同时也分享一下,自己在这个坑里获得的心得. 在ES6之前 模块的概念是在ES6发布之前就出 ...

  5. 通过ES6 Module看import和require区别

    前言 说到import和require,大家平时开发中一定不少见,尤其是需要前端工程化的项目现在都已经离不开node了,在node环境下这两者都是大量存在的,大体上来说他们都是为了实现JS代码的模块化 ...

  6. 前端模块化IIFE,commonjs,AMD,UMD,ES6 Module规范超详细讲解

    目录 为什么前端需要模块化 什么是模块 是什么IIFE 举个栗子 模块化标准 Commonjs 特征 IIFE中的例子用commonjs实现 AMD和RequireJS 如何定义一个模块 如何在入口文 ...

  7. ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export

    1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...

  8. amd、cmd、CommonJS以及ES6模块化

    AMD.CMD.CommonJs.ES6的对比 他们都是用于在模块化定义中使用的,AMD.CMD.CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的 什么 ...

  9. JavaScript ES6 module 模块

    在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...

随机推荐

  1. mac使用brew update无反应,更新慢解决办法

    一.原因 主要是资源访问太慢的原因造成的,替换一下镜像就可以了 有点耐心,大概5分钟就可以了,刚开始的时候terminal 只有顶部的title栏会变化,最后才会出现更新结果 使用中科大的镜像 替换默 ...

  2. python numpy loadtxt

    用numpy加载csv文件数据 发现python numpy loadtxt 方法和数据的结构有很大关系当我的数据有第一行文字是这样子的时候 我程序的运行结果永远都报错,编码格式也处理了统一utf-8 ...

  3. 记一次 .NET 某纺织工厂 MES系统 API 挂死分析

    一:背景 1. 讲故事 这个月中旬,有位朋友加我wx求助他的程序线程占有率很高,寻求如何解决,截图如下: 说实话,和不同行业的程序员聊天还是蛮有意思的,广交朋友,也能扩大自己的圈子,朋友说他因为这个b ...

  4. 从零入门 Serverless | 一文讲透 Serverless Kubernetes 容器服务

    作者 | 张维(贤维) 阿里云函数计算开发工程师 导读:Serverless Kubernetes 是以容器和 kubernetes 为基础的 Serverless 服务,它提供了一种简单易用.极致弹 ...

  5. 教你轻松构建基于 Serverless 架构的小程序

    前言 自 2017 年第一批小程序上线以来,越来越多的移动端应用以小程序的形式呈现.小程序触手可及.用完即走的优点,大大降低了用户的使用负担,也使小程序得到了广泛的传播.在阿里巴巴,小程序也被广泛地应 ...

  6. 利用PATH环境变量 - 提升linux权限~👻

    利用PATH提升linux权限 参考地址:https://www.hackingarticles.in/linux-privilege-escalation-using-path-variable/ ...

  7. 洛谷5038 [SCOI2012]奇怪的游戏(二分+网络流+判断奇偶)

    寒假的时候就听过这个题.但是一直没有写. qwq 首先,我们发现题目中的图是个网格图,然后每次可以将相邻两个格子加一. 很容易就想到是黑白染色.那么每次操作,就相当于同时操作一个白点,一个黑点. 我们 ...

  8. Protocol handler start failed

    问题描述: 启动项目的时候出现的中文大体意思是:协议处理程序启动失败看着这个启动失败,下意识就想是不是端口占用了,结果换个端口还是不行,于是百度了一个办法 问题解决: 打开任务管理器,找到Java的后 ...

  9. STM32中操作寄存器GPIOB_CRL &= ~( 0x0F<< (4*0))与GPIOB_CRL &=~(0x0F)之间有什么区别吗?

    没有区别,作用相同.只是这样写便于修改和沿用. 对于只用到PB0端口的程序~(0x0f << (4*0)) 和~0x0f没有区别.0x0f <<(4*N) 就是 向左 移动N个 ...

  10. 初学python写个自娱自乐的小游戏

    一.摘要 当编写完后的代码执行第一次后达到了目标的预期效果,内心有些许满足,但是当突发情况产生后,程序便不能正常运行,于是准备从简单的版本开始出发,综合考虑使用者的需求,和使用过程中会遇到的问题,一步 ...