javascript - 如何在Node.js中设置交叉同步？ (相关循环依赖)

Question

我有 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里面并调用另一个函数routine() slider.js里面同时在实例级别。因此它们可以分为 2 个不同的文件，但仍然可以在我需要时相互访问。

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

Uncaught RangeError: Maximum call stack size exceeded

我读过一些关于循环依赖的文章 #1 , #2但第 2 篇文章提到的是基于 typescript 的。我已经更改了没有 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 有没有办法设置交叉调用函数？

Answer 1

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

删除代码中所有不必要的部分归结为:

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