## 编风格程
作为前端开发人员,我相信每一个人都或多或少的用到原生的JavaScript,也正是因为用的人多,导致编码风格也是多种多样的,而不规范的编码风格,不仅会导致一些奇怪的问题出现,而且不利于后期维护和提高执行效率。
基于本人也在开发中因为规范而出现各种问题,我特意的整理了一下JavaScript编码规范(并不强制,只是推荐)。
**1、变量**
声明变量必须加上`var`关键字,而且每个`var`只声明一个变量,增加可读写。
推荐:
```
var name = 'TG';
var sex = 'man';
```
不推荐:
```
var name = 'TG', sex = 'man';
```
**2、常量**
常量的命名方式:用大写字符,并用下划线分隔。尽量不要使用const关键词。
```
var MY_NAME = 'TG';
```
原因:IE并不支持const
**3、行尾分号**
总是使用分号,对于可用可不用的行尾分号,使用分号。
**4、嵌套函数**
可以使用,可以减少重复代码,隐藏帮助函数等好处
**5、块内函数声明**
不要在块内声明一个函数
不推荐:
```
if(a){
function foo(){}
}
```
推荐:
```
if(a){
var foo = function(){}
}
```
**6、异常处理**
可以使用
```
try{}catch(e){}
throw exception
```
**7、eval()**
```
只用于解析序列化串
```
原因:eval()会让程序执行的比较混乱。
**8、with(){}**
尽量少用。
**9、缩进**
用4个空格作为一缩进,而不是使用tab
原因:因为在不同浏览器上,tab的长度不一。
**10、字符串过长截取**
每行代码不超过80个字符。如代码过长,可使用+运算符拼接。
原因:过长会导致需要拖动横向滚动条才看得到后面的代码,降低开发效率,而且在复制黏贴时有可能错漏。
**11、大括号**
区块起首的大括号,不要另起一行
推荐:
```
if (true) {
}
```
不推荐:
```
if (true)
{
}
```
**12、构造函数**
对于构造函数,命名采用首字母大写,其他函数一律小写。
原因:可读性,区分构造函数和普通函数
**13、注释**
合理的加上注释,有利于后期维护,提高可读性。
**14、{}和[]**
使用{}代替new Object(),使用[]代替new Array()
**15、单引号(')**
尽量使用单引号('),只在JSON文件中使用双引号。
**16、变量和函数声明**
变量名和函数名在JavaScript机制下会发生声明提升(也就是会提前到顶部声明),所以建议变量和函数应该在使用前声明。
**17、使用===和!==代替==和!=**
在JavaScript中,比较运算符进行计算时会进行强制转换,==和!=会产生一些意想不到的结果,所以应该用“严格相等”===。
**18、换行**
在语句块和下一个语句之间留一个空行,提高可读性。
**19、命名**
构造函数或类名使用驼峰式命名
**20、嵌入规则**
JavaScript程序应该尽量放在.js的文件中。
**21、命名规则**
JavaScript 中的标识符的命名规则:
以字母、下划线'_'或美元符号'$'开头
允许名称中包含字母,数字,下划线'_'和美元符号'$'
区分大小写
变量、属性和函数名应该用驼峰式:
```
var isLogin = false;
```
私有函数用下划线开头:
```
function getFirstName(){
function _getName(){}
}
```
构造函数和类名应该首字母大写。
对象中私有变量和函数以下划线开头。
**22、语句**
对于复合语句,if, for, while, do, switch, try … catch 等代码体,函数定义的函数体,对象的定义等都需要放在花括号'{}'里面。
'{' 应在行末,标志代码块的开始。
'}' 应在一行开头,标志代码块的结束,同时需要和'{'所在行的开始对齐,以表明一个完整的复合语句段。这样可以极大地提高代码的可阅读性,控制逻辑能清晰地表现出来。
被包含的代码段应该再缩进 4 个空格。
即使被包含的代码段只有一句,也应该用花括号'{}'包含。尽管不用花括号代码也不会错,但如若需要增加语句的话,则较容易因花括号遗漏而引起的编译错误或逻辑错误。
return语句在使用时也需注意,如果用表达式的执行作为返回值,应该把表达式和 return 放在同一行中,以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式,则返回 undefined。构造器的默认返回值为 this。
return a + b;
**23、方法链(调用链)**
如果使用方法链,应该每行只调用一个方法:
Animal
.getName()
.getFirstName()
**24、使用三元运算符**
三元运算符不应该用在一行,应该分割成多行替代。
推荐:
```
var foo = (a === b)
? 1
: 2;
```
不推荐:
```
var foo = (a === b) ?1 : 2;
```
**25、逗号**
对于数组和对象不要使用多余的“,”
不推荐:
```
var arr = [1,2,]
var person = {
name: 'TG'
};
```
原因:IE不兼容
**26、for-in**
对于数组,尽量避免使用for-in
- 前言
- JavaScript简介
- 基本概念
- 语法
- 数据类型
- 运算符
- 表达式
- 语句
- 对象
- 数组
- 函数
- 引用类型(对象)
- Object对象
- Array对象
- Date对象
- RegExp对象
- 基本包装类型(Boolean、Number、String)
- 单体内置对象(Global、Math)
- console对象
- DOM
- DOM-属性和CSS
- BOM
- Event 事件
- 正则表达式
- JSON
- AJAX
- 表单和富文本编辑器
- 表单
- 富文本编辑器
- canvas
- 离线应用
- 客户端存储(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 检测设备方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向对象的程序设计
- 概述
- this关键字
- 原型链
- 作用域
- 常用API合集
- SVG
- 错误处理机制
- JavaScript开发技巧合集
- 编程风格
- 垃圾回收机制