我有 2 个不同的 js 文件,它们像这样相互依赖:
// slider.js
'use strict';
import Loop from './loop.js';
export default class Slider {
constructor(elem) {
this.elem = elem;
this.Loop = new Loop(this.elem);
this.Loop.routine();
}
updateImage() {
console.log(
'Cross Synchronous Test: Updated images',
'Called the function from loop.js'
);
}
}
let proSlider = new Slider('Number')
// loop.js
import Slider from './slider.js';
export default class Loop {
constructor(elem) {
this.elem = elem;
this.Slider = new Slider(this.elem);
this.Slider.updateImage();
}
routine() {
console.log(
'Cross Synchronous Test: references a group of actions',
'Called the function from Slider.js'
);
}
}
我的目标是在loop.js
内部调用updateImage()
函数,同时在实例级别调用另一个函数routine()
slider.js
内部。因此,它们可以作为 2 个不同的文件分开,但仍然可以随时相互访问。
问题是这会引发一个称为最大回调堆栈的错误。
未捕获范围错误:超出最大调用堆栈大小
我已经阅读了一些关于循环依赖 #1、#2 的文章,但文章 #2 提到了基于打字稿。我已经更改了没有打字稿关键字的代码,然后浏览器触发了相同的错误。
// slider.js
constructor(elem) {
this.elem = elem;
this.getLoop();
}
getLoop() {
return new Loop(this.elem).routine();
}
// loop.js
constructor(elem) {
this.elem = elem;
this.getSlider();
}
getSlider() {
return new Slider(this.elem).updateImage();
}
有没有办法在 Node.js 中设置交叉调用函数?
你的问题不是模块的循环依赖,而是非终止的间接递归。
删除代码的所有不必要的部分归结为:
class Slider {
constructor() {
this.Loop = new Loop();
}
}
class Loop {
constructor() {
this.Slider = new Slider();
}
}
如您所见,Slider
和Loop
的构造器在一个永不终止的无限循环中递归地调用对方,并创建无限数量的交替实例Slider
、Loop
、Slider
、Loop
、Slider
、Loop
、...
摆脱这种困境的一种手段可能是第二个构造实例获得指向第一个实例的指针并终止递归:
class Slider {
constructor(elem, loop) {
this.elem = elem;
this.Loop = loop || new Loop(this.elem, this);
this.Loop.routine();
}
updateImage() {
console.log(
'Cross Synchronous Test: Updated images',
'Called the function from loop.js'
);
}
}
class Loop {
constructor(elem, slider) {
this.elem = elem;
this.Slider = slider || new Slider(this.elem, this);
this.Slider.updateImage();
}
routine() {
console.log(
'Cross Synchronous Test: references a group of actions',
'Called the function from Slider.js'
);
}
}