在团队中只有每个人的编程风格一致,大家才能方便的互相看懂和维护对方的代码。

1. 层级缩进

对于层级缩进目前有两种主张:
1)使用制表符
这种方法有两种好处,第一,制表符和缩进层级之间是一一对应关系,符合逻辑;第二是文本编辑器可以配置制表符的展现长度。
缺点是系统对制表符的解释不一致。
2)使用空格符
目前主要有三种具体的做法:2个空格表示一个缩进,4个空格表示一个缩进,8个空格表示一个缩进
优点:在所有的系统和编辑器中,文件的展现格式不会有任何差异;
缺点:对于单个开发者来说,使用一个没有配置好的文本编辑器创建格式化的代码的方式非常原始。

2. 语句结尾

JavaScript的语句要么独占一行, 要么以分号结尾。但是有赖于分析器的自动分号插入机制(Automatic Semicolon Insertion,ASI)会在应该有分号而实际没有的地方自动插入分号。
大多数场景不会出错,但是有写场景有可能会出现问题,导致出错:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//原始代码
function data(){
return
{
name : "xiaoming",
age : 18
}
}
//分析器会理解成:
function data(){
return;
{
name : "xiaoming",
age : 18
};
}

所以推荐在每一句代码的结束都加上分号,减少出现问题的几率。

3. 行的长度

建议将每行长度限定在80个字符

4. 换行

当单行字符达到最大值(例如80个字符)的时候要手动拆成两行。
一般规则是 : 在运算符后换行,第二行追加两个缩进

1
2
doSomething ( value1, value2, document, window, 
element );

特例:

特例1 : 在if语句中换行可以保持一个缩进,这样更容易阅读:

1
2
3
4
if ( isLong && isShow && number == 1 && 
children.length > 0 ) {
//do something...
}

特例2 :当给变量赋值时,第二行的位置应该和赋值运算符的位置保持对齐:

1
2
var result = something + anotherThing + yetAnothering + someThingElse + 
anotherSomethingElse;

5. 空行

有时一段代码的语义和另外一段代码不相关,这时就应该使用空行分割,确保有关联的代码展现在一起。
一般规则 :
在每个控制流语句(if,for语句等)之前添加空行;
在方法之前;
在方法中的局部变量和第一条语句之间;
在多行或但行注释之前;
在方法内的逻辑片段之间插入空行,提高可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//不实用空行
if ( wl && wl.length ) {
for ( var i = 0;i < wl.length; i++ ) {
p = wl[i];
type = Y.Lang.type( r[p] );
if ( s.hasOwnProperty(p) ){
if ( merge && type == 'object'){
//do something...
}
}
}
}
//使用空行
if ( wl && wl.length ) { for ( var i = 0;i < wl.length; i++ ) {
p = wl[i];
type = Y.Lang.type( r[p] ); if ( s.hasOwnProperty(p) ){ if ( merge && type == 'object'){
//do something...
}
}
}
}

6. 命名

1
“计算机只存在两个难题:缓存失效和命名。”   --- Phil Karlton

JavaScript语言的核心ECMAScript是遵守驼峰式大小写命名法。

一般命名规则:
命名长度尽可能短,并要抓住重点;
避免没有任何意义的命名;
变量名遵守驼峰大小写命名法,前缀应当是名词;
函数名遵守驼峰大小写命名法,前缀应当是动词;
常量使用大写字母和下划线命名,下划线用以分割单词;
构造函数的命名遵守大驼峰(以大写字母开始)命名法,通常是名词(因为是用来创建某个类型的实例);
字符串可以用双引号也可以使用单引号括起来(上下文要保持同一种风格);

7. null

null的使用场景 :
用来初始化一个变量,这个变量可能赋值为一个对象;
用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象;
当函数的参数期望是对象时,用作参数传入;
当函数的返回值期望是对象时,用作返回值传出;

理解null最好的方式是将它当作对象的占位符

[参考资料]:
编写可维护的JavaScript,Nicholas C. Zakas 著,李晶 郭凯 张散集 译, Copyright 2012 Nicholas Zakas,978-7-115-31008-8

编写可维护的JavaScript之编程风格的更多相关文章

  1. 【读书笔记】读《编写可维护的JavaScript》 - 编程风格(第一部分)

    之前大致翻了一遍这本书,整体感觉很不错,还是不可追求快速,需要细细理解. 这篇随笔主要对本书的第一部分中对自己触动比较大的部分及与平常组织代码最为息息相关的部分做一个记录,加深印象. 主要讲述五点内容 ...

  2. 【读书笔记】读《编写可维护的JavaScript》 - 编程实践(第二部分)

    本书的第二个部分总结了有关编程实践相关的内容,每一个章节都非常不错,捡取了其中5个章节的内容.对大家组织高维护性的代码具有辅导作用. 5个章节如下—— 一.UI层的松耦合 二.避免使用全局变量 三.事 ...

  3. 《编写可维护的JavaScript》之编程实践

    最近读完<编写可维护的JavaScript>,让我受益匪浅,它指明了编码过程中,需要注意的方方面面,在团队协作中特别有用,可维护性是一个非常大的话题,这本书是一个不错的起点. 本书虽短,却 ...

  4. 《编写可维护的javascript》读书笔记(中)——编程实践

    上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. ...

  5. 《编写可维护的javascript》读书笔记(上)

    最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...

  6. 编写可维护的JavaScript 收纳架

    如果你看过Nicolas C.Zakas写过的任何作品,你必须承认他是个不折不扣的天才.也只有天才级的才能写出<JavaScript高级程序设计>让所有的前端攻城师人手一本.Nicolas ...

  7. 拯救一切强迫症 - 读《编写可维护的 JavaScript》(一)

    拯救一切强迫症 - 读<编写可维护的 JavaScript>(一) 本文写于 2020 年 4 月 24 日 我在小学的时候就有接触过编程,所以读大一的时候 C 语言还算是轻车熟路.自然会 ...

  8. 编写可维护的Javascript读书笔记

    写在前面:之前硬着头皮参加了java方面的编程规范培训,收货良多,工作半年有余的时候,总算感觉到一丝丝Coding之美,以及造轮子的乐趣,以至于后面开发新功能的时候,在Coding style方面花了 ...

  9. 《编写可维护的JavaScript》 笔记

    <编写可维护的JavaScript> 笔记 我的github iSAM2016 概述 本书的一开始介绍了大量的编码规范,并且给出了最佳和错误的范例,大部分在网上的编码规范看过,就不在赘述 ...

随机推荐

  1. HDU 1003 最大连续和

    http://www.acmerblog.com/hdu-1003-Max-Sum-1258.html 这里难点只有求起始位置,把握状态变化就行.一般这种子序列问题,都可以用dp简化 #include ...

  2. for计算位置坐标

    代码1效果图: 代码2效果图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  3. Netty-EventLoop

    1. public interface EventLoop extends EventExecutor, EventLoopGroup 2. public interface EventExecuto ...

  4. Learn by pictures on Auto Control Fields

  5. Mysql 服务无法启动解决办法

    1.我使用的是MySQL-5.7.10-winx64 版本,在安装后启动服务时出现 “服务无法启动”错误 2.解决办法为删除安装目录中的data文件,然后打开cmd调到自己的安装目录下输入mysqld ...

  6. CompletionService的poll方法

    1.poll():马上返回完成的任务,若没有,则返回null 2.poll(long timeout, TimeUnit unit): 等待timeout时间,如果大于最短任务完成时间,则获取任务结果 ...

  7. matlab绘图(详细)(全面)

    Matlab绘图 强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数.此外,M ...

  8. js判断一个dom中是否包含另一个dom的方法

    首先,比较原始(蠢)的方法 function isChildOf(child, parent) { if(child && parent) { let parentNode = chi ...

  9. 不要在using语句中调用WCF服务

    如果你调用WCF服务时,像下面的代码这样在using语句中进行调用,需要注意一个问题. using (CnblogsWcfClient client = new CnblogsWcfClient()) ...

  10. ORACLE_ALIAS

    Oracle / PLSQL: ALIASES website:https://www.techonthenet.com/oracle/alias.php This Oracle tutorial e ...