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。

相关推荐
egekm_sefg7 分钟前
一个基于Rust适用于 Web、桌面、移动设备等的全栈应用程序框架
开发语言·前端·rust
ObjectX前端实验室29 分钟前
交互式md文档渲染实现
前端·github·markdown
励志成为大佬的小杨1 小时前
c语言中的枚举类型
java·c语言·前端
前端熊猫2 小时前
Element Plus 日期时间选择器大于当天时间置灰
前端·javascript·vue.js
傻小胖2 小时前
React 组件通信完整指南 以及 自定义事件发布订阅系统
前端·javascript·react.js
JaxNext2 小时前
开发 AI 应用的无敌配方,半小时手搓学英语利器
前端·javascript·aigc
万亿少女的梦1682 小时前
高校网络安全存在的问题与对策研究
java·开发语言·前端·网络·数据库·python
Python私教3 小时前
Vue3中的`ref`与`reactive`:定义、区别、适用场景及总结
前端·javascript·vue.js
CQU_JIAKE3 小时前
12.12【java exp4】react table全局搜索tailwindcss 布局 (Layout) css美化 3. (rowId: number
前端·javascript·react.js
Jiude3 小时前
调试Cesium源码分析并解决在Vite中使用遇到的问题
前端·架构·cesium