每天3分钟，重学ES6-ES12(十八) CJS

最新推荐文章于 2024-09-03 16:07:32 发布

虎妞先生

最新推荐文章于 2024-09-03 16:07:32 发布

阅读量21

点赞数

文章标签： es6 前端 ecmascript 开发语言 javascript

本文链接：https://blog.csdn.net/qq_33259455/article/details/135522858

版权

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

每天3分钟，重学ES6-ES12文章汇总

前言

今天开始和大家一起系统的学习ES6+,每天3分钟，用一把斗地主的时间，重学ES6+，前面我们介绍了模块化的历史，今天介绍模块化处理方案

exports.a

module.exports ={a:a} js // 源码 module.exports = {} exports = module.exports //最终能导出的一定是module.exports()

```js // main.js const why = require("./why.js")

console.log(why)

setTimeout(() => { console.log(why.name) why.name = "james" }, 1000)

// why.js const info = { name: "why", age: 18, foo: function() { console.log("foo函数~") } }

setTimeout(() => { // info.name = "kobe" console.log(info.name) }, 2000)

module.exports = info

``` 两个文件执行node main.js 输出结果为

{ name: 'why', age: 18, foo: [Function: foo] } why james

先打印why对象，然后打印why 修改why name 打印 james

由此可见，require 引入的文件是加载时执行

require是一个函数，可以帮助我们引入一个文件(模块)中导出的对象。

require(X)

查找规则

结论一:模块在被第一次引入时，模块中的js代码会被运行一次
结论二:模块被多次引入时，会缓存，最终只加载(运行)一次
- 这是因为每个模块对象module都有一个属性:loaded。
- 为false表示还没有加载，为true表示已经加载;
结论三:如果有循环引入，Node采用的是深度优先算法，寻找模块

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

关注