자 바스 크 립 트 규범

87827 단어
다음으로 이동:https://github.com/adamlu/javascript-style-guide
원문:https://github.com/airbnb/javascript
주: 본인 은 자신의 개발 습관 에 따라 일부 규범 을 삭제 하고 수정 하 였 습 니 다.
자 바스 크 립 트 규범
내용 목록
유형 대상 배열 문자열 함수 속성 변수 조건 식 과 등호 조각 주석 공백 쉼표 분점 형식 변환 명명 약정 액세스 기 구조 기 이벤트 모듈 jQuery
ES5 호환성 성능 자원 어떤 사람 이 사용 하고 있 습 니까 번역 자 바스 크 립 트 스타일 가이드 공헌 자 허가 유형
원본 값: 전송 값 에 해당 합 니 다.string number boolean null undefined 
var foo = 1,
    bar = foo;

bar = 9;

console.log(foo, bar); // => 1, 9


복잡 유형: 인용object array function 
var foo = [1, 2],
    bar = foo;

bar[0] = 9;

console.log(foo[0], bar[0]); // => 9, 9

[⬆]
대상
글자 액면가 로 대상 만 들 기
// bad
var item = new Object();

// good
var item = {};


보존 자 를 사용 하지 마 세 요. reserved words 키 로 삼다
// bad
var superman = {
  class: 'superhero',
  default: { clark: 'kent' },
  private: true
};

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

[⬆]
배열
글꼴 값 으로 배열 만 들 기
// bad
var items = new Array();

// good
var items = [];


배열 의 길 이 를 모 르 면 push 를 사용 하 십시오.
var someStack = [];


// bad
someStack[someStack.length] = 'abracadabra';

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


배열 을 복사 할 때 slice 를 사용 합 니 다. jsPerf 
var len = items.length,
    itemsCopy = [],
    i;

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
itemsCopy = items.slice();


slice 를 사용 하여 클래스 배열 의 대상 을 배열 로 변환 합 니 다.
function trigger() {
  var args = Array.prototype.slice.call(arguments);
  ...
}

[⬆]
문자열
문자열 에 작은 따옴표 사용 하기  '' 
// bad
var name = "Bob Parr";

// good
var name = 'Bob Parr';

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

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


80 글자 가 넘 는 문자열 은 문자열 로 줄 을 바 꿔 야 합 니 다 주: 과도 하 게 사용 하면 긴 문자열 연결 이 성능 에 영향 을 줄 수 있 습 니 다. jsPerf & Discussion 
// 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.';


// 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.';


프로 그래 밍 할 때 문자열 연결 대신 join 을 사용 하여 문자열 을 만 듭 니 다. 특히 IE: jsPerf. 
var items,
    messages,
    length, 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;

// 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] = messages[i].message;
  }

  return '<ul><li>' + items.join('</li><li>') + '</li></ul>';
}

[⬆]
함수.
함수 식:
//        
var anonymous = function() {
  return true;
};

//        
var named = function named() {
  return true;
};

//          
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();


절대 비 함수 블록 에 함 수 를 설명 하지 마 십시오. 그 함 수 를 변수 에 부여 합 니 다. 브 라 우 저 는 이렇게 할 수 있 지만 해석 이 다 릅 니 다. 주: ECMA - 262 정 의 는 을 하나의 문장 으로 정의 합 니 다. 함수 성명 은 하나의 문장 이 아 닙 니 다. ECMA - 262 가 이 문제 에 대한 설명 을 읽 습 니 다.
// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}

// good
if (currentUser) {
  var test = function test() {
    console.log('Yup.');
  };
}


절대 매개 변 수 를 이름 짓 지 마 세 요.  arguments, 이것 은 함수 작용 영역 을 넘 어 전 달 될 것 이다.  arguments  대상
// bad
function nope(name, options, arguments) {
  // ...stuff...
}

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

[⬆]
속성
변 수 를 사용 하여 속성 에 접근 할 때 괄호 를 사용 합 니 다.
var luke = {
  jedi: true,
  age: 28
};

function getProp(prop) {
  return luke[prop];
}

var isJedi = getProp('jedi');

[⬆]
변량
항상 사용  var  변 수 를 설명 합 니 다. 이렇게 하지 않 으 면 전체 변수 가 발생 할 수 있 으 므 로 전체 네 임 스페이스 를 오염 시 키 지 않도록 해 야 합 니 다.
// bad
superPower = new SuperPower();

// good
var superPower = new SuperPower();


사용  var  그리고 새 줄 은 여러 변 수 를 설명 하고 네 개의 빈 칸 을 들 여 씁 니 다.
// bad
var items = getItems();
var goSportsTeam = true;
var dragonball = 'z';

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


마지막 으로 할당 되 지 않 은 변 수 를 설명 합 니 다. 이전 할당 변 수 를 참조 하려 면 유용 합 니 다.
// bad
var i, len, dragonball,
    items = getItems(),
    goSportsTeam = true;

// bad
var i, items = getItems(),
    dragonball,
    goSportsTeam = true,
    len;

// good
var items = getItems(),
    goSportsTeam = true,
    dragonball,
    length,
    i;


역할 영역 상단 에 변 수 를 설명 하고 변수 성명 과 할당 으로 인 한 문 제 를 피 합 니 다.
// 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;
}

[⬆]
조건 식 과 등호
적 절 히 사용 하 다  ===  화해시키다  !==  그리고  ==  화해시키다  != .
조건 식 의 강제 형식 변환 은 다음 과 같은 규칙 을 따른다.
대상 으로 계산 되다 true
Undefined 으로 계산 되다 false
Null 으로 계산 되다 false
불 값 으로 계산 되다 불 의 값 숫자. 하면, 만약, 만약... +0, -0, or NaN 으로 계산 되다 false , 그렇지 않 으 면 true
문자열 하면, 만약, 만약...  ''  으로 계산 되다 false true 
if ([0]) {
  // true
  // An array is an object, objects evaluate to true
}


단축 키 를 사용 합 니 다.
// bad
if (name !== '') {
  // ...stuff...
}

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

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

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


읽 기 Truth Equality and JavaScript 더 알 아 보기 [⬆]
덩어리.
모든 줄 의 블록 에 큰 괄호 를 사용 합 니 다.
// bad
if (test)
  return false;

// good
if (test) return false;

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

// bad
function() { return false; }

// good
function() {
  return false;
}

[⬆]
주석
쓰다  /** ... */  설명, 지정 유형 및 매개 변수 값 과 반환 값 을 포함 하여 여러 줄 의 설명 을 진행 합 니 다.
// 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;
}


만약 당신 에 게 문제 가 있다 면 다시 한 번 보 거나 실현 되 어야 할 해결 방법 을 건의 한다 면 당신 의 주석 앞 에 덧 붙 여야 합 니 다.  FIXME  혹시  TODO  다른 사람 이 신속하게 이해 하도록 돕다
function Calculator() {

  // FIXME: shouldn't use a global here
  total = 0;

  return this;
}
function Calculator() {

  // TODO: total should be configurable by an options param
  this.total = 0;

  return this;
}

[⬆]
공백
tab 를 4 개의 빈 칸 으로 설정 합 니 다.
// bad
function() {
∙∙var name;
}

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

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


대괄호 앞 에 빈 칸 을 놓다
// bad
function test(){
  console.log('test');
}

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

// bad
dog.set('attr',{
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});

// good
dog.set('attr', {
  age: '1 year',
  breed: 'Bernese Mountain Dog'
});


직사각형 체인 을 만 들 때 들 여 쓰기 를 사용 합 니 다.
// bad
$('#items').find('.selected').highlight().end().find('.open').updateCount();

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

