前端循环依赖

前端中循环依赖

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

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

示例:

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

复制代码
// 在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则会类型和实际值都被导入

相关推荐
前端小巷子2 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹6 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器12 分钟前
指定阿里镜像原理
前端
枷锁—sha17 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha18 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜34 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss