Javascript代码规范

JMFE Javascript代码规范v1.0。抛砖引玉，请大家多给建议，多做补充。定稿后组内使用统一Linter配置。

命名规范

变量

避免单字母名称，让名称具有描述性

// good
function query() {
  // ...
}
// bad
function q() {
  // ...
}

使用驼峰写法

// good
var thisIsMyObj = {};
function thisIsMyFun() {}
// bad
var OBJEcttsssss = {};
var this_is_my_object = {};
function c() {}

多词相连时，>=6个字母的词使用缩写

// good
var people = {};
var compListTpl = [];
function fmtDate() {};
// bad
var componentListTemplate = [];
var formatDate() {};

私有属性

封装私有属性时使用_前缀

// good
function people(name) {
    var _ageMap = {
        "张三" : "21",
        "小红" : "20"
    }
    this.name = name;
    this.age = _ageMap[name];
}

this

保存this引用时使用self

// good
function() {
    var self = this;
    return function() {
      console.log(self);
    };
}
// bad
function() {
    var that = this;
    return function() {
      console.log(that);
    };
}
// bad
function() {
    var _this = this;
    return function() {
      console.log(_this);
    };
}

jQuery变量

jQuery对象变量使用$前缀

// good
var $sidebar = $('.sidebar');
// bad
var sidebar = $('.sidebar');

文件名

如果文件作为一个依赖被导出，文件名和导出名保持一致

// file contents
class CheckBox {
    // ...
}
module.exports = CheckBox;
var CheckBox = require('./CheckBox');
// good
var CheckBox = require('./CheckBox');
// bad
var CheckBox = require('./checkBox');
// bad
var CheckBox = require('./check_box');

语句规范

空格缩进

缩进使用tab设置四个空格

// good
function() {
∙∙∙∙var name;
}
// bad
function() {
var name;
}
// bad
function() {
∙∙var name;
}

对象声明格式

// good
var coder = {
    name : "张三",
    age : 21,
    girlFreind : {
        name : "小红",
        age : 20
    }
};
// bad
var coder = {
    name : "张三",age : 21,girlFreind : {name : "小红",age : 20}
};
// bad
var coder =
{
    name : "张三",age : 21,girlFreind : {name : "小红",age : 20}
};
// bad
var coder={
    name:"张三",
    age:21,
    girlFreind:{
        name:"小红",
        age:20
    }
};

函数声明格式

// good
function test() {
    console.log('test');
}
// bad
function test (){
    console.log('test');
}
// bad
function test (){console.log('test');}

用空白分隔运算符

// good
var x = y + 5;
// bad
var x=y+5;

if、while语句块

// good
if () {
    // ...
    // ...
} else {
    // ...
    // ...
}
// bad
if () {
    // ...
    // ...
}
else {
    // ...
    // ...
}
// good
if () // ...
else // ...
// bad
if (){ console.log("one line"); }
else{ console.log("one line"); }
// good
while () {
    // ...
}

switch语句块

switch () {
    case "1":
        // ...
        break;
    case "2":
        // ...
        break;
}

运算符

使用快捷方式计算布尔值

// good
if (name) {
    // ...
}
// bad
if (name !== '') {
    // ...
}
// good
if (collection.length) {
    // ...
}
// bad
if (collection.length > 0) {
    // ...
}

创建变量

基本规则

使用var声明每个变量，结构整洁，并且容易添加新的变量声明，而不用去担心多用;

// good
var items = getItems();
var name = "张三";
var age = 21;
// bad
var items = getItems(),
    name = "张三",
    age = 21;
// bad
// (compare to above, and try to spot the mistake)
var items = getItems(),
    name = "张三";
    age = 21;

在作用域顶部一次性声明所有变量，并最后声明未赋值的变量

// good
var items = getItems();
var name;
var age;
var sex;
//...
name = "张三";
//...
age = 21;
sex = "male";
// bad
var items = getItems();
//...
var name = "张三";
//...
var age = 21;
var sex = "male";

对象

使用字面量创建对象

// good
var item = {};
// bad
var item = new Object();

数组

使用字面量创建数组

// good
var item = [];
// bad
var items = new Array();

添加删除数组元素时，使用push、pop、unshift、shift，不直接操作数组元素

var someStack = [];
// good
someStack.push('aaa');
// bad
someStack[someStack.length] = 'aaa';

字符串

使用双引号包裹字符串

// good
var name = "张三";
// bad
var name = '张三';

超过80个字符的字符串使用字符串连接符进行换行

// good
var errorMessage = 'This is a super long error that was thrown because ' +
  'of Batman. When you stop to think about how Batman had anything to do ' +
  'with this, you would get nowhere fast.';
// bad
var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';
// bad
var errorMessage = 'This is a super long error that was thrown because \
of Batman. When you stop to think about how Batman had anything to do \
with this, you would get nowhere \
fast.';

以编程方式创建字符串时使用Array的join方法而不是通过连接符

var items;
var messages;
var length;
var i;
messages = [{
  state: 'success',
  message: 'This one worked.'
}, {
  state: 'success',
  message: 'This one worked as well.'
}, {
  state: 'error',
  message: 'This one did not work.'
}];
length = messages.length;
// good
function inbox(messages) {
    items = [];
    for (i = 0; i < length; i++) {
      items.push('<li>' + messages[i].message + '</li>');
    }
    return '<ul>' + items.join('') + '</ul>';
}
// bad
function inbox(messages) {
    items = '<ul>';
    for (i = 0; i < length; i++) {
      items += '<li>' + messages[i].message + '</li>';
    }
    return items + '</ul>';
}

注释

单行

单行注释使用//，注释符后空一格，把单行注释放在语句的上一行，并且在注释之前空一行

// good
// is current tab
var active = true;
// bad
var active = true;  // is current tab
// good
function getType() {
    console.log('fetching type...');
    // set the default type to 'no type'
    var type = this._type || 'no type';
    return type;
}
// bad
function getType() {
    console.log('fetching type...');
    //set the default type to 'no type'
    var type = this._type || 'no type';
    return type;
}

多行

多行注释使用/* */，注释符前后换行，缩进4格开始写注释

// good
/* 
    this is an 
    annotation example 
*/
var active = true;
// bad
/* this is an annotation example */
var active = true;
// bad
// this is an 
// annotation example
var active = true;

方法注释

注明方法作用、入参类型和说明、返回类型和说明

/**
 * 格式化金额   1234567.890 -> 1,234,568 || 1234567.9 | 1234567.89 | 1234567.8900
 * @param  {anytype}  str  待格式化数字，可为任何类型   传入非数字时直接返回
 * @param  {[Number | String]}   fixedNum   四舍五入几位，取值0-20，可不传，小数默认截取两位   
 * @return {String}   格式化后的数字，String类型
 */
function splitMoney(str, fixedNum) {
    // ...
}

Contents