Common.js模块化原理

1、思考

我们都知道在Common.js语法规范中的导出方式有:

js 复制代码
//默认导出:
module.exports = '张三';
exports = '李四'; // 不能赋值为引用数据类型
//具名导出:
exports.name = '王五';

通常通过直接给exports赋值的方式是不常见的,因为这样可能会出现报错(当赋值为引用数据类型时),并且我们知道在模块中我们可以使用一些非内置的变量(例如__filename等),那么出现这些现象的原因是什么呢🤔?

这一切都要从Common.js模块化执行原理说起,一旦我们掌握了原理,理解这些就不在话下😎

2、模块编译原理

先从模块编译开始说起:我们知道在Common.js模块化规范中,一个js文件就是一个模块,当解析器解析js文件时,会通过node中的fs模块同步进行读取,然后进行首尾包装,具体如下:

js 复制代码
(function(exports,require,module,__filename,__dirname){
    //读取的文件内容
})

这样就使得每个模块之间被函数作用域相隔离,从而实现模块化,不会污染全局变量,并且在函数内部可以使用我们传入的一些变量和方法。

现在我们知道了为什么能够在模块中使用__filename等变量和exports等方法了,那么为什么默认导出会有两种呢?如果exports和module.exports是同一个方法的话这样会不会很多余?其实按道理来讲,我们只需要一个export就够了,默认导出exports = '张三',具名导出:exports.name = '李四'。原因就在于:exports对象是通过形参传入的,直接赋值形参会改变形参的引用,所以就用module加以限制,将module的exports属性赋值为exports。

相关推荐
+VX:Fegn089519 分钟前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander2 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan3 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师4 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒5 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
光影少年5 小时前
Express 中间件原理
后端·node.js·express
卡布鲁5 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼5 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
时速GEO系统5 小时前
初元 AI V1.1 版本升级,首个正式版发布一周・实现生成、部署、上线、优化全流程自动化闭环
人工智能·数据挖掘·node.js
步行cgn5 小时前
Spring p 命名空间注入详解
java·前端·spring