Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Contribute to GitLab
Sign in / Register
Toggle navigation
Y
yifu-study-front-share
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Schedules
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Commits
Issue Boards
Open sidebar
yifu-study
front
yifu-study-front-share
Commits
49d22c32
Commit
49d22c32
authored
Apr 26, 2023
by
liyan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
4月文章分享
parent
1380c1a7
Pipeline
#18028
failed with stage
Changes
1
Pipelines
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
293 additions
and
0 deletions
+293
-0
一文弄清CommonJS、CMD、ESM等主流模块化规范!.md
source/_posts/一文弄清CommonJS、CMD、ESM等主流模块化规范!.md
+293
-0
No files found.
source/_posts/一文弄清CommonJS、CMD、ESM等主流模块化规范!.md
0 → 100644
View file @
49d22c32
---
title
:
一文弄清CommonJS、CMD、ESM等主流模块化规范!
date
:
2023/04/26
tags
:
-
前端
-
JavaScript
author
:
李燕
---
入行前端以来,总是能在一些技术文章中看到
`CommonJS`
、
`AMD`
、
`CMD`
、
`UMD`
、
`ESM`
等字眼,只知道它们都是模块化规范,但具体是什么,就说不上来。
这种感觉太难受了,今天,就详细梳理一下它们的相关知识,非要把它们整明白不可。
<!-- more -->
### 模块化概述
随着前端开发越来越复杂,我们传统的开发模式,尤其是团队合作中,非常容易出现命名冲突、文件依赖繁琐的问题。
为解决这些问题,模块化应用而生。
所谓模块化,就是将一个复杂的整体,按照一定的规范,封装成几个模块(文件),每个模块负责单一的职能,且相互隔离,但可以通过特定的接口与其他模块通信。
模块化的出现,方便了代码复用,方便了团队合作与后期维护,大大提升了开发效率。
### 主流模块化规范
随着前端发展对模块需求越来越大,社区中逐渐出现了一些优秀且被大多数人认同的模块化解决方案,慢慢演变成了通用的模块化规范,主要包括
`CommonJS`
、
`AMD`
、
`CMD`
、
`UMD`
、
`ESM`
这五种。
#### `CommonJS`
同步模块加载机制,只有所有模块全部加载完成,才能执行后面的操作,主要用于服务器端,若在浏览器端,则模块需要提前编译打包处理。
**一、特点**
`CommonJS `
模块输出的是值的拷贝,一旦输出一个值,模块内部的变化就影响不到这个值。而且,
`CommonJS`
模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,返回的都是第一次运行结果的缓存,除非手动清除系统缓存。。
**二、代表**
1、
`Node`
是 CommonJS 在服务器端一个具有代表性的实现。(由于Node.js主要用于服务器编程,模块文件一般都已经存在于本地硬盘,所以加载起来比较快,不用考虑非同步加载的方式)
2、
`Browserify`
是 CommonJS 在浏览器中的一种实现。
3、
`webpack`
打包工具对 CommonJS 的支持和转换。
**三、用法**
1、暴露模块
```
module.exports = value
exports.xxx = value
```
2、引入模块
如果是第三方模块,xxx为模块名;如果是自定义模块,xxx为模块文件路径
```
require(xxx)
```
#### `AMD`
异步模块加载机制。AMD是专门为浏览器环境设计的,因为模块都放在服务器端,等待时间取决于网速的快慢,可能要等很长时间,浏览器会处于”假死”状态。因此,浏览器端的模块,不能采用”同步加载”,只能采用”异步加载”,这就是AMD规范诞生的背景。
**一、特点**
允许非同步加载模块,也可以根据需要动态加载模块。
**二、代表**
`require.js`
**三、用法**
1、暴露模块
(1)定义一个没有依赖的模块,并向外暴露
```
// module1.js
define(function(){
const name = '张三';
function getName(){
return name;
}
// 暴露模块
return {name, getName};
});
```
(2)定义一个有依赖的模块,并向外暴露
```
// module1.js 将依赖模块作为实参传递进去
define(['module1'],function(module1){
const age = 20;
function showName(){
return module1.name;
}
return {age, showName};
});
```
2、引入模块
```
//在main.js中引入模块
(function(){
require.config({
// 以相对目录的方式指定一个基本路径
baseUrl:'./js/',
paths:{
// 以基本路径开始的相对路径
module1:'./module/module1',
module2:'./module/module2'
}
});
require(['module2'],function(module2){
//会将模块当作参数传进来
console.log(module2.age); // 20
console.log(module2.showName()); // 张三
});
})()
```
#### `CMD`
它汲取了
`CommonJS`
和
`AMD`
规范的优点,也是专门用于浏览器的异步模块加载。
**一、特点**
模块的加载是异步的,模块使用时才会加载执行。
**二、代表**
`Sea.js`
**三、用法**
使用全局函数
`define`
定义模块,使用
`export`
暴露模块,使用
`require`
引入模块
1、暴露模块
(1) 定义一个没有依赖的模块
定义模块使用define函数,传入一个函数,函数参数为
`require,exports,module`
,require参数用来引入模块,后面两个参数用来暴露模块,暴露模块的方法和
`Commonjs`
规范一样,可以使用
`module.exports`
或者
`exports`
```
// module1.js
define(function(require,exports,module){
let name = '张三';
function getName(){
return name;
}
module.exports = {name, getName};
});
```
(2) 定义一个有依赖的模块
-
使用同步引入模块,同步可能导致堵塞
```
// module2.js
define(function(require,exports,module){
let module1 = require('./module1.js');
let age = 20;
console.log(module1.name);
console.log(module1.getName());
module.exports = {age};
})
```
-
使用异步引入模块
```
// module2.js
define(function(require,exports,module){
let age = 20;
// 引入模块暴露的对象作为实参传入m1形参中
require.async('./module1.js',function(m1){
console.log(m1.name);
console.log(m1.getName());
});
module.exports = {age};
})
```
2、引入模块
引入模块可以使用同步引入
`require()`
和异步引入
`require.async()`
```
// main.js同步引入模块
define(function(require,exports,module){
let m2 = require('./module/module2.js');
console.log(m2.age);
})
```
#### `UMD`
`UMD`
是
`AMD`
、
`CMD`
和
`CommonJS`
的糅合,多被一些需要同时需要支持浏览器端、服务端引用的项目所使用的。
**一、特点**
UMD先判断是否支持Node.js的模块(exports)是否存在,存在则使用
`Node.js`
模块模式。在判断是否支持AMD(define是否存在),存在则使用AMD方式加载模块。
**二、用法**
```
js
(
function
(
window
,
factory
)
{
if
(
typeof
exports
===
'object'
)
{
module
.
exports
=
factory
();
}
else
if
(
typeof
define
===
'function'
&&
define
.
amd
)
{
define
(
factory
);
}
else
{
window
.
eventUtil
=
factory
();
}
})(
this
,
function
()
{
//to do
});
```
可以看到,define 是 AMD 语法,而 exports 只在 CommonJS 中存在,你会发现它在定义模块的时候会检测当前使用环境和模块的定义方式,如果匹配就使用其规范语法,全部不匹配则挂载在全局对象上,我们看到传入的是一个 this ,它在浏览器中指的就是 window ,在服务端环境中指的就是 global ,使用这样的方式将各种模块化定义都兼容。
#### `ESM`
ES标准的模块化规范,从 ES6 开始,JavaScript 才真正意义上有自己的模块化规范(现在主流框架用的都是ESM规范)。ES6 Module默认目前还没有被浏览器支持,需要使用babel。
**一、特点**
设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量,js引擎对脚本静态分析的时候,遇到模块加载指令后会生成一个只读引用。等到脚本真正执行的时候,才会通过引用模块中获取值,在引用到执行的过程中,模块中的值发生变化,导入的这里也会跟着发生变化。ES6模块是动态引入的,并不会缓存值,模块里变量总是绑定其所在的模块。
**二、用法**
ES6模块使用
`import`
关键字导入模块,
`export`
关键字导出模块
1、暴露模块
(1)正常导出
```
js
const
name
=
'张三'
const
age
=
24
// 一起导出
export
{
name
,
age
}
// 单个导出
export
getName
=
function
()
{
return
name
}
```
(2) 默认导出
```
js
const
sex
=
'男'
export
default
sex
```
```
js
const
sex
=
'男'
;
export
default
{
sex
as
e
}
//设置别名
```
+
`export default anything`
,
`anything`
可以是函数,属性方法,或者对象。
+
对于引入默认导出的模块,
`import anyName from 'module'`
, anyName 可以是自定义名称。
2、引入模块
```
js
import
sex
,
{
name
,
age
,
getName
}
from
'./moudule.js'
// sex 是模块默认导出的,{}里是模块正常导出的
```
import { } 内部的变量名称,要与 export { } 完全匹配
### 模块化规范小结
1、
`CommonJS`
规范主要用于服务端编程,加载模块是同步的,它不适合在浏览器环境,因为同步意味着阻塞加载,浏览器资源是异步加载的,因此有了
`AMD`
`CMD`
解决方案。
2、
`AMD`
`CMD`
规范主要服务于浏览器端,两者都是异步加载,只是执行时机不一样。AMD是依赖前置,提前执行,CMD是依赖就近,延迟执行。
3、UMD 集合了
`CommonJs`
、
`CMD`
、
`AMD`
规范于一身,它可以让我们在合适的环境选择合适的模块规范。
4、
`ESM `
在语言标准的层面上,实现了模块异步加载,可以取代
`CommonJS `
和
`AMD`
规范,成为浏览器和服务器通用的模块解决方案。且它是编译时加载的,而
`CommonJS``AMD`
`CMD`
都是运行时加载。
\ No newline at end of file
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment