js模块化 --- commonjs规范 原理详解

2024-09-06 06:52

本文主要是介绍js模块化 --- commonjs规范 原理详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

什么是commonjs规范

        commonjs是一种模块化规范(nodejs的默认模块化规范,新版的nodejs已经支持es6的模块化,但它默认任然使用的是commonjs),通俗的说它将代码分割成了一个一个的模块,让不同的模块拥有自己独立的作用域(类似命名空间的隔断),在不同的模块中实现了重复命名的效果,同时支持模块的导入导出,让模块与模块之间可以相互调用,实现代码的复用。

tips:模块化可以让代码分离开和减少命名冲突问题,便于维护和开发,

模块化的核心:导入导出,作用域隔离

commonjs的导入导出

作为模块,最明显的特征就是支持导入导出,在commonjs中,使用require,module.exports,exports,来导入和导出。

const obj = {name: 'a',desc:'这是a模块'
}module.exports = obj
const obj = {name: 'b',desc: '这是b模块'
}module.exports = obj;
// 导入模块
const a = require('./a')
const b = require('./b')console.log(a)
console.log(b)

以上是a,b,index模块,一个js文件就是一个模块,在a,b模块中各自有一个obj对象导出,这里就实现了模块的命名分割,在不同的模块使用声明同名的变量名。然后在index中导入并使用

可以看到成功的拿到了各自模块中的obj对象。

这就是commonjs的基本使用,接下来分析一下它的模块化原理

commonjs的模块化原理

为什么可以在模块(js文件)中直接使用require,和module.exports,exports进行导入导出?

从用法上看很明显,require是一个函数,它接受一个模块(js文件)路径,返回这个模块的导出的值,而module.export,export是一个对象或者变量,它用来接受值作为模块的导出;也就是说,commonjs使用一个函数进行导入,一个对象或者变量进行导出;

tips:这里分析一下导入和导出的细节,

导入:获取一个模块导出的值

导出:将模块中的值暴露出去(丢给导入) 

        

分析一下, 这个过程和函数的返回调用非常相似,在函数中,

1.你可以返回一个值作为函数的返回值(导出),

2.同时可以调用函数获取到它的返回值(导入),

3.同时在不去调用函数的情况下,外部是没有办法拿到函数内部的东西(隔离),

4.函数可以重复调用(模块也可以重复导入)

在commonjs中,一个模块就是一个js文件,同时,一个模块也是一个函数,到这里可能会有点疑惑,这里我们直接在任意一个模块中打印argument

console.log( arguments)

在js函数中,出来箭头函数外都有一个argument参数,它包含了这个函数调用时传入的参数

可以看到一共有5个参数,这样可以还是不够清晰,在打印一下argument的callee属性

const obj = {name: 'a',desc:'这是a模块'
}module.exports = obj// arguments.callee 函数本身
console.log( arguments.callee.toString())

这下可以明显的看到在a模块的代码全都被放到了一个函数中,这个函数有5个参数exports, require, module, __filename, __dirname,这就是可以直接才模块中直接使用exports, require, module导入导出的原因。

所以在commonjs规范中,所以的js文件都作为模块,而对每一个js文件套上一层函数,是实现模块的原理,在不同的模块(函数)中,由于没有互相调用这个顶层函数,所以互相不能够访问到内部的数据。

到这里可以总结一下commonjs的原理了:

commonjs是通过给每个js文件‘外套’一层函数实现的模块化,即通过参数来导入导出,函数间作用域的隔断,函数的重复调用;但是这种模块化是基于运行时的,也就是说,虽然编译时外套了一层函数,但代码运行的时候才会进行导入导出(这很好理解,每个模块都是函数,调用模块也是在模块内调用的,函数运行了在能执行到导读导出的位置,将导出的值封装再对象中);

 

以上就是commonjs规范的模块化的原理,下面介绍一下有关commonjs的细节问题

和es6的module模块化规范的区别

这主要从以下几个方面区分:

1.ESmodule,是通过import,export,export default 进行导入导出的

2.ESmodule,是官方的规范,浏览器和node环境下都实现了对它的支持,

