javascript - 如何避免 JavaScript 中的函数式循环依赖？

Question

有一种特殊的 JavaScript 模式一直困扰着我，我从来没有真正想出解决它的正确方法。相反，我通常只是忽略它，因为 99% 的 JavaScript 解释器都支持函数提升，因此不会出现运行时错误。

考虑以下几点:

function onOpen()
{
    console.log("Connected!");
    ws.removeEventListener("open", onOpen);
    ws.removeEventListener("error", onError);
}

function onError()
{
    console.log("Failed to connect!");
    ws.removeEventListener("message", onMessage);
    ws.removeEventListener("error", onError);
}

var ws = new WebSocket("...");
ws.addEventListener("open", onOpen);
ws.addEventListener("error", onError);

在这段代码中，在 onOpen 函数中，我在 onError 定义之前引用了 onError。这实际上不是问题，因为 onOpen 方法只有在定义了 onError 之后才会运行，但这仍然是不好的做法并且会出错 ESLint's no-use-before-define rule

从更一般的意义上讲，只要存在两个需要相互引用的函数，就会出现这种错误:

function a(x) {
    return x === 1 ? b(x) : 2;
}
function b(x) {
    return x === 2 ? a(x) : 1;
}

是否有消除这种循环依赖的设计模式？在我的简单通用示例中，简单的解决方案是“只有一个功能”:

function a(x) {
    return x === 1 ? 1 : 2;
}

然而，当绑定(bind)事件监听器时，这似乎并不总是可行的。

Answer 1

It's still bad practice and trips up ESLint's no-use-before-define rule

不，这不是一个坏习惯，而是非常必要的。当您具有循环函数依赖性时，这是首选模式。相应地配置您的 ESLint(使用 { "functions": false })。

Is there a design pattern for eliminating this circular dependency?

不是真的。但是，有几种解决方法，例如使用 var 预先声明函数(足以 make ESLint happy )。或者，您可以通过参数传递对函数的引用:

function _a(x, f) {
    return x === 1 ? f(x) : 2;
}
function b(x) {
    return x === 2 ? _a(x, b) : 1;
}
function a(x) {
    return _a(x, b);
}

其他疯狂的闭包黑客，跟进 Y 组合器的想法，是可以想象的。不过，这并不真正适合您的事件监听器场景。