首先,应该制定变量、函数和其他代码结构的命名约定。这不仅与代码可读性有关,而且还极大地影响代码的调试效率。
建议对变量和函数使用驼峰大小写(例如,myVariableName)和类的Pascal大小写(例如,MyClassName)。
// ❌ 随意的变量名:
let a = 'John';
let fn = () => console.log('Hello');
// ✅ 驼峰变量名:
let firstName = 'John';
let sayHello = () => console.log('Hello');
虽然速记技术使我们编写代码更快、更整洁,但一定要注意正确使用,因为它们更简短,更需要开发者清晰理解逻辑,否则可能会产生意想不到的结果。为了避免这种不可预见的结果,有必要查阅文档,研究相关的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'
为了代码的简洁,建议避免使用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')
在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)
过度嵌套代码既不专业又导致代码非常混乱。例如在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.')
}