Javascript ESLint错误:检测到依赖项周期导入/无周期 该项目的要求是将DOM与不同文件中的逻辑分离。

Javascript ESLint错误:检测到依赖项周期导入/无周期 该项目的要求是将DOM与不同文件中的逻辑分离。,javascript,dom,eslint,Javascript,Dom,Eslint,因此,我有以下文件: default.js import { submitForm } from './logic' function displayTaskForm(key) { // function create form HTML content with btn submit. submitForm(addTaskbtn, key); return form; } export { displayTable }; logic.js import { displayTa

因此,我有以下文件:

default.js

import { submitForm } from './logic'

function displayTaskForm(key) {
  // function create form HTML content with btn submit.
  submitForm(addTaskbtn, key);
  return form;
}

export { displayTable };
logic.js

import { displayTable } from './default';

const submitForm = (btn, key) => {
  // Adds event listener to add input to the table && local storage
  displayTable(key) // shows the table content including recent input
  return btn;
}

export { submitForm };
我有以下错误:

default.js

import { submitForm } from './logic'

function displayTaskForm(key) {
  // function create form HTML content with btn submit.
  submitForm(addTaskbtn, key);
  return form;
}

export { displayTable };
1:1错误相关性周期检测到导入/无周期

logic.js

import { displayTable } from './default';

const submitForm = (btn, key) => {
  // Adds event listener to add input to the table && local storage
  displayTable(key) // shows the table content including recent input
  return btn;
}

export { submitForm };
1:1错误相关性周期检测到导入/无周期

你能告诉我如何解决这个问题吗?问题是我必须将DOM与逻辑部分分离。我看不到一种基于if语句结果链接创建DOM的方法,而不使用导出和导入函数相互链接这两个文件


以下是

我认为问题的根源可能在于您决定在UI相关代码和逻辑之间划清界限。我是这样画的:

UI:任何涉及DOM的内容—这包括创建元素、附加事件侦听器等。UI可以调用logic以获得帮助

逻辑:一堆辅助函数(如果你喜欢的话,可能是类),它们大部分都是纯函数。在这些功能中,UI可以将困难的任务委托给用户。此逻辑模块不应看到DOM元素。逻辑永远不应该依赖于特定的UI(因此它永远不应该导入UI)

另一种思考方式——如果我要丢弃您当前的UI文件并构建在节点中运行的程序的CLI版本,我是否需要对您的逻辑文件进行任何更改?如果是这样的话,那么您的逻辑就是涉及到它不应该触及的特定于UI的东西

这有点难说,看看您的示例,在您的特定场景中发生了什么,而您的GitHub链接目前没有任何代码。但希望这些指导原则能有所帮助。这可能是因为这个循环依赖关系实际上只是表明当前在逻辑文件中设置的内容需要部分或全部移动到UI文件中


如果您发现大部分代码都符合UI相关代码的条件,那么您可能需要找到并提取逻辑块的纯部分,并使该逻辑块能够独立存在并在其他上下文中可重用。或者,可能是您的特定网页主要处理与UI高度耦合的逻辑。

我认为问题的根源可能在于您决定在UI相关代码和逻辑之间划清界限。我是这样画的:

UI:任何涉及DOM的内容—这包括创建元素、附加事件侦听器等。UI可以调用logic以获得帮助

逻辑:一堆辅助函数(如果你喜欢的话,可能是类),它们大部分都是纯函数。在这些功能中,UI可以将困难的任务委托给用户。此逻辑模块不应看到DOM元素。逻辑永远不应该依赖于特定的UI(因此它永远不应该导入UI)

另一种思考方式——如果我要丢弃您当前的UI文件并构建在节点中运行的程序的CLI版本,我是否需要对您的逻辑文件进行任何更改?如果是这样的话,那么您的逻辑就是涉及到它不应该触及的特定于UI的东西

这有点难说,看看您的示例,在您的特定场景中发生了什么,而您的GitHub链接目前没有任何代码。但希望这些指导原则能有所帮助。这可能是因为这个循环依赖关系实际上只是表明当前在逻辑文件中设置的内容需要部分或全部移动到UI文件中


如果您发现大部分代码都符合UI相关代码的条件,那么您可能需要找到并提取逻辑块的纯部分,并使该逻辑块能够独立存在并在其他上下文中可重用。或者,可能是您的特定网页主要处理与UI高度耦合的逻辑。

谢谢,@Scotty。我将尝试将DOM相关代码从逻辑移到DOM文件中。是的,我给了主分支的链接。我的代码在“结构”分支中。相关链接也已相应更新。我同意这一建议。DOM可以从逻辑导入,但逻辑不应该从DOM导入。谢谢,@Scotty。我将尝试将DOM相关代码从逻辑移到DOM文件中。是的,我给了主分支的链接。我的代码在“结构”分支中。相关链接也已相应更新。我同意这一建议。DOM可以从逻辑导入,但逻辑不应从DOM导入。