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

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

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

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

一、缩进 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(<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; 
}

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

相关推荐

排序算法--归并排序_归并排序例题讲解

原理如图所示(先分割再合并):归并排序代码工作原理:1、申请空间,使其大小为两个已经排序序列之和,该空间用来存放合并后的序列2、设定两个指针,最初位置分别为两个已经排序序列的起始位置3、比较两个指针所...

八大排序算法-归并排序_归并排序 算法

算法思想归并排序分为三个步骤:1.分解:将数列分解成n个子数列。(如果是将数列分成2个子数列则为2路归并)2.治理:对每个子数列进行排序操作3.合并:将两个排好序的子数列进行合并生成新的数列算法实现P...

高级排序之归并排序、希尔排序_希尔排序和归并排序区别

前言继上次排序算法简单排序算法之冒泡、插入和选择排序-Java实现版后,本文学习高级排序算法——归并排序、希尔排序,快速排序将在后续更新。本文实现代码调用方法,部分来自前一个文章:简单排序算法之冒泡、...

Excel办公应用:按合并单元格排序的三大方法

1.按姓名对科目排序重点:在"C2"中输入公式=IF(A2<>"",1,C1+1),然后下拉填充。2.按姓名添加连续序号(方法一)重点:选择"A2:A11"单元格区域,在编辑栏中输入公...

快速排序 Vs. 归并排序 Vs. 堆排序——谁才是最强的排序算法

知乎上有一个问题是这样的:堆排序是渐进最优的比较排序算法,达到了O(nlgn)这一下界,而快排有一定的可能性会产生最坏划分,时间复杂度可能为O(n^2),那为什么快排在实际使用中通常优于堆排序?昨天刚...

归并排序思路图解 #归并排序_归并排序百度百科

排序算法1.图解。OK,让它排一下。看好了,要开始排了。能看出来像递归吗?肯定算法难,但是这个次数非常的多,不用管次数。这个是帝规,就是递归。这是并,这是并,这是两个有序数,组合成一个最后的大的有序数...

排序算法学习——归并排序_归并排序算法稳定吗

我们先看归并排序的定义归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列;即先使每...

动画|经典的归并排序究竟怎么玩儿?

作者|菠了个菜责编|郭芮由于LeetCode上的算法题很多涉及到一些基础的数据结构,为了更好的理解后续更新的一些复杂题目的动画,推出一个新系列——《图解数据结构》,主要使用动画来描述常见的数据...

Excel中,多列数据统一排名,Rank函数直接搞定

Rank实现多列联合排序排序,那太简单啦,Excel中,升序降序,一个按键就可以。但,那是针对单列情况,若需要联合多列数据进行排序呢?如下图所示,需要对1、3、5列进行统一排序,咋弄嘞?联合排序案例先...

【数据结构与算法】归并排序_数据结构中归并排序

归并排序是建立在归并操作的一种高效的排序方法,该方法采用了分治的思想,比较适用于处理较大规模的数据,但比较耗内存,今天我们聊聊归并排序排序思想一天,小一尘和慧能坐在石头上,眺望着远方师傅,我听山下的柳...

C++基础算法:归并排序_经典排序算法-----归并排序(c语言实现)

归并排序(MergeSort)是建立在归并操作上的一种有效,稳定的排序算法,该算法是采用分治法(DivideandConquer)的一个非常典型的应用。将已有序的子序列合并,得到完全有序的序列。...

马士兵说之归并排序_马士兵教育的内推是真的

大家对于排序应该是挺熟悉的吧,马士兵老师特意为排序出了一波视频,当然文章是转自博客园的,马士兵老师的视频观看请点击下方的了解更多概要本章介绍排序算法中的归并排序。内容包括:1.归并排序介绍2.归并...

C++快速排序和归并排序_c++快速排序sort

快速排序每一轮挑选一个基准元素(随机选择,编程时一般选取第一个),并让比它大或小的元素移动到基准元素的两边,把数列拆解成了两个部分。而后对这两部分分别进行快速排序。时间复杂度:O(nlogn),辅助空...

经典的排序算法——归并排序_归并排序算法步骤

归并排序(MergeSort)是一种基于分治策略的高效排序算法。它将原始数组不断地分割成两个子数组,直到每个子数组只剩下一个元素为止(即基本有序),然后再通过合并已排序的子数组来最终得到完全有序的大...

归并排序_归并排序c++实现

归并排序概念:归并排序中涉及到一个概念就是分而治之,总序列化成小序列,将小序列排序好,利用排序好的小序列,再归并排序成原来要排序的序列。所以排序前先要分:functiondivide(arr){...

取消回复欢迎 发表评论: