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

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

简单的东西是可以理解的。复合材料由大量相互交互的简单材料组成，因此可以理解。

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

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

你现在担心未来，但这对你没有帮助。当您担心未来时，您将无法获得最初成功的满足感，并且您也不会开始进行下一个练习/任务。