// bad
var leds = stage.selectAll('.led').data(data).enter().append('svg:svg').class('led', true)
    .attr('width',  (radius + margin) * 2).append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

// good
var leds = stage.selectAll('.led')
    .data(data)
  .enter().append('svg:svg')
    .class('led', true)
    .attr('width',  (radius + margin) * 2)
  .append('svg:g')
    .attr('transform', 'translate(' + (radius + margin) + ',' + (radius + margin) + ')')
    .call(tron.led);

[⬆]
쉼표
쉼표 를 앞 에 두 지 마 세 요.
// bad
var once
  , upon
  , aTime;

// good
var once,
    upon,
    aTime;

// bad
var hero = {
    firstName: 'Bob'
  , lastName: 'Parr'
  , heroName: 'Mr. Incredible'
  , superPower: 'strength'
};

// good
var hero = {
  firstName: 'Bob',
  lastName: 'Parr',
  heroName: 'Mr. Incredible',
  superPower: 'strength'
};


여분의 쉼표 를 넣 지 마 세 요. 이것 은 IE 에서 오 류 를 일 으 킬 수 있 습 니 다. 또한 하나의 쉼표 가 더 있 으 면 일부 ES3 의 실현 은 다수의 그룹의 길 이 를 계산 할 수 있 습 니 다.
// bad
var hero = {
  firstName: 'Kevin',
  lastName: 'Flynn',
};

var heroes = [
  'Batman',
  'Superman',
];

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

var heroes = [
  'Batman',
  'Superman'
];

[⬆]
분점
문장 이 끝나 면 반드시 점 수 를 더 해 야 한다.
// bad
(function() {
  var name = 'Skywalker'
  return name
})()

// good
(function() {
  var name = 'Skywalker';
  return name;
})();

// good
;(function() {
  var name = 'Skywalker';
  return name;
})();

[⬆]
형식 변환
문장의 시작 형식 변환. 문자열:
//  => 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';


숫자 사용  parseInt  그리고 항상 유형 변환 의 기 수 를 가지 고 있 습 니 다.
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;

[⬆]
명명 규칙
단일 문자 이름 을 피하 고 변수 이름 에 설명 의 미 를 부여 합 니 다.
// bad
function q() {
  // ...stuff...
}

// good
function query() {
  // ..stuff..
}


이름 대상, 함수, 인 스 턴 스 를 사용 할 때 낙타 봉 이름 규칙 을 사용 합 니 다.
// bad
var OBJEcttsssss = {};
var this_is_my_object = {};
var this-is-my-object = {};
function c() {};
var u = new user({
  name: 'Bob Parr'
});

// good
var thisIsMyObject = {};
function thisIsMyFunction() {};
var user = new User({
  name: 'Bob Parr'
});


구조 함수 나 클래스 를 명명 할 때 낙타 봉 식 대문자 사용 하기
// bad
function user(options) {
  this.name = options.name;
}

var bad = new user({
  name: 'nope'
});

// good
function User(options) {
  this.name = options.name;
}

var good = new User({
  name: 'yup'
});


개인 속성 을 명명 할 때 앞 에 밑줄 을 추가 합 니 다.  _ 
// bad
this.__firstName__ = 'Panda';
this.firstName_ = 'Panda';

// good
this._firstName = 'Panda';


저장  this  인용  _this . 
// bad
function() {
  var self = this;
  return function() {
    console.log(self);
  };
}

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

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

[⬆]
액세스 기
속성의 액세스 기 함수 가 필요 하지 않 습 니 다 액세스 기 함수 가 있다 면 getVal () 과 setVal (hello) 을 사용 하 십시오.
// bad
dragon.age();

// good
dragon.getAge();

// bad
dragon.age(25);

// good
dragon.setAge(25);


속성 이 불 값 이면 isVal () 또는 hasVal () 을 사용 합 니 다.
// bad
if (!dragon.age()) {
  return false;
}

