javascript code style

都才俊
2023-12-01

javascript代码风格

来源:https://github.com/airbnb/javascript

Objects 对象

javascript// bad
var item = new Object();

// good
var item = {};

//不要使用保留字作为对象属性,IE8不支持。
// bad
var superman = {
  default: { clark: 'kent' },
  private: true
};

// good
var superman = {
  defaults: { clark: 'kent' },
  hidden: true
};


Arrays 数组

javascript// bad
var items = new Array();

// good
var items = [];

//使用push添加数组元素
var someStack = [];
// bad
someStack[someStack.length] = 'abracadabra';

// good
someStack.push('abracadabra');

//复制数组的最快方法
var len = items.length;
var itemsCopy = [];
var i;
// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();

//转换array-like object(如:{1:'xx',2:'yy',length:2}) 成数组
var args = Array.prototype.slice.call(arguments);

Strings 字符串

javascript//使用单引号
// bad
var name = "Bob Parr";
// good
var name = 'Bob Parr';

// bad
var fullName = "Bob " + this.lastName;
// good
var fullName = 'Bob ' + this.lastName;

// 使用`+`进行换行
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
function inbox(messages) {
  items = '

<ul>';

  for (i = 0; i < length; i++) {
    items += '<li>' + messages[i].message + '</li>';
  }

  return items + '</ul>

';
}

// good
function inbox(messages) {
  items = [];

  for (i = 0; i < length; i++) {
    items[i] = '<li>' + messages[i].message + '</li>';
  }

  return '

<ul>' + items.join('') + '</ul>

';
}

Functions 函数

javascript// 使用自执行函数
// immediately-invoked function expression (IIFE)
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//型参别用`arguments`
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

// good
function yup(name, options, args) {
  // ...stuff...
}

Properties属性

javascript
var luke = { jedi: true, age: 28 }; // bad var isJedi = luke['jedi']; //一般情况使用`.`调用, // good var isJedi = luke.jedi; function getProp(prop) { //属性是变量,使用`[]`调用 return luke[prop]; } var isJedi = getProp('jedi');

Variables 变量

javascript
//使用var声明变量 // bad superPower = new SuperPower(); // good var superPower = new SuperPower(); //不用`,`分割变量 // bad // (compare to above, and try to spot the mistake) var items = getItems(), goSportsTeam = true; dragonball = 'z'; // good var items = getItems(); var goSportsTeam = true; var dragonball = 'z'; //声明未赋值变量在后面 // bad var i; var items = getItems(); var dragonball; var goSportsTeam = true; var len; // good var items = getItems(); var goSportsTeam = true; var dragonball; var length; var i; //函数内变量声明定义尽量放最前面,除非有函数开始有判断`return false`, // bad function() { test(); console.log('doing stuff..'); //..other stuff.. var name = getName(); if (name === 'test') { return false; } return name; } // good function() { var name = getName(); test(); console.log('doing stuff..'); //..other stuff.. if (name === 'test') { return false; } return name; } // bad function() { var name = getName(); if (!arguments.length) { return false; } return true; } // good function() { if (!arguments.length) { return false; } var name = getName(); return true; }

Equality 比较操作

javascript// bad
if (name !== '') {
  // ...stuff...
}

// good
if (name) {
  // ...stuff...
}

// bad
if (collection.length > 0) {
  // ...stuff...
}

// good
if (collection.length) {
  // ...stuff...
}

Blocks 块

javascript// bad
if (test)
  return false;

// good
if (test) return false;

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

// bad
function() { return false; }

// good
function() {
  return false;
}

Comments 注释

javascript// bad
// make() returns a new element
// based on the passed in tag name
//
// @param {String} tag
// @return {Element} element
function make(tag) {

  // ...stuff...

  return element;
}

// good
/**
 * make() returns a new element
 * based on the passed in tag name
 *
 * @param {String} tag
 * @return {Element} element
 */
function make(tag) {

  // ...stuff...

  return element;
}


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

//注释在在代码上方好
// good
// is current tab
var active = true;

// bad
function getType() {
  console.log('fetching type...');
  // set the default type to 'no type'
  var type = this._type || 'no type';

  return type;
}

// good
function getType() {
  console.log('fetching type...');

  //注释上方要留一行空行
  // set the default type to 'no type'
  var type = this._type || 'no type';

  return type;
}

Type Casting 格式转换

javascript//  => this.reviewScore = 9;

// bad
var totalScore = this.reviewScore + '';

// good
var totalScore = '' + this.reviewScore;

// bad
var totalScore = '' + this.reviewScore + ' total score';

// good
var totalScore = this.reviewScore + ' total score';

var inputValue = '4';

// bad
var val = new Number(inputValue);

// bad
var val = +inputValue;

// bad
var val = inputValue >> 0;

// bad
var val = parseInt(inputValue);

// good
var val = Number(inputValue);

// good
var val = parseInt(inputValue, 10);

// good
/**
 * parseInt was the reason my code was slow.
 * Bitshifting the String to coerce it to a
 * Number made it a lot faster.
 * 通过位移的方式转换成数字,速度会快些
 */
var val = inputValue >> 0;

var age = 0;

// bad
var hasAge = new Boolean(age);

// good
var hasAge = Boolean(age);

// good
var hasAge = !!age;

Naming Conventions 命名约定

javascript// bad
function q() {
  // ...stuff...
}

//名字要有语意
// good
function query() {
  // ..stuff..
}

// bad
var OBJEcttsssss = {};
var this_is_my_object = {};

//驼峰命名
// good
var thisIsMyObject = {};
function thisIsMyFunction() {}

// bad
function user(options) {
  this.name = options.name;
}

//构造函数大写
// good
function User(options) {
  this.name = options.name;
}

// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';

//私有属性用`_`开头
// good
this._firstName = 'Panda';

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

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

//保存调用者`this`为`_this`
// good
function() {
  var _this = this;
  return function() {
    console.log(_this);
  };
}

Constructors 构造函数

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

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

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

Events 事件

javascript// bad
$(this).trigger('listingUpdated', listing.id);

...

$(this).on('listingUpdated', function(e, listingId) {
  // do something with listingId
});

//传递id时用对象包裹后再传
// good
$(this).trigger('listingUpdated', { listingId : listing.id });

...

$(this).on('listingUpdated', function(e, data) {
  // do something with data.listingId
});

Modules 模块

  • 说明文件路径
  • 文件名使用驼峰命名
  • 开头加上一个 `!
  • 模块中使用'use strict'严格模式
  • 使用noConflict()无冲突的输出
javascript// fancyInput/fancyInput.js

!function(global) {
  'use strict';

  var previousFancyInput = global.FancyInput;

  function FancyInput(options) {
    this.options = options || {};
  }

  FancyInput.noConflict = function noConflict() {
    global.FancyInput = previousFancyInput;
    return FancyInput;
  };

  global.FancyInput = FancyInput;
}(this);
 类似资料:

相关阅读

相关文章

相关问答