javascript - 与我使用的模型相比，我的解决方案在技术上是否合理？

Question

晚上好，初学者。

我正在尝试根据一本书的练习制作一个标签列表，这是练习:https://eloquentjavascript.net/15_event.html#i_Kk1WKx2anJ 我想我已经有了一个解决方案，但是，这本书给出的解决方案使用的方法与我的不同，而且因为我真的不太了解 Web 开发，所以我真的不知道哪个是“更好”的感觉作者的解决方案可能比我的更安全，或者我的解决方案可能适用于书中给出的特定示例，但在制作网页时可能不可行。

我的解决方案:

<tab-panel>
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</tab-panel>
<script>
  function asTabs(node) {
    let childNodes = Array.from(node.childNodes),
        paragraph = document.createElement("p"),
        elementNodes = childNodes.filter(node => node.nodeType == Node.ELEMENT_NODE);

    for(let element of elementNodes){
      let button = document.createElement("button");
      element.style.display = "none";
      button.textContent = element.getAttribute("data-tabname");

      button.addEventListener("focus", event =>{
        event.target.style.color = "red";
        element.style.display = "inline";
      });

      button.addEventListener("blur", event =>{
        event.target.style.color = "";
        element.style.display = "none";
      });

      paragraph.appendChild(button);
    }
    node.parentNode.replaceChild(paragraph, node);
    document.body.appendChild(node);
  }
  asTabs(document.querySelector("tab-panel"));
</script>

作者的解决方案:

<tab-panel>
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</tab-panel>
<script>
  function asTabs(node) {
    let tabs = Array.from(node.children).map(node => {
      let button = document.createElement("button");
      button.textContent = node.getAttribute("data-tabname");
      let tab = {node, button};
      button.addEventListener("click", () => selectTab(tab));
      return tab;
    });

    let tabList = document.createElement("div");
    for (let {button} of tabs) tabList.appendChild(button);
    node.insertBefore(tabList, node.firstChild);

    function selectTab(selectedTab) {
      for (let tab of tabs) {
        let selected = tab == selectedTab;
        tab.node.style.display = selected ? "" : "none";
        tab.button.style.color = selected ? "red" : "";
      }
    }
    selectTab(tabs[0]);
  }

  asTabs(document.querySelector("tab-panel"));
</script>

两种解决方案的工作原理几乎相同，区别在于作者的按钮在单击时起作用，而我的按钮在聚焦或模糊时起作用。我担心我的可能只适用于那个特定的例子，而不是更大的东西。

Answer 1

简单的东西是可以理解的。复合 Material 由大量相互作用的简单 Material 组成，因此是可以理解的。

由于您的解决方案在测试后有效，因此可以安全地假设它是正确的或接近正确的。如果您创建了一个真实的网站，那么从长远来看，您会发现您的计划是否存在错误，并且您将始终有机会回到您创建的内容并对其进行改进。

即使是我们，经验丰富的程序员偶尔也会丢弃我们的一些代码，甚至是最近的代码。专业精神的标志是不担心 future 可能带来的未知数，有信心自己能够应对它，并且对完全删除自己可能编写的旧代码没有任何感觉。

你现在担心 future ，但这对你没有帮助。当您担心 future 时，您失去了对最初成功的满足感，并且您也没有开始进行下一个练习/任务。