如何根据函数的作用来解耦函数，而不是它们在 JavaScript 中的作用？

如何解决如何根据函数的作用来解耦函数，而不是它们在 JavaScript 中的作用？

我有以下代码： https://codesandbox.io/s/dropdown-forked-pojgt?file=/src/index.js

在这个例子中，我目前在 buildOptions 函数中嵌入了这两行：

const allOptions = document.querySelectorAll(".option");
allOptions.forEach((op) => op.addEventListener("click",selectOptions));

现在 selectOptions 将在点击时被激活。但是，由于我对函数式编程感兴趣，有没有办法让我将该逻辑与 buildOptions 函数分离？此外，从代码的角度来看，上面代码和框中的代码是一种组织代码的好方法吗？

编辑： HTML代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="utf-8" />
    <Meta
      name="viewport"
      content="width=device-width,initial-scale=1,shrink-to-fit=no"
    />
  </head>

  <body>
    <div id="root">
      <div class="optionBox">Select an option</div>
    </div>
    <div id="result"></div>
    <hr />
    <div id="details">
      <p>What we're building</p>
      <div style="display: flex; align-items: flex-start;">
        <img src="https://i.imgur.com/AXoKKc5.png" width="122" />
        <img src="https://i.imgur.com/mZwI3g0.png" width="123" />
        <img src="https://i.imgur.com/S1LU4yf.png" width="106" />
      </div>
      <ul>
        <li>A dropdown can have multiple options</li>
        <li>
          You must be able to handle the dropdown changing to a new value and
          display it somewhere
        </li>
        <li>
          you may change public/index.html if you wish to start with specific
          markup
        </li>
      </ul>
    </div>
  </body>
</html>

JS：

import "./index.css";

// Assertions
// #root exists in the DOM as a node you can access


function optionBox(node,options = {}) {
  let curr = 0;
  node.addEventListener("click",buildOptions);
  let optionsWrapped = null;

  //buildOptions
  function buildOptions() {
    optionsWrapped = document.createElement("div");
    optionsWrapped.classList.add("optionsWrapped");
    curr = curr + 1;
    if (curr % 2 === 1) {
      for (let option in options) {
        const optVal = options[option];
        const optionDiv = document.createElement("div");
        optionDiv.classList.add("option");
        optionDiv.textContent = optVal;
        optionsWrapped.appendChild(optionDiv);
      }
      node.appendChild(optionsWrapped);

      const allOptions = document.querySelectorAll(".option");
      allOptions.forEach((op) => op.addEventListener("click",selectOptions));
    } else {
      node.removeChild(node.childNodes[1]);
    }
  }

  function selectOptions(e) {
    const replacednode = document.createElement("div");
    replacednode.textContent = e.target.textContent;
    replacednode.classList.add("replacednode");
    node.replaceWith(replacednode);
  }

  return node;
}

optionBox(document.querySelector(".optionBox"),{
  op1: "option 1",op2: "option 2",op3: "option 3"
});

CSS：

.optionBox {
  border: 1px solid black;
  width: 200px;
  height: 30px;
  margin-bottom: 100px;
}

.optionsWrapped {
  border: 1px solid blue;
  width: 100px;
  height: 80px;
  margin-top: 10px;
}

.replacednode {
  border: 1px solid black;
  width: 100px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

如何根据函数的作用来解耦函数，而不是它们在 JavaScript 中的作用？

如何解决如何根据函数的作用来解耦函数，而不是它们在 JavaScript 中的作用？

相关推荐