// good
if (!dragon.hasAge()) {
  return false;
}


get () 과 set () 함 수 를 만 들 수 있 지만 일치 해 야 합 니 다.
function Jedi(options) {
  options || (options = {});
  var lightsaber = options.lightsaber || 'blue';
  this.set('lightsaber', lightsaber);
}

Jedi.prototype.set = function(key, val) {
  this[key] = val;
};

Jedi.prototype.get = function(key) {
  return this[key];
};

[⬆]
구조 기
대상 에 게 원형 을 분배 하 는 방법 은 새로운 대상 으로 원형 을 덮어 쓰 는 것 이 아니 라 원형 을 덮어 쓰 면 계승 에 문제 가 생 길 수 있다.
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  도움말 방법 체인 가능.
// bad
Jedi.prototype.jump = function() {
  this.jumping = true;
  return true;
};

Jedi.prototype.setHeight = function(height) {
  this.height = height;
};

var luke = new Jedi();
luke.jump(); // => true
luke.setHeight(20) // => undefined

// good
Jedi.prototype.jump = function() {
  this.jumping = true;
  return this;
};

Jedi.prototype.setHeight = function(height) {
  this.height = height;
  return this;
};

var luke = new Jedi();

luke.jump()
  .setHeight(20);


사용자 정의 toString () 방법 을 쓸 수 있 지만 정상적으로 작 동 하고 부작용 이 없 도록 합 니 다.
function Jedi(options) {
  options || (options = {});
  this.name = options.name || 'no name';
}

Jedi.prototype.getName = function getName() {
  return this.name;
};

Jedi.prototype.toString = function toString() {
  return 'Jedi - ' + this.getName();
};

[⬆]
이벤트
이벤트 에 데 이 터 를 추가 할 때 원본 값 이 아 닌 해시 가 들 어 옵 니 다. 이 는 다음 기여 자 들 이 이벤트 데이터 에 더 많은 데 이 터 를 추가 할 수 있 습 니 다.
// bad
$(this).trigger('listingUpdated', listing.id);

...

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

더 좋다:
// good
$(this).trigger('listingUpdated', { listingId : listing.id });

...

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

[⬆]
모듈
모듈  !  시작, 이 는 문제 가 있 는 모듈 이 마지막 점 수 를 포함 하 는 것 을 잊 어 버 리 면 합병 후 오류 가 발생 하지 않 음 을 보증 합 니 다 이 파일 은 낙타 봉 으로 이름 을 짓 고 같은 이름 의 폴 더 에서 내 보 낼 때 이름 이 일치 해 야 합 니 다 내 보 낸 모듈 을 이전 버 전 으로 설정 하고 되 돌려 주 는 noConflict () 방법 을 추가 합 니 다 항상 모듈 맨 위 에 설명  'use strict'; 
// 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);

[⬆]
jQuery
캐 시 jQuery 조회
// bad
function setSidebar() {
  $('.sidebar').hide();

  // ...stuff...

  $('.sidebar').css({
    'background-color': 'pink'
  });
}

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

  // ...stuff...

  $sidebar.css({
    'background-color': 'pink'
  });
}


DOM 조회 에 직렬 연결 을 사용 합 니 다.  $('.sidebar ul')  혹시  $('.sidebar ul') ，jsPerf
역할 영역 이 있 는 jQuery 대상 조회 사용  find 
// bad
$('.sidebar', 'ul').hide();

// bad
$('.sidebar').find('ul').hide();

// good
$('.sidebar ul').hide();

// good
$('.sidebar > ul').hide();

// good (slower)
$sidebar.find('ul');

// good (faster)
$($sidebar[0]).find('ul');

[⬆]
자 바스 크 립 트 의 떨 림 방지 와 절 류 를 이야기 해 보도 록 하 겠 습 니 다.
세 가지 방식으로 구조체를 출력하다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage