程序媛小y

JavaScript模块化规范

文章目录

JavaScript模块化规范
- CommonJS规范
- - 使用
  - require细节
  - CommonJS规范缺点
  - 总结
- ES6 模块
- - 定义和引用
  - default用法
  - 关于值的引用
- ESModule的解析流程
- - 阶段一：构建阶段
  - - 查找文件并获取它
    - 解析
  - 阶段二：实例化
  - 阶段三：运行
- 关于循环引用
- - CommonJS中的循环引用案例
  - ES6 Module中的循环引用案例
- CommonJS与ES6 Modules规范的区别
- AMD规范
- - 产生原因
  - 使用
- CMD规范
- AMD和CMD的区别

CommonJS规范

Node是CommonJS在服务器端一个具有代表性的实现；
webpack打包工具具备对CommonJS的支持和转换；

exports和module.exports可以负责对模块中的内容进行导出；

require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

使用

exports - require

//导出.js
const UTIL_NAME = "util-name"

function formatCount(){
	return '200'
}

function formatDate(){
	return '2022-10-10'
}

exports.UTIL_NAME = UTIL_NAME
exports.formatCount = formatCount
exports.formatDate = formatDate


//导入.js
const util = require('./util.js')
// 或者使用结构
const {
	UTIL_NAME
	formatCount,
	formatDate
} = require('./util.js')

console.log(util.UTIL_NAME)
console.log(util.formatCount())
console.log(util.formatDate())

exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出

exprots导出的原理：

exports导出一个对象，require导入这个对象，它们指向的是同一个对象，在一个文件中对该对象进行修改，另一个文件中也会受到影响。

验证：

//导出.js
let name = 'bar'
exports.name = name
//新增代码
setTimeout(() => {
	console.log(exports.name) //会被修改
},4000)

//导入.js
const bar = require('./bar.js')
console.log(bar.name)
//新增代码
setTimeout(() => {
  bar.name = 'kobe' //在引用的地方修改值，看源文件会不会被修改
},2000)

module.exports导出

上面的exports.name = name 导出方式用的很少

使用 module.exports.name = name 也可以实现导出，这里和上面的导出并没有什么区别

let name = 'bar'
let age = 18

module.exports.name = name
module.exports.age = age

module.exports原理：

module是一个对象，exports也是一个对象。在node中每一个模块都是Module的一个实例，那么这个实例上会有一个属性exports，即module.exports，并且module.exports的属性值是个对象，指向exports对象。

module.exports和exports有什么关系或者区别呢？

CommonJS中是没有module.exports的概念的；
但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module；
所以在Node中真正用于导出的其实根本不是exports，而是module.exports；
因为module才是导出的真正实现者；

但是，为什么exports也可以导出呢？

这是因为module对象的exports属性是exports对象的一个引用；
也就是说 module.exports = exports = 一个对象；

exports === module.exports // true

开发中最常见的写法：

module.exports = {

}

require细节

我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。

并且在引入文件时，我们可以省略文件名后缀，为什么？require的查找规则是怎么样的呢？

导入格式如下：require(X)

情况一：X是一个Node核心模块，比如path、http

直接返回核心模块，并且停止查找

情况二：X是以./ 或…/ 或/（根目录）开头的
- 第一步：将X当做一个文件在对应的目录下查找；
  1.如果有后缀名，按照后缀名的格式查找对应的文件
  2.如果没有后缀名，会按照如下顺序：
  - 直接查找文件X
  - 查找X.js文件
  - 查找X.json文件
  - 查找X.node文件
- 第二步：没有找到对应的文件，将X作为一个目录
  查找目录下面的index文件
  - 查找X/index.js文件
  - 查找X/index.json文件
  - 查找X/index.node文件
- 如果没有找到，那么报错：not found

情况三：直接是一个X（没有路径），并且X不是一个核心模块

自定义模块，先在当前目录的node_modules里找这个模块，如果没有，它会往上一级目录查找，查找上一级的node_modules，依次往上，直到根目录下都没有, 就抛出错误。

LinDaiDaideMBP:commonJS lindaidai$ node test.js
[
  '/Users/lindaidai/codes/test/CommonJS和ES6/commonJS/node_modules',
  '/Users/lindaidai/codes/test/CommonJS和ES6/node_modules',
  '/Users/lindaidai/codes/test/node_modules',
  '/Users/lindaidai/codes/node_modules',
  '/Users/lindaidai/node_modules',
  '/Users/node_modules',
  '/node_modules'
]

模块的加载过程

结论一：模块在被第一次引入时，模块中的js代码会被运行一次
结论二：模块被多次引入时，会缓存，最终只加载（运行）一次
- 为什么只会加载运行一次呢？
- 这是因为每个模块对象module都有一个属性：loaded。
- 为false表示还没有加载，为true表示已经加载；
结论三：如果有循环引入，那么加载顺序是什么？
- 如果出现下图模块的引用关系，那么加载顺序是什么呢？
  - 这个其实是一种数据结构：图结构；
  - 图结构在遍历的过程中，有深度优先搜索（DFS, depth first search）和广度优先搜索（BFS, breadth first search）；
  - Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb

CommonJS规范缺点

