帮你精通JavaScript:JS的规范代码风格参考指南

赏心悦目的代码排版风格不仅有助于团队合作,而且能有效提高个人复盘阅读代码的效率。

一、缩进 Indentation

神奇的缩进是他们设计师的最爱,据说最优秀的排版设计师只须会空格就足矣,哈哈。

function make_abs_adder(x) { 
    function the_adder(y) { 
        if (x >= 0) { 
            return x + y; 
        } else { 
            return -x + y; 
        } 
    } 
    return the_adder;
} 

单行过长也用 indentation 分割。

function frac_sum(a, b) { 
    return (a > b) ? 0 
        : 1 / (a * (a + 2)) 
            + 
            frac_sum(a + 4, b);
} 

二、行长 Line Length

按照编程惯例,不要超过80个字符太多。

三、花括号 Curly Braces

花括号的开端应该置于同一行的行尾,重新开一行收尾。

// function declaration
function my_function() {
         
}
// if-else
if () { 
    ... 
} else if () { 
    ... 
} else { 
    ... 
}
// nested-if
if () {
    ... 
    if () {
        ... }
    ...
}

始终都要应用 Curly-Braces,即使在单行里面:

// correct Source
if () { 
    return x + y;
} else { 
    return x * y; 
} 
// incorrect Source 
if () 
    return x + y; 
else
    return x * y; 
// worse 
if () return x + y; 
else return x * y;

四、空格 Whitespace

运算符与运算数之间要留出来一个空格。

// good style
const x = 1 + 1; 
// bad style 
const x=1+1; 
// good style 
return x === 0 ? "zero" : "not zero"; 
// bad style 
return x === 0?"zero":"not zero"; 
Do not leave a space between unary operators and the variable involved. 
// good style 
const negative_x = -x; 
// bad style 
const negative_x = -x; 

五、函数定义表达式 Function Definition Expressions

函数的格式是颇有技术含量的部分,个人的审美不同,常常呈现多种风格,尤其是对多arguments的刻意对齐:

// good style
function count_buttons(garment) { 
    return accumulate((sleaves, total) => sleaves + total, 
        0, 
        map(jacket => 
            is_checkered(jacket) ? count_buttons(jacket) 
            : 1, 
            garment)); 
} 
// good style 
function count_buttons(garment) { 
    return accumulate( 
        (sleaves, total) => 
            delicate_calculation(sleaves + total), 
        0, 
        map(jacket => 
            is_checkered(jacket) 
                ? count_buttons(jacket) 
                : 1, 
            garment)); 
} 
// bad style: too much indentation 
function count_buttons(garment) { 
    return accumulate((sleaves, total) => 
                       delicate_calculation(sleaves + total), 
                       0, 
                       map(jacket =>
                           is_checkered(jacket) 
                           ? count_buttons(jacket) 
                           : 1, 
                           garment)); 
} 
// no newline allowed between parameters and => 
function count_buttons(garment) { 
    return accumulate( 
        (sleaves, total) 
            => delicate_calculation(sleaves + total), 
        0, 
        map(jacket 
            => is_checkered(jacket) 
                    ? count_buttons(jacket) 
                    : 1, 
                garment)); 
} 

六、条件判断表达式 Conditional Expressions

简单的ternary-condition不要罗嗦写成多行:

// good style
const aspect_ratio = landscape ? 4 / 3 : 3 / 4;
// bad style
const aspect_ratio = landscape
      ? 4 / 3
      : 3 / 4;

多行则用indentation,同样地,也不必追求美观而过分对齐。

// good style 
function A(x,y) { 
    return y === 0 ? 0 
        : x === 0 ? 2 * y 
        : y === 1 ? 2 
        : A(x - 1, A(x, y - 1)); 
// bad style: line too long 
function A(x,y) { 
    return y === 0 ? 0 : x === 0 ? 2 * y : y === 1 ? 2 : A(x -1, A(x, y -1)); 
} 
// bad style: too much indentation 
function A(x,y) { 
    return y === 0 
                ? 0
                : x === 0 
                    ? 2 * y 
                    : y === 1 
                        ? 2
                        : A(x -1, A(x, y -1)); 
} 

七、条件语句与函数

此处的惯例简单,在 if 与 开阔号之间留一个空格。

if () { 
    ... 
} else if () { 
    ... 
} else { 
    ... 
}

函数有多个arguments,则在每个之后留出一个空格:

// good style
function my_function(arg1, arg2, arg3) {
    ...
}
// bad style
function my_function (arg1, arg2, arg3) {
    ...
}
// good style
my_function(1, 2, 3);
// bad style
my_function(1,2,3);
// bad style
my_function (1, 2, 3);
There should be no spaces after your opening parenthesis and before your closing parenthesis.
// bad style
function my_function( arg1, arg2, arg3 ) {
    ...
}
// bad style
my_function( 1, 2, 3 );
// bad style
if ( x === 1 ) { 
    ...
}
// good style
function my_function(arg1, arg2, arg3) { 
    ...
}
// good style
my_function(1, 2, 3);
// good style
if (x === 1) { 
    ...
}

提交代码前,务必记得将尾部的trailling-whitespace全部清除掉。

八、命名 Names

命名的风格推荐:

my_variable, x, rcross_bb

函数命名须注意的是,不要在nested-scope中使用相同的命名,常常会误触发shadow。

// bad program 
const x = 1; function f(x) { 
// here, the name x declared using const 
// is "shadowed" the formal parameter x 
    ... 
} 
// another bad program 
function f(x) { 
    return x => ...; 
    // here, the formal parameter x of f is "shadowed" 
    // by the formal parameter of the returned function 
} 
// a third bad program 
function f(x) { 
    const x = 1; 
    // in the following, the formal parameter x of f // is "shadowed" by the const declaration of x. 
    ... 
}

最后祭出一个极端的个例,两个参数取名相同。

// worse than the above 
function f(x, x) { 
    ... 
} 

九、注释 Comments

避免过多的罗嗦注释。

// area of rectangle with sides x and y 
function area(x, y) { 
    return x * y; 
}

下面则是罗嗦的注释:

// square computes the square of the argument x 
function square(x) { 
    return x * x; 
}

单行注释用"//", 多行注释则用”/*...*/".

展开阅读全文

页面更新:2024-03-14

标签:风格   代码   个例   括号   收尾   尾部   表达式   空格   注释   罗嗦   惯例   函数   设计师   条件   简单

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top