JavaScript编码规范

无规矩不成方圆，写JavaScript也有JavaScript的规范，以前自己写代码都是那种随心所欲的状态，然后过了几天之后再来看，发现已经不认识自己写的代码了，这真是一种有种淡淡的忧伤，所以，规范这种东西是非常有必要的。

 

当然，这里主要是参考百度FEX对与JavaScript编程规范，我在这里抽取其中自己需要注意的点，点击查看原网站

 

一.关于空格

1.二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格

 

2.用作代码块起始的左花括号 { 前必须有一个空格

function (condition) {
}

3.if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格;

4.在对象创建时，属性中的 : 之后必须要有空格， : 之前不应该有空格

var obj= {
    a: 1,
    b: 2,
    c: 3
};

5.函数声明，具名函数表达式，函数调用中，函数名和 ( 之间不允许有空格

function funcName() {
}

6.',' 和 ';' 之前不应该有空格;

7.单行声明的数组与对象,如果包含元素, '{}'和 '[]'内紧贴括号的部分不允许包含空格;

var arr1 = [];
var arr2 = [1, 2, 3];
var obj1 = {};
var obj2 = {name: 'obj'}

8.行尾不得有多余的空格;

 二.关于换行

1.每个独立语句结束后必须换行

2.每行不得超过120个字符

超长的不可分割的代码 允许例外，比如复杂的 正则表达式。长字符串不在列外之列

3.运算符处换行时，运算符必须在新行的行首

if (user.isAuthenticate()
    && user.isInRole('admin')
    && user.hasAuthority('add-admin')
    || user.hasAuthority('delete-admin')
) {
    // code
}

4.在函数声明，函数表达式，函数调用，对象创建，for语句等场景中，不允许在','或';'前换行;

var obj = {
    a: 1,
    b: 2,
    c: 3
}
foo(
    aVeryVeryLongArgument,
    anotherVeryLongArgument,
    callback
);

 

5.不同行为或逻辑的语句集合，使用空行隔开，更易阅读

function setStyle(element, property, value) {
    if (element == null) {
        return;
    }

    element.style[property] = value;
}

 

6.对于if...else,try...catch...finally等语句，在}号后添加一个换行的风格

if (condition) {
    //some statements
}
else {
    //some statements
}

try () {
    //some statements
}
catch (ex) {
    //some statements
}

 

三.关于语句

 

1.不得省略语句结束分号;

2.在'if / else / for / do / while'语句中，即使只有一行，也不得省略块{...}

3.函数定义结束不允许添加分号

4.IIFE('Immediately-Invoked Function Expression') 必须在函数表达式外添加'(',非IIFE不得在函数表达式外添加

　　额外的 ( 能够让代码在阅读的一开始就能判断函数是否立即被调用，进而明白接下来代码的用途。而不是一直拖到底部才恍然大悟。

var task = (function () {
    // code
    return result;
})();

 

四.关于命名

 

1.变量使用Camel命名法

var loadingModules = {};

 

 

2.常量使用全部字母大写，单词间下划线分隔的命名方式

var HTML_ENTINY = {};

 

 

3.函数使用Camel命名法

4.函数的参数使用Camel命名法

5.类使用Pascal命名法

6.类的 方法/属性 使用Camel命名法

function TextNode(value, engine) {
    this.value = value;
    this.engine = engine;
}
TextNode.prototype.clone = function () {
    return this;
}

 

7.枚举变量 使用Pascal命名法，枚举的属性 使用 常量使用全部字母大写，单词间下划线分隔的命名方式

var TargetState = {
    READING: 1,
    READED: 2,
    APPLIED:3,
    READY:4
}    

 

8.命名空间 使用Camel命名法

equipments.heavyWeapons = {}

 

9.由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致

function XMLParser() {}
function insertHTML(element, html) {}
var httpRequest = new HTTPRequest();

 

10.类名 使用 名词

function Engine(options){}

 

11.函数名 尽量使用 动宾短语

function getStyle(element){

}

 

12.boolean 类型的变量使用 is 或 has 开头

var isReady = false;
var hasMoreCommands = false;

 

13.Promise 对象 用 动宾短语的进行时 表达

var loadingData = ajax.get('url');
loadingData.then(callback);