CommonJS加载模块是同步的：
- 同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行；
- 这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快；
如果将它应用于浏览器呢？
- 浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行；
- 那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作；
所以在浏览器中，我们通常不使用CommonJS规范：
- 当然在webpack中使用CommonJS是另外一回事；
- 因为它会将我们的代码转成浏览器可以直接执行的代码；
在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD：
- 但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ESModule代码的转换；
- AMD和CMD已经使用非常少了

总结

每个文件就是一个模块，有自己的作用域。每个模块内部，module变量代表当前模块，是一个对象，它的exports属性（即module.exports）是对外的接口。
module.exports属性表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。
为了方便，Node为每个模块提供一个exports变量，指向module.exports。

let exports = module.exports

require命令用于加载模块文件。 CommonJS加载原理：
CommonJS模块就是一个脚本文件，require命令第一次加载该脚本时就会执行整个脚本，然后在内存中生成该模块的一个说明对象。

{
    id: '',  //模块名，唯一
    exports: {  //模块输出的各个接口
        ...
    },
  	filename: '/absolute/path/to/entry.js', // 当前模块的绝对路径
    loaded: true,  //模块的脚本是否执行完毕
    children: [], // 被该模块引用的模块
  	parent: '', // 第一个引用该模块的模块
  	paths: [ // 模块的搜索路径
   		'/absolute/path/to/node_modules',
   		'/absolute/path/node_modules',
   		'/absolute/node_modules',
   		'/node_modules'
  	]
}

以后用到这个模块时，就会到对象的exports属性中取值。即使再次执行require命令，也不会再次执行该模块，而是到缓存中取值。
CommonJS模块是加载时执行，即脚本代码在require时就全部执行。一旦出现某个模块被“循环加载/引用”，就只输出已经执行的部分，没有执行的部分不会输出。

ES6 模块

定义和引用

ES6模块与CommonJS有本质区别，ES6模块对导出变量，方法，对象是动态引用，JS 引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。

ES Module和CommonJS的模块化有一些不同之处：

一方面它使用了import和export关键字；
另一方面它采用编译期的静态分析，并且也加入了动态引用的方式；

ES Module模块采用export和import关键字来实现模块化：

export负责将模块内的内容导出；
import负责从其他模块导入内容；

采用ES Module将自动采用严格模式：use strict

虽然大部分主流浏览器支持 ES6 模块，但是和引入普通 JS 的方式略有不同，需要在对应 script 标签中将属性 type 值设置为“module”才能被正确地解析为 ES6 模块；

并且，我们不允许将该html的文件直接在浏览器中打开：如果你通过本地加载 HTML 文件 (比如一个 file:// 路径的文件), 你将会遇到 CORS 错误，因为 JavaScript 模块安全性需要。你需要通过一个服务器来测试。一般使用 Live Server 插件。

导入与导出

//导出.js
const name = 'zs'
const age = 18

export {
	name,
	age
}
export {
  name as fName,
  age as fAge,
  foo as fFoo
}
export const name = "pjy";


//导入.js
import { name, age } from './foo.js' //注意这里必须要加文件后缀名

import {name as fName,age as fAge} from "./foo.js"

import * as foo from "./foo.js"
//在使用时
console.log(foo.name);
console.log(foo.age);

default用法

在一个模块中，只能有一个默认导出（default export）。

默认导出export时可以不需要指定名字；
在导入时不需要使用{}，并且可以自己来指定名字；

//foo.js
const foo = "foo value";

export default foo;



//main.js
import pjy from "./foo.js"

console.log(pjy);//foo value

通过import加载一个模块，是不可以在其放到逻辑代码中的

但是某些情况下，我们确确实实希望动态的来加载某一个模块：

这个时候我们需要使用 import() 函数来动态加载；

import函数返回一个Promise，可以通过then获取结果；

let flag = true;
if(flag){
	import('./moudles/aaa.js').then(res => {
		console.log(res.name, res.age)
	})
} else {
	import('./moudles/aaa.js').then(aaa => {
		//...
	})
}

关于值的引用

ES6 模块输出的是值的引用，export default 也是对值的引用

在a.js中输出一个对象，属性value的值为10

// a.js
export default {
    value: 10,
}

在b.js中引用a.js中输出的对象，并输出一个打印a对象的函数

// b.js
import defA from './a';
export default function logA() {
    console.log(defA);
}

在c.js中引用a.js中输出的对象与b.js中的方法，设置a对象的value为20后调用logA方法

// c.js
import defA from './a';
import logA from './b';
defA.value = 20;
logA();
// {value: 20}

可以看到打印出来的a对象的value值为20，这说明a提供的对象中的属性值被修改了。

import的单个值是只读的

输入的模块变量是不可重新赋值的，它只是个可读引用，不过却可以改写属性，例子在上面已经写了

在a.js中输出一个变量a，值为10

// a.js
export let a = 10;

在b.js中获取a.js中输出的a，并将其赋值为20

// b.js
import { a } from './a';
a = 20;
// ReferenceError: a is not defined

在经过webpack打包后在浏览器中将报出引用错误。
换一种方式看看能不能修改a的值，在c.js中用import as来获取a.js输出的值，再修改a的值

// c.js
import * as A from './a';
A.a = 20;
// TypeError: Cannot set property a of #

JavaScript模块化规范