代码混乱和返回false，该如何优化你的JS代码？

javascript

2024-03-04 21:37:16

JS代码优化：解决混乱的代码和返回false的问题

引言

在代码开发过程中，代码清晰和高效至关重要。然而，在处理混乱的代码和返回false的代码时，可能会遇到问题。本文将深入探讨如何识别和解决这些问题，同时提供循序渐进的指南，帮助你优化代码，提高可读性和性能。

问题分析

代码重复

重复的代码不仅难以维护，而且增加了出错的可能性。在本文的示例中，shield(), gun(), trident()三个函数的逻辑重复，导致代码难以扩展。

错误的函数调用

直接调用未定义的函数会引发错误。在示例中，shield()函数未定义，导致代码无法执行。

错误的条件判断

条件判断应准确反映代码的预期行为。在示例中，if (coins >= 50)条件导致即使硬币足够时也显示错误消息。

返回false的误用

不当使用return false会阻止进一步的代码执行。在示例中，return false语句过早终止了代码，导致else代码块无法执行。

解决方法

创建匿名函数

将重复的函数定义为匿名函数可以简化代码并减少重复。

使用正确的条件判断

将条件判断更改为if (coins < 50)以准确检查硬币是否足够。

合理放置return false

将return false移到条件判断块的末尾，以确保满足条件时执行else代码块。

优化后的代码

function buyW() {
  update(scenes[2]);
  textbox2.style.display = "block";
  textbox2.innerHTML = scenes[2].text2;
  if (coins < 50) {
    alert("Not enough coins!");
  } else {
    button1.addEventListener(
      "click",
      function () {
        alert("Shield bought!");
        coins -= 50;
        coinsNum.innerHTML = coins;
        inv.push(weapons[0]);
        currentWeapon = "";
        inv.forEach((item, index) => {
          currentWeapon += `${index + 1}. ${item.name}<br>`;
        });
        textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`;
      }
    );
  }
  if (coins < 100) {
    alert("Not enough coins!");
  } else {
    button2.addEventListener(
      "click",
      function () {
        alert("Gun bought!");
        coins -= 100;
        coinsNum.innerHTML = coins;
        inv.push(weapons[1]);
        currentWeapon = "";
        inv.forEach((item, index) => {
          currentWeapon += `${index + 1}. ${item.name}<br>`;
        });
        textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`;
      }
    );
  }
  if (coins < 200) {
    alert("Not enough coins!");
  } else {
    button3.addEventListener(
      "click",
      function () {
        alert("Trident bought!");
        coins -= 200;
        coinsNum.innerHTML = coins;
        inv.push(weapons[2]);
        currentWeapon = "";
        inv.forEach((item, index) => {
          currentWeapon += `${index + 1}. ${item.name}<br>`;
        });
        textbox.innerHTML = `Spiderman currently has :<br> ${currentWeapon} Which weapon should he buy?`;
      }
    );
  }
  return false;
}