前端开发规范

一个良好的开发规范能够给代码一个更好的可读性、复用性、拓展性。

一、JavaScript 命名规范

• 变量使用有意义且常用的单词，尽量简短

// Bad:
const yyyymmdstr = moment().format('YYYY/MM/DD');
// Good:
const currentDate = moment().format('YYYY/MM/DD');

• 每个常量需要大写，同时有意义

// Bad: 其他人知道 86400000 的意思吗？
setTimeout( blastOff, 86400000 );
// Good:
const MILLISECOND_IN_A_DAY = 86400000;
setTimeout( blastOff, MILLISECOND_IN_A_DAY );

• 对象属性避免无意义命名

// Bad:
const car = {
    carMake: 'Honda',
    carModel: 'Accord',
    carColor: 'Blue'
};
// Good:
const car = {
    make: 'Honda',
    model: 'Accord',
    color: 'Blue'
};

• 函数名需要体现其作用（建议和一个函数仅处理一件事规则相匹配，这样函数的表达才更加具体）

// Bad:
function emailClients( clients ) {
    clients.forEach( client => {
        const clientRecord = database.lookup( client );
        if ( clientRecord.isActive() ) {
            email( client );
        }
    });
}
// Good: 
function emailActiveClients( clients ) {
    clients
        .filter( isActiveClient )
        .forEach( email );
}
function isActiveClient( client ) {
    const clientRecord = database.lookup( client );    
    return clientRecord.isActive();
}

二、JavaScript 开发规范

• 一个方法只做一件事。（这是一条在软件工程领域流传久远的规则，遵循这条规则能让你的代码可读性更好，也便于后续重构）
• 函数参数使用默认值（可以和解构参数相配合）

// bad:
function createPerson (name) {
    name = name || 'Jack';
    // todo
}
// good:
function createPerson (name = 'Jack') {
    // todo
}

• 函数参数最好2个或更少（如果参数超过两个，建议使用ES6的解构语法）

// bad:
function test (name, sex, desc) {
    // todo
}
// good:
function test ({name, sex, desc}) {
    // todo
}

• 避免使用全局方法（如需使用请添加一个命名空间）
• 删除重复代码，合并相似函数 （方便后期维护，但是不建议盲目合并）
• 删除弃用代码 （项目迭代过程中，如果功能变更导致的弃用代码，请删除，不要只是注释！！！）
• 尽可能地支持链式调用（能使得代码简洁优雅）
• 不要过度优化 (现代浏览器已经在底层做了很多优化，过去的很多优化方案都是无效的，会浪费你的时间。)

// Bad:
// 现代浏览器已对此( 缓存 list.length )做了优化。
for (let i = 0, len = list.length; i < len; i++) {
  // ...
}
// Good:
for (let i = 0; i < list.length; i++) {
  // ...
}

• 使用 Promise 或 Async/Await 代替回调

推荐阅读

• [译] 如何写出漂亮的 JavaScript 代码