首页 > 编程语言 >[Javascript] Circular dependency

[Javascript] Circular dependency

时间:2024-10-05 20:11:55浏览次数:8  
标签:vue ComponentA ComponentB default Javascript dependency export import Circular

We often see circular dependency, why it's a problem, why we should avoid it and hwo to avoid it? 

 

Let's see any example first

// main.js

import A from "moduleA"
// moduleA.js

import B from "./moduleB"
console.log("ModuleA", B)
export default 'A'
// moduleB.js

import A from "moduleA"
console.log('MoudleB', A)
export default 'B'

 

The output is:

ModuleB: undefined
ModuleA: 'B'

 

Why is so?

  • From main module, we import A
  • Then code run into A module
    • It tries to import module B, but module A have yet export 
  • Then code run into B module
    • because A has yet export, so log out ModuleB: undefined
    • then moulde B exports
  • Code back to module A, log out ModuleA: B

 

Why it's important?

In Frontend, from one ComponentA, we might import Component B, based on some event, Compoennt B need to include Component A... in such case, we might run into issue.

 

How to resolve the issue?

Use Vue as an example

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  components: {
      ComponentB // this will be undefined
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}

 

The ways to solve the issue:

Solution A: using life cycle hook

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  beforeCreate() {
    this.$options.components.ComponentB = require("./ComponentB.vue").default
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}

 

Solution B: using lazy import:

// ComponentA.vue

import ComponentB from "./ComponentB.vue";

export default {
  components: {
      ComponentB: () => import('./ComponentB.vue').then(m => m.default)
  }
}

// ComponentB.vue

import ComponentA from "./ComponentA.vue";

export default {
  components: {
      ComponentA 
  }
}

 

标签:vue,ComponentA,ComponentB,default,Javascript,dependency,export,import,Circular
From: https://www.cnblogs.com/Answer1215/p/18448408

相关文章

  • 面向-SAP-ABAP-开发者的-JavaScript-基础知识-全-
    面向SAPABAP开发者的JavaScript基础知识(全)原文:JavaScriptEssentialsforSAPABAPDevelopers协议:CCBY-NC-SA4.0一、JavaScript简介本章为ABAP开发者提供了JavaScript的介绍。我们先从学习JavaScript的必备知识开始。然后,我们将介绍JavaScript的基础知识,以......
  • Vue Javascript 导出Excel:SheetJS/js-xlsx json_to_sheet xlsx 修改表头名称和展示的
     import*asXLSXfrom'xlsx';//展示的顺序,把data中对象的属性按照你想要的顺序排放就可以了,constheader=["pId","dID"]//展示的名称constheaderDisplay={pId:"项编号",dID:"D编号"};//将表头放剑原始数据里面去,要保证表头在数......
  • [JavaScript] this 关键字
    全局作用域在浏览器中,如果在全局作用域下使用this,它将指向window对象;在Node.js环境中,则指向global对象。方法调用当一个函数作为对象的方法被调用时,this会指向该对象。constobj={name:"Alice",greet:function(){console.log(`Hello,${this.name}`)......
  • 从 JavaScript 到 OCaml:浅浅浅总结一下函数式编程
    背景这几天突击了一下Cornell的cs3110;抽了两个下午刷完了Chapter3,4,5的课后习题,很有感触。结合自己浅薄的函数式编程理解和贫瘠的JavaScript/TypeScript开发经历,总结一下自己第一阶段的函数式编程学习经历。......
  • 盘点五大热门JavaScript图表库,助你高效开发!
    1、Chart.jsChart.js是一个简单、灵活的图表库,支持8种图表类型(如折线图、柱状图、饼图等)。它使用HTML5Canvas元素来渲染图表,并且有良好的文档和社区支持。使用方法:npminstallchart.jsvue-chartjs然后在你的Vue组件中使用:<template><div><line-chart:data......
  • 掌握防抖与节流:如何用JavaScript封装通用函数
    在日常前端开发中,我们经常会遇到一些频繁触发的事件,如窗口调整大小、滚动条滚动、输入框输入等。为了提高页面性能和用户体验,我们需要对这些事件进行优化。本文将介绍如何使用JavaScript封装通用的防抖和节流函数。一、什么是防抖(Debounce)和节流(Throttle)?防抖(Debounce):当持续......
  • 总结28个令人惊艳的JavaScript单行代码
    1.阶乘计算使用递归函数计算给定数字的阶乘。12constfactorial=n=>n===0?1:n*factorial(n-1);console.log(factorial(5));//输出120 2.判断一个变量是否为对象类型1constisObject=variable===Object(variable);......
  • JavaScript-快速语法参考-全-
    JavaScript快速语法参考(全)原文:JavaScriptQuickSyntaxReference协议:CCBY-NC-SA4.0一、使用JavaScript要开始试验JavaScript,您应该安装一个支持这种语言的集成开发环境(IDE)。有很多不错的选择,比如NetBeans、Eclipse、VisualStudio、括号。在本书中,我们将使用NetBe......
  • JavaScript-正则表达式入门指南-全-
    JavaScript正则表达式入门指南(全)原文:IntroducingRegularExpressions协议:CCBY-NC-SA4.0一、正则表达式简介为了开始介绍正则表达式,我将从一个例子开始。这是一个你已经经历了几百次的问题。当您在线输入客户数据时,许多web表单会要求您提供电子邮件地址。为了避免输入......
  • JavaScript笔记
    基操数据类型原始类型对象类型MapandSet流程控制函数及面向对象函数方法常用内部对象面向对象编程(OOP)操作BOM元素操作DOM元素(I)操作表单jQuery基操js作为一种脚本语言,可以嵌入到HTML页面中js是双标签,可以写多行,也可以写一行内部标签<script>......