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

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. C# 调用者信息获取

    做日志组件时,常常会记录调用者信息,通常都是通过反射来获取相应信息.不过.Net 4.5引入了三个新的特性,即CallerFilePathAttribute,CallerLineNumberAttri ...

  2. Spring MVC+Fastjson之时间类型序列化

    时间类型序列化: 注意红色代码,必须引入fastjson的JSONField类,而非其它. import com.alibaba.fastjson.annotation.JSONField; @Ent ...

  3. C#+ObjectArx CAD二次开发(2)

    前面开了一个头,这里添加几个功能的实现, //添加图层 private void LoadLayer() { Document acDoc = Application.DocumentManager. ...

  4. 面向对象三大特性——封装(含property)

    一.封装概念 封装是面向对象的特征之一,是对象和类概念的主要特性. 封装就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 二.隐藏属性 在p ...

  5. scss-变量分隔符

    scss的变量名可以与css中的属性名和选择器名称相同,包括中划线和下划线. 在使用中划线还是下划线来进行变量分隔完全根据个人喜好. scss完全兼容这两种写法,也就是说scss认为中划线和下划线是完 ...

  6. 【Android】4.0 神一样的仪式感:Android第一个项目HelloWorld——eclipse

    进入Eclipse,在左侧栏右击: 新建 “Android Application Project”项目,如果new之后没有,选择“Project”中“Android”目录下的 “Android Ap ...

  7. 【2015 Week Task】

    2015 第17周 task:项目语音识别技术整理 2015 第18周 task:项目key技术整理

  8. centos7部署ethereum私有链

    https://github.com/ethereum/go-ethereum/wiki http://book.8btc.com/books/6/ethereum/_book/public-chai ...

  9. OFFICE_EXCEL_Combine text from two or more cells into one cell.

    Excel   Enter and format data   Layout   Combine text from two or more cells into one cell Combine t ...

  10. JS入口函数和JQuery入口函数

    首先,讲一下它们的区别: (1)JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. (2)JQuery入口函数是在所有标签加载完之后,就会去执行. ...