前端循环依赖

前端中循环依赖
什么是循环依赖: 两个以上模块之间互相引用,构成闭环依赖。

保持依赖引入的单向流通性!

示例:
不要觉得自己不会写出这样的代码,当项目庞大后一旦出现这样的问题将会造成无法排查的问题。

// 在a.js 引用 b.js 内容
import {b} from "./b.js"
export const a = () => {omit...
}
// 在b.js 引用 a.js 内容
import {a} from "./a.js"
export const b = () => {omit...
}

1、 为什么循环依赖会造成报错
循环依赖产生之后报错的原因,通常是由模块执行顺序造成的。

1.1 执行顺序
执行的顺序导致的模块先后加载时,出现未定义未初始化的报错。

ES6 modules
在ES6模块中,模块的加载顺序是由它们在代码中的出现顺序决定的。因此,如果两个模块相互引用,那么先出现的模块将先执行。

CommonJS
在CommonJS模块中,模块的加载顺序是由require函数的调用顺序决定的。因此,如果两个模块相互引用,那么先调用require函数的模块将先执行。

1.2 ES6 和 CommonJS 输出的值是和原始值是什么关系?(修改导出的值是否会影响原始值)
CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。 – 《ECMAScript 6 入门教程》

CommonJS 模块确实输出的是一个值的拷贝。当你使用 module.exports 导出一个值时,这个值是被复制的,而不是被引用的。这意味着,如果你导出一个对象,那么对这个对象的修改不会影响到其他模块。

ES6模块使用 export 关键字来导出值,并且默认情况下,这些值是被引用的,而不是被复制的。这意味着,如果你导出一个对象,那么对这个对象的修改会影响到其他模块。但是,有一种情况下,ES6模块会创建一个值的拷贝,那就是当你使用 export 导出一个函数或者类的时候。在这种情况下,函数或者类的代码会被复制,但是任何在函数或者类中引用的外部变量仍然会被引用。

2、实际案例
假设现在你有一个 redux/store.ts 文件 和 api/http.ts 文件,分别为store仓库和axios请求。你需要在http文件中触发redux,来触发token的设置和清除,这是再正常不过的一个操作了吧。

http.ts 文件引入store,并视图通过store实例身上的方法修改state(通常是token)
import axios from “axios”;
import store from “@/redux/store”;
…omit
目前的依赖关系 http.ts => store.ts

实际的请求文件login.ts,引入http.ts 暴露的axios
import http from “@/api”;
…omit
目前的依赖关系 login.ts => http.ts

store 下某个切片文件 authSlice.ts 引用了login.ts里的请求
import { getAuthButtonListApi, getAuthMenuListApi } from “@/api/modules/login”;
目前的依赖关系 authSlice.ts => login.ts

由于authSlice 会被并入store
import { combineReducers } from “@reduxjs/toolkit”;
import authReducer from “./authSlice”;

export default combineReducers({
auth: authReducer,
});
目前的依赖关系 , store.ts => authSlice.ts

最终的依赖关系变为 store.ts => authSlice.ts => login.ts => http.ts => store.ts,最终居然形成了循环依赖!

3、项目如何避免循环引用
本质上如何避免循环引用,就是用监测手段 循环引用 并及时切断。

3.1 集成在webpack等脚手架的循环依赖分析
webpack插件名字 circular-dependency-plugin

3.2 集成在EsLint的循环依赖分析
EsLint插件名字 eslint-plugin-import ,eslint 规则 import/no-cycle

3.3 dpdm 开源插件
插件名字 dpdm 使用 dpdm 定位 JavaScript/TypeScript 中的循环依赖

3.4 TS项目类型
使用 import type {} from ‘./xxx’ 模块的类型定义,而不导入实际的模块内容。而不加type则会类型和实际值都被导入

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

秋招突击——7/22——复习{堆——前K个高频元素}——新作{回溯——单次搜索、分割回文串。链表——环形链表II,合并两个有序链表}

文章目录 引言复习堆堆——前K个高频元素个人实现复习实现二参考实现 新作单词搜索个人实现参考实现 分割回文串个人实现参考实现 环形链表II个人实现参考实现 两个有序链表个人实现 总结 引言 又是充满挑战性的一天,继续完成我们的任务吧!继续往下刷&a…

WebRTC QoS方法十三.2(Jitter延时的计算)

一、背景介绍 一些报文在网络传输中,会存在丢包重传和延时的情况。渲染时需要进行适当缓存,等待丢失被重传的报文或者正在路上传输的报文。 jitter延时计算是确认需要缓存的时间 另外,在检测到帧有重传情况时,也可适当在渲染时…

【目标检测实验系列】EMA高效注意力机制,融合多尺度特征,助力YOLOv5检测模型涨点(文内附源码)

1. 文章主要内容 本篇博客主要涉及多尺度高效注意力机制,融合到YOLOv5s模型中,增加模型提取多尺度特征的能力,助力模型涨点。(通读本篇博客需要7分钟左右的时间)。 2. 简要概括 论文地址:EMA论文地址 如下…

Blender材质-PBR与纹理材质

1.PBR PBR:Physically Based Rendering 基于物理的渲染 BRDF:Bidirection Reflectance Distribution Function 双向散射分散函数 材质着色操作如下图: 2.纹理材质 左上角:编辑器类型中选择,着色器编辑器 新建着色器 -> 新建纹理 -> 新…

音视频入门基础:H.264专题(17)——FFmpeg源码获取H.264裸流文件信息(视频压缩编码格式、色彩格式、视频分辨率、帧率)的总流程

音视频入门基础:H.264专题系列文章: 音视频入门基础:H.264专题(1)——H.264官方文档下载 音视频入门基础:H.264专题(2)——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

U447601 星月的建筑游戏题解

题目链接 解题思路 solution1 动态规划题目,略微复杂。 状态非常好设计,设 f i f_i fi​表示使用前i个木棍可以获得的最大积分。 然后暴力枚举来选择建筑材料的区间 [ i 1 , j ] [i1,j] [i1,j],接着就在这个区间中枚举 a , b , c a,b,c a,b,c(其实…

【开源库编译 | zlib】 zlib库最新版本(zlib-1.3.1)在Ubuntu(Linux)系统下的 编译 、交叉编译(移植)

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

《书生大模型实战营第3期》入门岛 学习笔记与作业:Git 基础知识

文章大纲 Git 是什么?-- 分布式版本控制系统版本控制系统简介Git 基本概念1. 安装 Git1.1 Windows 系统1.2 Linux 系统 2. Git 托管平台3. 常用 Git 操作4. tips4.1 全局设置 vs. 本地设置4.2 如何配置4.3 验证设置4.4 Git 四步曲 5. 常用插件6. 常规开发流程 作业其…

js+css侧边导航菜单 可收缩

jscss侧边导航菜单 可收缩https://www.bootstrapmb.com/item/14774 创建一个可收缩的侧边导航菜单需要使用JavaScript来处理交互&#xff0c;而CSS则用来设置样式和动画效果。以下是一个简单的示例&#xff0c;展示了如何创建一个可收缩的侧边导航菜单。 HTML 结构 html<!…

重修之路1

我也不知道我现在处于个什么状态&#xff0c;我在以前写代码时知道部分方法如何使用&#xff0c;但是也仅限于此我并不了其如何实现&#xff0c;让我感到迷茫我是越来越菜了随着AI的发展它写出的代码简洁高效甚至让我有些看不懂&#xff0c;以至于我开始怀疑自己的JS基本功因此…

开源模型应用落地-LangChain高阶-智能体探究-自定义agent(五)

一、前言 大模型具有非常强大的功能,可以解答疑问、撰写报告和文档、总结内容、进行翻译等各种日常工作任务。然而,大模型还可以应用于更多的场景,发挥出更强大的作用。 通过智能体,我们可以实现许多有价值的事情,比如:在日常生活中,我们能借助智能体实现智能家居的自动化…

Java中的异常处理与容错设计最佳实践

Java中的异常处理与容错设计最佳实践 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;异常处理是一个非常重要的环节。良好的异常处理和容错设计可以提升系统的健壮性和可维…

【接口测试】params传参与body传参区别

文章目录 一.params传参二.body传参三.两者区别说明 一.params传参 params传参一般用于get请求 params传参时,参数会附于URL后面以问号形式展示。 示例&#xff1a; http://ip地址:端口号/login?usernamexm&pwd111二.body传参 body传参一般用于post请求 body传参时需…

【java基础】spring springMVC springboot 的区别

Spring, Spring MVC, 和 Spring Boot 是三个紧密相关的技术&#xff0c;它们都是由 Pivotal 团队&#xff08;原SpringSource&#xff09;开发的&#xff0c;主要用于构建企业级的Java应用程序。尽管它们在功能上有所交集&#xff0c;但各自也有独特的定位和用途。 Spring Fra…

Linux定时执行程序和关闭程序

cron是一个基于时间的作业调度器&#xff0c;可以在指定的时间运行命令。 打开终端并编辑cron任务 crontab -e定时任务 # 每天20点30分执行程序 30 20 * * * /home/user/my_program # 每天15点30分关闭程序 30 15 * * * pkill my_programcrontab 用法 crontab 是 Unix 和类…

MacOS安装SDKMan管理Java版本

文章目录 1 简介2 安装与卸载2.1 安装2.2 卸载 3 使用3.1 查看其他工具&#xff1a;支持 Ant, Maven 等3.2 查看Java版本3.3 安装Java&#xff0c;加上相关的版本3.4 设置Java版本(全局)3.5 只在当前窗口生效3.6 卸载1 默认环境无法卸载 4 jdk安装的位置5 与IDEA集成参考 1 简介…

简单修改,让UE4/5着色器编译速度变快

简单修改&#xff0c;让UE4/5着色器编译速度变快 目录 简单修改&#xff0c;让UE4/5着色器编译速度变快 一、问题描述 二、解决方法 &#xff08;一&#xff09;硬件升级 &#xff08;二&#xff09;调整相关设置和提升优先级 1.调整相关设置 &#xff08;1&#xff09…

Pytorch 6

罗切斯特回归模型 加了激活函数 加了激活函数之后类 class LogisticRegressionModel(torch.nn.Module):def __init__(self):super(LogisticRegressionModel, self).__init__()self.linear torch.nn.Linear(1,1)def forward(self, x):# y_pred F.sigmoid(self.linear(x))y_p…

Java学习 - Spring Boot整合 Thymeleaf 实例

什么是 Thymeleaf Thymeleaf 是新一代的 Java 模板引擎&#xff0c;类似于 Velocity、FreeMarker 等传统引擎&#xff0c;其语言和 HTML 很接近&#xff0c;而且扩展性更高&#xff1b; Thymeleaf 的主要目的是将优雅的模板引入开发工作流程中&#xff0c;并将 HTML 在浏览器中…

Angular之store全局状态管理 浅学

在 Angular 应用中&#xff0c;我们可以使用 ngrx/store 进行状态管理可以有效地管理和跟踪应用程序的状态变化。ngrx/store 是基于 Redux 模式的状态管理库&#xff0c;它提供了一种集中式存储管理应用程序状态的方式。以下是关于 ngrx/store 的详细解释和使用方法&#xff1a…