如何在工厂函数之间链接 2 个不同的事件处理程序？

Question

我有 2 个按钮，分别是 ButtonA 和 ButtonB。每个按钮都有自己的事件处理程序，并且也由每个不同的函数工厂限定范围。

我想链接这 2 个按钮以在名为 Worker 的工厂中将参数设置为全局变量，但由于某些原因 Worker 无法注册参数。

这是我点击 buttonA 1 次然后点击 ButtonB 3 次的结果。

> Order receives from Manager manager.js:9  
> Responses in Worker worker.js:9
> Meal worker.js:11
> Responses in Worker worker.js:9
> undefined worker.js:11 // It should return Meal 
> Responses in Worker worker.js:9
> undefined worker.js:11
> Responses in Worker worker.js:9
> undefined worker.js:11

代码如下：

// manager.js
import Worker from "./worker.js";
const Manager = (() => {
   var upperChain = (elem) => {
       elem.addEventListener("click", Interface.sendOrderToWorker);
   };
   const Interface = {
       sendOrderToWorker: async (event) => {
           // do something..
           console.log("Order receives from Manager");
           Worker.getReceipt("Meal"); // Send data from here
       }
   };
   return {
       upperChain: (elem) => upperChain(elem)
   };
})();
export default Manager;

// worker.js
const Worker = (() => {
    // this.string;
    let food;
    var lowerChain = (elem) => {
      elem.addEventListener("click", (event) => Interface.getReceipt());
    }
    const Interface = {
        getReceipt: async (string) => {
            console.log("Responses in Worker");
            food = string;
            console.log(food); // Receives data from here.
        }
    }
    return {
        lowerChain: (elem) => lowerChain(elem),
        getReceipt: (param) => Interface.getReceipt(param)
    }
})();
export default Worker;

// index.js
import Manager from "./manager.js";
import Worker from "./worker.js";

let buttonA = document.getElementById("buttonA");
let buttonB = document.getElementById("buttonB");

Manager.upperChain(buttonA);
Worker.lowerChain(buttonB);

有什么解决办法吗？

Answer 1

我不确定我是否理解正确，但是当您在 Worker.lowerChain 中调用 getReceipt() 时，您没有传递字符串参数。但是在 getReceipt() 中，您将食物设置为某个字符串。 => 当你点击按钮时食物值变成 undefined;

编辑澄清：

import Worker from "./worker.js";
const Manager = (() => {
   var upperChain = (elem) => {
       elem.addEventListener("click", Interface.sendOrderToWorker);
   };
   const Interface = {
       sendOrderToWorker: async (event) => {
           console.log("Order receives from Manager");
           Worker.getReceipt("Meal"); // Will set food to "Meal" in Worker
       }
   };
   return {
       upperChain: (elem) => upperChain(elem)
   };
})();
export default Manager;

// worker.js
const Worker = (() => {
    let food;
    var lowerChain = (elem) => {
      elem.addEventListener("click", (event) => Interface.getReceipt()); // Since calling getReceipt without arguments will leave 'food' as is because argument 'string' is undefined
    }
    const Interface = {
        getReceipt: async (string) => {
            console.log("Responses in Worker");
            food = string || food; // Here food was ALWAYS set to string..but string wasn't always set
            console.log(food);
        }
    }
    return {
        lowerChain: (elem) => lowerChain(elem),
        getReceipt: (param) => Interface.getReceipt(param)
    }
})();
export default Worker;

// index.js
import Manager from "./manager.js";
import Worker from "./worker.js";

let buttonA = document.getElementById("buttonA");
let buttonB = document.getElementById("buttonB");

Manager.upperChain(buttonA);
Worker.lowerChain(buttonB);

如何在工厂函数之间链接 2 个不同的事件处理程序？

how to chain 2 different event handlers between factory functions?

javascript

import

events

event-handling

factory-pattern