15个简单的JS编码标准让你的代码更整洁(小结)

本文为大家整理了15个简单的javascript编码标准，帮助开发人员写出更加干净整洁的代码，提高可维护性和可读性。

1. 使用=== 比较运算符

使用=== 比较运算符可以避免类型不同比较混淆和类型自动转换的问题。

2. 使用const 或 let, 不使用 var

使用 const 或 let 比 var 带来的好处是更好的作用域控制和避免变量提升的问题。

示例：

// 不好的写法：
var a = 1,
    b = 2,
    c = 3;

//好的写法：
const a = 1;
const b = 2;
const c = 3;

3. 不要使用全局变量

尽可能避免在全局作用域中定义变量，可以使用闭包或模块模式来避免产生“命名冲突”的问题。

4. 单行代码最大长度不要超过80个字符

字符长度不超过80个字符，可以提高代码清晰度，避免出现水平滚动条。

5. 避免使用eval函数

eval 函数会执行任意传入的字符串，不安全且开销较大，可以使用其他函数代替。

6. 使用箭头函数

箭头函数不仅减少了代码量，简化了函数定义和调用，还可以避免this作用域问题。

示例：

//不好的写法：
function func() {
    return this.name;
}

//好的写法：
const func = () => this.name;

7. 使用缩减方法

使用缩减方法可以使代码更加简洁，例如数组的map()、filter()、reduce()等高阶函数。

示例：

// 不好的写法：
const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

//好的写法：
const arr = [1, 2, 3];
arr.forEach(item => console.log(item));

8. 使用模板字面量

使用模板字面量可以更方便的拼接字符串，增强可读性

示例：

// 不好的写法：
const error = 'Error: ' + err.message;

//好的写法：
const error = `Error: ${err.message}`;

9. 尽量不要使用递归

使用递归调用会导致大量堆栈空间的消耗，可以尝试迭代算法等代替递归。

10. 使用默认参数

默认参数可以使函数更加简洁。在es6中，使用默认参数非常容易。

示例：

// 不好的写法：
function add(a, b) {
    b = b || 0;
    return a + b;
}

//好的写法：
const add = (a, b = 0) => a + b;

11. 使用对象解构

对象解构可以使赋值更加简洁清晰。可以使用在参数传递和变量声明中。

示例：

//不好的写法：
const obj = {
    name: 'Tom',
    age: 18,
    gender: 'male'
}
const name = obj.name;
const age = obj.age;

//好的写法：
const {name, age} = {
    name: 'Tom',
    age: 18,
    gender: 'male'
}

12. 将事件委托到父元素上

将事件委托到父元素上可以减少事件处理器的数量，避免事件处理器与DOM节点数量成正比。

示例：

// 不好的写法：
const btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
        console.log('clicked');
    });
}

//好的写法：
const parentEle = document.getElementById('parent');
parentEle.addEventListener('click', function(e) {
    if (e.target.tagName === 'BUTTON') {
        console.log('clicked');
    }
});

13. 使用面向对象编程和模块化

面向对象编程可以使代码更加易于维护和扩展，模块化可以避免代码之间的耦合性。

14. 使用Promise处理异步逻辑

Promise 可以使异步调用更加优雅，处理异步逻辑更加简单明了。

示例：

// 不好的写法：
$.ajax({
    url: '/api/user',
    success: function(res) {
        console.log(res);
    },
    error: function(err) {
        console.error(err);
    }
});

//好的写法：
fetch('/api/user')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));