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

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

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

Answer 1

简单的东西是可以理解的。复合材料由大量相互交互的简单材料组成，因此可以理解。由于您的解决方案在测试后有效，因此可以安全地假设它是正确的或接近正确的。如果您创建了一个真正的网站，那么从长远来看，您会发现您的计划是否存在错误，并且您将始终有机会返回到您创建的内容并对其进行改进。即使是我们这些经验丰富的程序员偶尔也会扔掉我们的一些代码，甚至是最近的代码。专业精神的标志是不要担心未来可能带来的未知数，有信心能够应对它，并且对完全删除可能已经编写的旧代码没有任何感觉。你现在担心未来，但这对你没有帮助。当您担心未来时，您将无法获得最初成功的满足感，并且您也不会开始进行下一个练习/任务。