五个JavaScript代码优化优秀实践-51CTO.COM

1.规范变量和函数的命名

首先，应该制定变量、函数和其他代码结构的命名约定。这不仅与代码可读性有关，而且还极大地影响代码的调试效率。

建议对变量和函数使用驼峰大小写（例如，myVariableName）和类的Pascal大小写（例如，MyClassName）。


// ❌ 随意的变量名:
let a = 'John';
let fn = () => console.log('Hello');

// ✅ 驼峰变量名:
let firstName = 'John';
let sayHello = () => console.log('Hello');

2.使用速记技术注意事项

虽然速记技术使我们编写代码更快、更整洁，但一定要注意正确使用，因为它们更简短，更需要开发者清晰理解逻辑，否则可能会产生意想不到的结果。为了避免这种不可预见的结果，有必要查阅文档，研究相关的JavaScript代码示例，并进行完整测试。

// ❌ 传统的函数定义:
function square1 (num) {
  return num * num
}
// ✅ 使用速记技术:
const square2 = num => num * num

// ❌ 大代码段:
let x

if (y) {
  x = y
} else {
  x = 'default'
}

// ✅ 更简洁的代码:
let x = y || 'default'

3.遵循SoC原则

为了代码的简洁，建议避免使用style直接修改样式。这个原则被称为关注点分离（SoC），建议使用classList API添加或删除类，同时使用CSS定义样式规则。

通过遵循这种方法，CSS负责样式化任务，而JavaScript专注于处理应用程序中的其他功能。SoC的概念其实已经扩展到JavaScript之外的场合，并被作为一种最佳实践来隔离功能，防止不同技术之间的混合使用。

在javascript处理CSS相关的任务时，应该避免Style直接修改样式模式。

// ❌ 避免操作styling:
let element = document.getElementById('my-element')
element.style.color = 'red'

// ✅ 使用classList操作样式:
let element = document.getElementById('my-element')
element.classList.add('my-class')

4.理解类的提升

在JavaScript中，如果类提升使用就需要在调用类之前声明它。这一点与函数不一样。在使用JavaScript中的类时，应该理解并遵循这一基本原则。

// ❌ 错误：定义类之前就调用类:
const hat = new Hat('Red', 1000)
hat.show()
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

// ✅ 正确：在定义之后调用类:
class Hat {
  constructor (color, price) {
    this.color = color
    this.price = price
  }
  show () {
    console.log(`This ${this.color} hat costs $${this.price}`)
  }
}

const hat = new Hat('Red', 1000)

5.避免代码中的过度嵌套

过度嵌套代码既不专业又导致代码非常混乱。例如在try-catch块中进行if-else语句，if-else语句中又嵌套一个for循环，等等。结果，代码变得混乱，使得理解或错误定位变得十分困难。调试这样的代码犹如小猫解毛线。为避免过多的嵌套，实现更干净、更有组织的代码结构至关重要。


// ❌ 过度嵌套
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
  } else {
    if (num < 0) {
      console.log('Number is negative.')
    } else {
      console.log('Number is zero.')
    }
  }
}

// ✅ 使用return 替代else
function checkNumber (num) {
  if (num > 0) {
    console.log('Number is positive.')
    return
  }

  if (num < 0) {
    console.log('Number is negative.')
    return
  }

  console.log('Number is zero.')
}