前端训练营：1v1私教，终身辅导计划，帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~

Hello，大家好，我是 Sunday。

在日常的开发中我们可能会经常遇到各种各样的奇怪 BUG，这些 BUG 很多时候都是因为我们的一些不规范的开发习惯所导致的。

那么如何避免不规范的开发习惯呢？

今天就带大家来看下：前端开发中常见的9个错误开发方式，帮你告别坏习惯！

01：忽略异步 JavaScript：

// ：忽略setTimeout的异步性质
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
console.log("End");

// ：理解和处理异步代码
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");

02：对作用域的错误处理

// ：声明的变量没有正确的作用域
function incorrectScope() {
  for (var i = 0; i < 5; i++) {
    // “i”现在是全局的，而不是循环的局部
  }
  console.log(i); // 输出 5
}

// ：对块作用域变量使用‘let’
function correctScope() {
  for (let i = 0; i < 5; i++) {
    // 'i'是循环块的本地值
  }
  // console.log(i); // Error: 未定义‘i’
}

03：忽略内存泄漏

// ：使用事件侦听器创建内存泄漏
function createMemoryLeak() {
  const element = document.getElementById("myElement");
  element.addEventListener("click", function handleClick() {
    // ...
  });
  // 忘记删除事件侦听器
}

// ：删除事件侦听器以避免内存泄漏
function avoidMemoryLeak() {
  const element = document.getElementById("myElement");
  function handleClick() {
    // ......
  }
  element.addEventListener("click", handleClick);
  // 在不再需要事件侦听器时将其删除
  // element.removeEventListener("click", handleClick);
}

04：没有有效地处理错误

// ：错误处理不当
function fetchData() {
  try {
    // 从API获取数据
    fetch("https://api/data")
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.log(error.message));
  } catch (error) {
    console.log("Error occurred:", error.message); // 这不会捕获获取错误
  }
}

// ：正确处理 HTTP 错误
async function fetchDataCorrect() {
  try {
    const response = await fetch("https://api/data");
    if (!response.ok) {
      throw new Error(`HTTP 错误! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error 处理:", error.message);
  }
}

05：忽略跨浏览器兼容性

// ：假设浏览器不需要兼容性处理
document.getElementById("myElement").remove(); // 某些较旧的浏览器不支持

// ：使用前检查功能支持
const element = document.getElementById("myElement");
if (element && element.remove) {
  element.remove();
} else {
  // 后备或替代方法
  element.parentNode.removeChild(element);
}

06：过度依赖框架

// ：仅仅依赖于一个框架而不了解基础知识
const element = React.createElement("div", null, "Hello, World!");
ReactDOM.render(element, document.getElementById("root"));

// ：理解框架和基本原则
const element = <div>Hello, World!</div>;
ReactDOM.render(element, document.getElementById("root"));

07：未针对性能优化代码

// ：循环使用效率低下
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// ：使用forEach以获得更好的性能
const array = [1, 2, 3, 4, 5];
array.forEach(item => console.log(item));

08：测试不充分

// ：跳过全面测试
function add(a, b) {
  return a - b; // 错误逻辑
}

// ：实现单元测试以捕获错误
function add(a, b) {
  return a + b;
}

09：糟糕的代码文档

// ：没有注释
function calculateTotal(price, quantity) {
  return price * quantity;
}

// ：添加有意义的评论以更好地理解
/**
 * 根据给定的价格和数量计算总成本。
 * @param {number} price - 项目的单价。
 * @param {number} quantity - 物品的数量。
 * @returns {number} 总成本。
 */
function calculateTotal(price, quantity) {
  return price * quantity;
}