3.ESmodule,的模块化是基于编译时,在代码还没有执行时就已经进行了模块的导入导出,输出对应的接口,这是基于底层实现的

上面的第2点中,commonjs只支持在node环境下直接使用,浏览器种需要通过Babel进行转译才能使用,而ESmodule要在浏览器‘type = module’ 的script标签,node环境下,在package.json文件中配置,'type':'module'字段就可以使用ESmodule的规范(默认是'type':'commonjs')

 

ESMCJS
导入导出import,export default,exportrequire,module.export,exports
实现基于编译时基于运行时

 

 

 

 

 

 

 有关ESmodule的使用可以参考:js模块(module)和导入,导出(import,export)_js import module-CSDN博客

导出的优先级

使用commonjs规范的导入导出时,明显注意到,导入只有require,而导出可以使用exports,和module.exports;如果同时存在这两个导出,最终会是什么结果呢?

const obj = {name: 'a',desc:'这是a模块'
}// module.exports = obj
exports.desc = obj.desc;
exports.name = obj.name;// arguments.callee 函数本身
// console.log( arguments.callee.toString())
const obj = {name: 'b',desc: '这是b模块'
}module.exports = obj;const a = require('./a')console.log(a); // { name: 'a', desc: '这是a模块' }

a模块使用exports导出,然后在b模块导入a并运行b.js可以看到结果和module.exports的导出方法是一样的,都是将值赋给对象导出;

如果同时存在module.export和exports导出,最终会以module.exports为准,因为在commonjs实现的require函数中,最终返回的是module.exports ,在一个模块中this和export, module.exports的优先级关系(module.exports--->exports,this)

console.log(this,exports,module.exports)this.val = 'this';
exports.val = 'exports';
module.exports = {val:'module.exports'} ;console.log(this,exports,module.exports)

可以看到最开始module.exports,exports, this都是一个空对象(可以去改属性,但是不能去修改这个对象,否则导入会产生问题),因为this和exports是指向的同一个对象,所以,exports的赋值覆盖了this

console.log(this,exports,module.exports)exports.val = 'exports';
this.val = 'this';
module.exports = {val:'module.exports'} ;console.log(this,exports,module.exports)

颠倒一下顺序很容易就能看出来,而module.exports不一样,如果有单独导出值,那么它会以导出的值为准,若没有,则会以this和exports的值为准

大致就是:如果module.exports有值,则返回module.exports,否则,会将this,export的值赋值给module.exports,再返回module.exports;

下面测试一下导入的结果

index.js

exports.val = 'exports';
this.val = 'this';
module.exports = {val:'module.exports'} ;

b.js 


const index = require('./index')console.log(index);

 

 index.js


exports.val = 'exports';
this.val = 'this';
// module.exports = {val:'module.exports'} ;

b.js  


const index = require('./index')console.log(index);

 

可以看到,最终就是区分有没有给module.exports赋值,有的话以module.exports为准,没有的话,吧this,exports(this和exports是同一个对象,this === export)的值赋给module.exports,再以module.exports为准

这篇关于js模块化 --- commonjs规范 原理详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1141314

相关文章

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

hdu4407(容斥原理)

题意:给一串数字1,2,......n,两个操作:1、修改第k个数字,2、查询区间[l,r]中与n互质的数之和。 解题思路:咱一看,像线段树,但是如果用线段树做,那么每个区间一定要记录所有的素因子,这样会超内存。然后我就做不来了。后来看了题解,原来是用容斥原理来做的。还记得这道题目吗?求区间[1,r]中与p互质的数的个数,如果不会的话就先去做那题吧。现在这题是求区间[l,r]中与n互质的数的和

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

MySQL高性能优化规范

前言:      笔者最近上班途中突然想丰富下自己的数据库优化技能。于是在查阅了多篇文章后,总结出了这篇! 数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名识意,并且最后不要超过32个字符 临时库表必须以tmp_为前缀并以日期为后缀,备份

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

K8S(Kubernetes)开源的容器编排平台安装步骤详解

K8S(Kubernetes)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述: 安装步骤: 安装Docker:K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master:在集群中选择一台主机作为Master节点,安装K8S的控制平面组件,如AP

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件