javascript模块那些事儿:commonJS和ES module

news/2024/11/22 20:41:00/

前言

模块定义,包管理,以及加载问题是所有编程语言不得不面临的问题,死生存亡之地,不可不察也。

什么是一个模块?

一个模块就是一个js/ts文件,可以定义函数、类、数据,并export出来让外部可见。
不同的规范,导出导入的写法不同。

自从诞生了ESM,前端模块化方案逐步从IIFE、UMD、AMD、CommonJS、ESM等诸多模块化方案,逐步收敛到了ESM和CJS之争。

三大规范:AMD、CMD、CommonJs

  • AMD是RequireJS在推广过程中对模块定义的规范化产出,它是一个概念,RequireJS是对这个概念的实现,就好比JavaScript语言是对ECMAScript规范的实现。AMD是一个组织,RequireJS是在这个组织下自定义的一套脚本语言。

RequireJS:是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。
是一个依赖前置、异步定义的AMD框架(在参数里面引入js文件),在定义的同时如果需要用到别的模块,在最前面定义好即在参数数组里面进行引入,在回调里面加载。

  • CMD—是SeaJS在推广过程中对模块定义的规范化产出,是一个同步模块定义,是SeaJS的一个标准,SeaJS是CMD概念的一个实现,SeaJS是淘宝团队提供的一个模块开发的js框架。

通过define()定义,没有依赖前置,通过require加载jQuery插件,CMD是依赖就近,在什么地方使用到插件就在什么地方require该插件,即用即返,这是一个同步的概念

  • CommonJS规范—是通过module.exports定义的,在前端浏览器里面并不支持module.exports,通过node.js后端使用的。Nodejs端是使用CommonJS规范的,前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的。

什么是CJS和ESM模块(ES6 module)?

  • CJS模块就是通过CommonJS规范定义的模块,即module.exports/require导出导入方式。
  • ESM模块就是符合ES6规范定义的模块,即export/import方式。import有静态导入动态导入两种方式。
  • CJS模块和ESM模块都可以通过javascript或typescript来编写。

CJS模块只能运行在Nodejs后端,ES6模块可以运行在nodejs端,也可以运行在浏览器端,当然不是所有浏览器都支持。

文件名与模块类型

  • 以 .mjs结尾的被当做 ESM 模块
  • 以.cjs 结尾的被当做 CJS 模块
  • 以 .js 结尾的默认被当做 CJS 模块,但是,如果package.json里定义了 type: ‘module’,就被当做ESM模块

导入规则

我们可以在ES6 module里导入CJS模块,但是在CJS模块里不能用require()导入ES6模块,只能用import函数。

例子

一个ES6模块的定义

functions.mjs文件:

export default function(msg) {return `Default: ${msg}`
}export function myFunction(msg) {return `Hello: ${msg}`
}export const PI = 3.1415926

一个CJS模块的定义

cjs_module.cjs文件:

module.exports = {func1: function() {return 'this is func1'},func2: function() {return 'this is func2'}
}//  or
// exports.test = 123

在ES6模块里调用

module_test.js文件:

import {myFunction} from './functions.mjs'
import sayHello from './functions.mjs' import { func1 } from './cjs_module.cjs'
import { default as pkg } from './cjs_module.cjs'console.log(myFunction('laohu'))
console.log(sayHello('laowang'))console.log(func1())
console.log(pkg.func1())

注意:

  • export default导出的函数,和非default函数的导入写法不同
  • 导入cjs模块的两种写法。可以给导入模块起个别名,如上面的default as pkg

http://www.ppmy.cn/news/12137.html

相关文章

分布式文件系统

常见的文件系统:FAT16/FAT32、NTFS、HFS、UFS、APFS、XFS、Ext4等 。 通过概念可以简单理解为:一个计算机无法存储海量的文件,通过网络将若干计算机组织起来共同去存储海量的文件,去接收海量用户的请求,这些组织起来的…

【数据结构】优先级队列(堆)

文章目录1.优先级队列1.1概念2.优先级队列的模拟实现2.1堆的存储方式2.2堆的创建2.3建堆的复杂度2.4堆的插入和删除3.常用接口介绍1.优先级队列 1.1概念 队列是一种先进先出的数据结构。但有些情况下,操作的数据可能带有优先级,一般出队列时&#xff0…

乐鑫 2022 提前批面试题

一面 自我介绍在这简历的四个项目中你最熟悉哪一个?整体介绍一下,画整体框图。在这个项目中你主要负责哪个部分?详细讲一下接收到图像数据之后你的算法工作。为什么帧数选取是 512 帧?为什么选用两种方法进行估计?系统的精确度?你觉得在什么样的情况下输出的准确度会降低…

redis基本数据结构使用与场景

string(字符串)用法使用场景list(列表)用法使用场景set(不可重复,乱序的集合)用法使用场景zset (相对于set集合 增加了score属性,score可用于排序)用法使用场…

2022年度总结,迎接2023

目录 我和CSDN的2022 初次见面: 你我的成长: 博客: 比赛: 我和CSDN的2023 我和CSDN的2022 初次见面: CSDN你好啊!我跟你的初次见面在于2022年4月2日!!! 这这半年内…

redis哨兵模式,自动主备切换,springBoot配置连接

redis哨兵模式,自动主备切换,springBoot配置连接 步骤(4个redis实例,为例) 安装redis把4个redis实例,配置成一主三从启动4台redis启动redis-sentinel(redis自带的哨兵,健康检测&am…

Linux第一个小程序-进度条

目录 \r&&\n 行缓冲区概念 倒计时程序 进度条代码 \r&&\n 回车概念换行概念 \n[rootVM-12-17-centos lesson8]# touch test.c [rootVM-12-17-centos lesson8]# touoch Makefile bash: touoch: command not found [rootVM-12-17-centos lesson8]# touch Mak…

【论文阅读 CIKM2014】Extending Faceted Search to the General Web

文章目录ForewordMotivationMethodQuery facet generation:Facet feedbackEvaluationForeword This paper is from CIKM 2014, so we only consider the insightsI have read this paper last month and today i share this blogThere are many papers that have not been sha…