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

标签： javascriptoopfunctional-programmingdecoupling

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

问题描述

解决方案

推荐阅读