项目的要求是将DOM与不同文件中的逻辑分离
因此，我有这些文件：
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
1:1 error Dependency cycle detected import/no-cycle
logic.js
1:1 error Dependency cycle detected import/no-cycle
你能告诉我如何解决这个问题吗？问题是我必须将DOM从逻辑部分中分离出来。如果不将两个文件都链接到导出&相互导入函数。
这是原始存储库链接
我认为问题的根源可能在于您决定在UI相关代码和逻辑之间划清界限。我是这样画的：
UI：任何涉及DOM的东西，包括创建元素、附加事件侦听器等。UI可以向逻辑寻求帮助。
逻辑：一堆辅助函数(如果你感兴趣的话，可能是类(，它们大多是纯的。UI可以将困难的任务委派给这些函数。DOM元素永远不应该被这个逻辑模块看到。逻辑永远不应该依赖于特定的UI(所以它永远不应该导入UI(。
另一种想法是——如果我要丢弃您当前的UI文件，并构建在节点中运行的程序的CLI版本，我是否必须对您的逻辑文件进行任何更改？如果是这样的话，那么你的逻辑是在触摸UI特定的东西，它不应该触摸。
看看你的例子，很难判断你的特定场景中发生了什么，而且你的GitHub链接中目前没有任何代码。但是，希望这些指导原则能有所帮助。可能是这种循环依赖关系实际上只是表明，当前在逻辑文件中设置的某些内容需要部分或全部移动到UI文件中。
如果你发现你的大部分代码都符合UI相关的代码，那么你可能需要努力找到并提取出一块逻辑的纯部分，并使该逻辑能够独立存在，并在其他上下文中可重复使用。或者，可能是您的特定网页主要处理与UI高度耦合的逻辑。