JavaScript Style Guide中文总结

时间：2023-11-18 23:03:14

github原址：https://github.com/airbnb/javascript

类型
*基本类型：包括string、number、boolean、null、undefined，存储的是值本身
*引用类型：包括object、array、function，存储的是值的引用

对象
*使用对象字面量创建对象,而不是构造函数

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

*不要使用保留字作为键名，它们在IE8下不工作
*使用同义词替换需要使用的保留字

数组
*使用"[]"直接创建数组，而不是构造函数
*向数组增加元素时使用Array.push()来代替直接赋值

var newArray = [];
//bad
newArray[newArray.length] = 'abcd';
//good
newArray.push('abcd');

*当需要拷贝数组时，使用Array.slice()来代替循环赋值

var array = ['1','2','3'...];
var arrayCopy = [];
//bad
for(var i = 0; i < array.length; i++) {
    arrayCopy[i] = array[i];
}
//good
arrayCopy = array.slice();

字符串
*使用单引号' '包裹字符串

//bad
var name = "Bob Parr";
//good
var name = 'Bob Parr';

*程序生成的字符串使用Array.join()连接，而不是使用连接符"+"

var items;
var i;
var message = ['message1','message2','message3'];
//bad
function list(message) {
    items = '<ul>';
    for(i = 0; i < message.length; i++){
        items += '<li>' + message[i] + '</li>';
    }
    return items + '</ul>';
}
//good
function list(message) {
    items = [];
    for(i = 0; i < message.length; i++) {
        items.push('<li>' + message[i] + '</li>');
    }
    return '<ul>' + items.join('') + '</ul>';
}

属性
*使用"."来访问对象的属性，而不是中括号['属性名']

var luke = {
    jedi: true,
    age: 28
};
//bad
var isJedi = luke['jedi'];
//good
var isJedi = luke.jedi;

*当通过变量访问属性时才使用中括号['属性名']

var luke = {
    jedi: true,
    age: 28
};
function getProp(prop) {
    return luke[prop];
}
var isJedi = getProp('jedi');

变量
*总是使用var来声明变量，省略var将导致产生全局变量，应避免污染全局命名空间
*使用var声明每一个变量，这样你永远不用担心将","错写成";"

//bad
var items = getItems(),
    goSportsTeam = true,
    dragonball = 'z';
//good
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

*总是在作用域顶部声明变量，这将帮助你避免变量声明提升带来的相关问题

提升
*变量声明会被提升至作用域顶部，但赋值不会

function example() {
    console.log(value);    //undefined
    var value = true;
}

*命名函数表达式会提升变量名到作用域顶端，但不会提升函数名和函数体
*函数声明会提升函数名和函数体

运算符
*优先使用===和!==而不是==和!=
*if语句中的判断条件总是遵守下面的规则：
对象被认为true
Undefined被认为false
Null被认为false
布尔值被认为true或false
数字如果是+0、-0或NaN被认为false，否则为true
字符串如果是空字符串''，被认为false，否则为true

代码块
*使用大括号包裹所有的多行代码块

//bad
if(test)
    return false;
//good
if(test){
    return false;
}

*如果是if和else构成的多行代码块，把else放在if代码块关闭括号的同一行

注释
*使用/** ... */作为多行注释

/**
 *第一行注释
 *第二行注释
 *...
 */

*使用//作为单行注释，在被注释对象上面另起一行使用单行注释，在注释前插入空行

//bad
var active = true; // is current tab

//good
//is current tab
var active = true;

空白
*在大括号前放一个空格

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

*在控制语句(if、while等)的小括号前放一个空格，在函数的调用及声明中，不在函数的参数列表前加空格

//bad
if(ifJedi) {}
//good
if (ifJedi) {}
//bad
function fight () {}
//good
function fight() {}

*使用空格把运算符隔开
*在块末或新语句前插入空行

逗号
*不要将逗号放在行首

//bad
var story = [
    once
    ,upon
    ,aTime
];
//good
var story = [
    once,
    upon,
    aTime
];

*额外的行末逗号不需要

//bad
var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn',
};
//good
var hero = {
    firstName: 'Kevin',
    lastName: 'Flynn'
};

分号
*在自执行的匿名函数前面加一个分号，防止文件压缩合并时出错

//good
;(function(){})()

命名规则
*避免单子母命名，命名应具备描述性
*使用驼峰命名对象和函数
*使用帕斯卡式命名构造函数或类
*不要使用下划线前/后缀
*不要保存this的引用，使用Function.bind()
*总是给函数命名
*如果你的文件导出一个类，那你的文件名应该与类名完全相同

构造函数
*给对象原型分配方法，而不是使用一个新对象覆盖原型，覆盖原型将导致继承出现问题

function Jedi() {
  console.log('new jedi');
}

// bad
Jedi.prototype = {
  fight: function fight() {
    console.log('fighting');
  },

  block: function block() {
    console.log('blocking');
  }
};

// good
Jedi.prototype.fight = function fight() {
  console.log('fighting');
};

Jedi.prototype.block = function block() {
  console.log('blocking');
};

*方法可以通过返回this来实现方法链式调用

jQuery
*使用$作为存储jQuery对象的变量名前缀

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

*缓存jQuery查询

//bad
function setSidebar() {
    $('.sidebar').hide();
    $('.sidebar').css();
}
//good
function setSidebar() {
    var $sidebar = $('.sidebar');
    $sidebar.hide();
    $sidebar.css();
}

*使用链式调用时，将点"."放在前面，强调这是方法调用而不是新语句

//bad
$('#items').
  find('.selected').
  highlight().
  end().
  find('.open').
  updateCount();
//good
$('#items')
  .find('.selected')
  .highlight()
  .end()
  .find('.open')
  .updateCount();

相关文章