1.命名变量和功能
首先，我们有变量，函数和其他代码结构的命名约定。该指南不仅涉及外观或含义，而且还极大地影响了代码可读性和有效调试。
在JavaScript中，建议使用骆驼案例用于变量和功能（例如，myvariablename）和Pascal案例（例如myclassname）。
// ❌ Poorly named variables:
let a = 'John';
let fn = () => console.log('Hello');
// ✅ Descriptive variable names:
let firstName = 'John';
let sayHello = () => console.log('Hello');
2.使用速记，但要谨慎
虽然速记技术提供了一种更快，更整洁的编写代码的方式，但谨慎谨慎，因为它们可以产生意外的结果。为了避免这种不可预见的结果，必须咨询文档，探索相关的JavaScript代码示例并彻底测试输出。
// ❌ Traditional function declaration:
function square1 (num) {
return num * num
}
// ✅ Using arrow functions (shorthand):
const square2 = num => num * num
// ❌ Very long code:
let x
if (y) {
x = y
} else {
x = 'default'
}
// ✅ A more succinct way to achieve the same result using logical OR:
let x = y || 'default'
3.遵循SOC原则
为了简单性和组织，建议避免使用JavaScript直接应用样式。该原则被称为关注点（SOC），建议利用classList API添加或删除类，同时使用CSS定义样式规则。
通过遵循这种方法，CSS负责样式任务，而JavaScript则重点介绍您应用程序中的其他功能。
重要的是要注意，关注（SOC）的分离概念超出了JavaScript，并作为分离功能并防止不同技术混合的实践。
总而言之，CSS应处理与CSS相关的任务，而JavaScript应避免处理样式问题。
// ❌ Avoid using JavaScript for styling:
let element = document.getElementById('my-element')
element.style.color = 'red'
// ✅ Changing styles by adding/removing classes:
let element = document.getElementById('my-element')
element.classList.add('my-class')
4.了解课堂上缺乏提升
与功能相反，JavaScript中的类不进行吊装，这意味着您必须在调用该类之前声明类。最初，这可能看起来违反直觉，尤其是当您熟悉功能提升时。但是，这是一个基本原则，应在使用JavaScript的课程时理解并遵循。
// ❌ Calling a class before declaration:
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}`)
}
}
// ✅ Calling a class after declaration:
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语句内的另一个环内的for循环，因此在。
因此，代码变得混乱，使了解其功能或找到负责特定任务的特定代码变得具有挑战性。调试此类代码可能是压倒性和困难的，它也可能使遇到的其他程序员感到困惑。此外，这种做法可以传达出不专业的印象。
为了减轻这些问题，至关重要
// ❌ Nesting code blocks too much and not using the return keyword
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.')
}
}
}
// ✅ Using the return keyword instead of the else statement
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.')
}
我一直对写作充满热情，没有什么比向他人提供帮助和灵感更多的快乐。如果您有任何查询或需要任何指导，请随时与我联系。我在这里帮忙！
我的Instagram -@arjuncoder
我的github -@CoderPOOP
我的Twitter -@arjuncodess