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

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. js使用占位符替换字符串

    js使用占位符替换字符串是一个ES6中的模版字符串语法. 在``中使用 ${} var a = 5; var b = 10; console.log(`Fifteen is ${a + b} and ...

  2. 三种ajax解析模式!

    一.Ajax中的JSON格式 html代码: <html> <body> <input type="button" value="Ajax& ...

  3. JS中的prototype(转载)

    本文转载自博客园. 作者:叶剑锋 出处:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 本文基于下面几个知识点: 1 原型法 ...

  4. javaSE练习13——(知识点:类的继承 方法的覆盖)

    设计2个类,要求如下: (知识点:类的继承 方法的覆盖)1.定义一个汽车类Vehicle, 1.1 属性包括:汽车品牌brand(String类型).颜色color(String类型 )和速度spee ...

  5. ubuntu 14.04 64bit 安装 oracle 11g r2

    参考文章:http://tutorialforlinux.com/2016/03/09/how-to-install-oracle-11g-r2-database-on-ubuntu-14-04-tr ...

  6. WinSock 完成端口模型

    之前写了关于Winsock的重叠IO模型,按理来说重叠IO模型与之前的模型相比,它的socket即是非阻塞的,也是异步的,它基本上性能非常高,但是它主要的缺点在于,即使我们使用历程来处理完成通知,但是 ...

  7. 正则表达式验证问题(用户名、密码、email、身份证

    实现的代码如下: <html> <head> <meta charset="UTF-8"> </head> <body> ...

  8. js添加、修改、删除xml节点例子

    version="1.0" encoding="gb2312"?> . <bookstore> . <book genre=" ...

  9. Automapper 实现自动映射

    出于安全考虑,在后台与前台进行数据传输时,往往不会直接传输实体模型,而是使用Dto(Data transfer object 数据传输对象),这样在后台往前台传递数据时可以省略不必要的信息,只保留必要 ...

  10. 任务五:零基础HTML及CSS编码练习加强版

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...