0

我有 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'
        );
    }
}

我的目标是同时在实例级别调用updateImage()内部的函数并调用内部loop.js的另一个函数。所以它们可以分开为 2 个不同的文件，但仍然可以在我需要的时候相互访问。routine()slider.js

问题是这会引发一个称为最大回调堆栈的错误。

未捕获的 RangeError：超出最大调用堆栈大小

我已经阅读了一些关于循环依赖#1、#2的文章，但文章#2 是基于打字稿提到的。我已经更改了没有 typescript 关键字的代码，然后浏览器触发了同样的错误。

// 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 中设置交叉调用函数？

4

1 回答 1

1

您的问题不是模块的循环依赖，而是非终止的间接递归。

删除您的代码的所有不必要的部分归结为：

class Slider {
    constructor() {
       this.Loop = new Loop();
    }
}

class Loop {
    constructor() {
        this.Slider = new Slider();
    }
}

如您所见， forSlider和的构造函数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'
        );
    }
}
于 2019-08-09T22:59:52.377 回答