余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

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

xiyangw 2022-11-25 11:29 26 浏览 0 评论

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

一、缩进 Indentation

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

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

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(<parameters>) {
        <statements here should be indented> 
}
// if-else
if (<predicate>) { 
    ... 
} else if (<predicate>) { 
    ... 
} else { 
    ... 
}
// nested-if
if (<predicate>) {
    ... 
    if (<some other predicate>) {
        ... }
    ...
}

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

// correct Source
if (<predicate>) { 
    return x + y;
} else { 
    return x * y; 
} 
// incorrect Source 
if (<predicate>) 
    return x + y; 
else
    return x * y; 
// worse 
if (<predicate>) 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 (<predicate>) { 
    ... 
} else if (<predicate>) { 
    ... 
} 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; 
}

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

相关推荐

在工作中经常使用的 5个JavaScript 技巧(电子表格使用技巧大全)

JavaScript高级进阶课程中ES6内容给我们编程带来了很多便利,以前用大量代码实现的功能现在变得非常简洁,总结了工作中经常使用的5个JavaScript技巧,希望对你也有帮助。(1)、找...

JavaScript是一种什么语言?——JS的概念、特点、使用及执行顺序
JavaScript是一种什么语言?——JS的概念、特点、使用及执行顺序

1.JavaScript概念??JavaScript是一种基于原型的面向对象的语言。??同时,因为JavaScript是脚本语言,而脚本语言又是一种解释性的语言...

2023-03-21 19:23 xiyangw

被全球数10万程序员关注收藏!这些JavaScript项目到底强在哪里?
被全球数10万程序员关注收藏!这些JavaScript项目到底强在哪里?

众所周知,JavaScript是当今互联网世界最流行的编程语言之一,也是程序员,特别是前端工程师的必备技能之一。而随着越来越多的程序员使用JavaScript编...

2023-03-21 19:22 xiyangw

java你会正确使用JS吗?JS的十个超级实用性(js的三种使用方式)
java你会正确使用JS吗?JS的十个超级实用性(js的三种使用方式)

导读:你可能刚上手JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript改变了很多,有些特性非常值得一用。这篇文章介绍了一些特性,在我...

2023-03-21 19:22 xiyangw

Web前端:JavaScript的未来——发展趋势和预测
Web前端:JavaScript的未来——发展趋势和预测

  前端的动态开发总是鼓励开发者在编码和整体外观上做出主动的改变。因此,对web项目进行有见地的修改的渴望会引导你挖掘更多关于JavaScript的信息。  J...

2023-03-21 19:22 xiyangw

JavaScript的应用(JavaScript的应用场景)
JavaScript的应用(JavaScript的应用场景)

当前互联网用户多达几十亿。传统网站由包含大量链接的网页组成,这种网站正逐渐被包含高度交互元素的单页应用取代,并呈现出加速的趋势。其中的主要原因在于,用户不再像以...

2023-03-21 19:22 xiyangw

了解基本JavaScript,什么是JavaScript?(javascript怎么开启)
了解基本JavaScript,什么是JavaScript?(javascript怎么开启)

JavaScript是一种非常简单的方法来向您的网站添加各种动态元素。除非你有一些编程经验,JavaScript将是一个相当一个新的概念开始-它是相当不同的...

2023-03-21 19:21 xiyangw

每日一「讲」之 JavaScript(js每天执行一次)
每日一「讲」之 JavaScript(js每天执行一次)

1.1JavaScript简介让我们看看JavaScript有什么特别之处,我们可以用它实现什么,以及哪些其他技术可以很好地使用它。什么是JavaScript...

2023-03-21 19:21 xiyangw

Javascript 中三个点的三种用法(js 3个点)

如果你阅读或查看现在的Javascript程序时,大概率会发现省略号出现在很多的地方,这个省略号(…)是在ES6中引入的一个功能,它看起来很简单很不起眼是不?但是它在JavaScript中,非...

好程序员web前端分享JavaScript到底是什么?特点有哪些?
好程序员web前端分享JavaScript到底是什么?特点有哪些?

  好程序员web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容。今天特意为大家分享了这篇关于JavaScript的文...

2023-03-21 19:20 xiyangw

Python 与 JavaScript:主要区别、性能比较和应用领域
Python 与 JavaScript:主要区别、性能比较和应用领域

现代Web应用程序的复杂性远不止创建具有无数元素的引人注目的用户界面。为了实现无延迟的体验和轻松的可扩展性,对架构设计给予应有的关注非常重要,这可能非常具有...

2023-03-21 19:20 xiyangw

JavaScript 也可以搞定嵌入式开发? | 硬创公开课
JavaScript 也可以搞定嵌入式开发? | 硬创公开课

嘉宾介绍:郑晔,RuffCTO,OracleDuke选择奖获奖作品Moco的作者,目前投身于IoT领域,致力于简化IoT应用的开发方式。他多次在各种...

2023-03-21 19:20 xiyangw

我们为什么要关注 JavaScript ?(我们为什么要关注印度的发展)

本文主要介绍我们之所以要关注JavaScript的原因。首先,我认为JavaScript能够得到普及的主要原因之一是,JavaScript非常易于接近。学习JavaScript,对于初学者而言,相对比...

您可能未使用过的JavaScript功能(javascript功能)
您可能未使用过的JavaScript功能(javascript功能)

>PhotobyJasonHafsoonUnsplashJavaScript具有许多经常使用的功能。但是,有些功能可能我们大多数人都没有使...

2023-03-21 19:19 xiyangw

这13个好用的JavaScript特性,估计你都没用过
这13个好用的JavaScript特性,估计你都没用过

一、逗号运算符,是用于分隔表达式并返回链中最后一个表达式的运算符。let oo = (1, 2, 3)co...

2023-03-21 19:19 xiyangw

取消回复欢迎 发表评论: