JAVASCRIPT CONVENTION

협업을 위한 JAVASCRIPT 컨벤션 가이드입니다.

작성자: Kenneth

마지막 작성일: 2017-01-24

Getting Started

여기서 안내하는 컨벤션은 ECMA 5에 대한 컨벤션을 다룹니다.

용어정리

  • 모듈: 앞으로 사용되는 모듈은 프레임워크와 라이브러리를 함께 통칭합니다.
  • Pure Javascript: 순수 자바스크립트를 의미하며, 이는 모듈을 사용하지 않은 자바스크립트를 의미합니다.
  • CI: Continuous Integration(지속적인 통합) 서비스를 의미합니다.
  • Build Task: 배포를 위한 빌드 테스크 도구를 의미합니다.

공통

JAVASCRIPT를 사용했을때 지켜야하는 공통 약속에 대한 정의입니다.

  1. Strict Mode

    1-1. 모듈에서 제공되는 모든 스크립트는 ECMA Strict Mode를 사용합니다.

     'use strict';

  2. Closure

    2-1. 변수 스코프 지정을 위한 클로저(Closure)는 아래와 같이 사용하시기 바랍니다.

     // JAVASCRIPT 클로저
 !(function() {
 } ());

 (function() {
 } ());

 // jQuery 충돌 방지, 모듈에서 사용되는 jQuery 클로저.
 (function($) {
 } (jQuery));

    2-2. 스코프 안에서 사용되는 변수와 스코프 밖에서 사용되는 변수의 혼선이 없도록 합니다.

     var count = 3;
 var context = ...;

 !(function() {
     // DO
     var refChildrenCount = context.count;

     // DO NOT
     var count = context.count;

     // DO NOT
     var _count = context.count;
 } ());

  3. 변수/함수 명명

    3-1. 변수 혹은 명시적 함수형 변수 명명은 카멜표기법(camelCase)를 따릅니다, 다만 함수는 파스칼표기법(PascalCase)을 따릅니다.

    • CASE 1

        // DO
  var elementClassName = 'classname';

  // DO NOT
  var elementclassname = 'classname';

  // DO NOT
  var ElementClassName = 'classname';

  // DO NOT
  var element_class_name = 'classname';

    • CASE 2

        // DO
  function ElementParser() {
  }

  // DO NOT
  function elementParser() {
  }

  // DO NOT 
  function elementparser() {
  }

  // DO NOT
  function element_parser() {
  }

    3-2. 함수 혹은 명시적 함수형 변수 선언은 동사가 앞에 오도록 하며, 최종적으로 얻고자 하는 결과를 단어의 끝으로 정의합니다.

    • CASE 1

        // DO
  var findParentElement = function() {
  };

  // DO NOT
  var parentElementFind = function() {
  };

  // DO NOT
  var findElementParent = function() {
  };

    • CASE 2

        // DO
  var doPollingContext = function() {
  };

  // DO NOT
  var pollingContext = function() {
  };

  // DO NOT
  var contextPolling = function() {
  };

  4. 조건자

    4-1. undefined 조건비교

    • undefined typeof를 통해 비교해주시기 바랍니다.

        // DO
  if (typeof data === 'undefined') {
  }

  // DO NOT
  if (data === undefined) {
  }

    4-2. 대응 조건비교

    • 두 오퍼랜드를 대응하여 조건비교를 할 경우, === 오퍼레이터를 이용하시기 바랍니다.

        // DO
  if (data === true) {
  }

  // DO NOT
  if (data == true) {
  }

  // DO NOT
  if (data) {
  }

    • 만약 데이터가 boolean 타입이 아니기 때문에 데이터가 존재하는지 체크 될 경우 아래 지침을 따르시기 바랍니다.

        var str = 'string';

  // 아래 조건을 별도 함수로 제공하시는 것을 권장합니다.
  if(typeof str !== 'undefined' && str !== null && str !== '') {
  }

  // 혹은 아래의 방식을 사용하기 바랍니다.
  if(!!str === true) {
  }

  5. 반복문

    5-1. 반복문은 최대한 함수사용을 지양하시기 바랍니다.

     var map = [1, 2, 3, 4, 5];

 // DO
 for(var idx in map) {
     console.log(idx, map[idx]);
 }

 // DO NOT
 map.map(function(e, i) {
     console.log(i, e);
 });

  // DO NOT
 map.forEach(function(e, i) {
     console.log(i, e);
 });

  6. 매개변수

    6-1. 매개변수는 생략하지 마십시오.

     // DO    
 var someFunction = function(element, type, options) {
 };

 // DO NOT
 var someFunction = function(e, t, o) {
 };

 // DO NOT
 var someFunction = function(element, type) {
     var args = Array.prototype.slice.call(arguments);
     var options = Object.assign({}, args[2]);
 };

HOMEWORKS

HOMEWORKS 컴포넌트를 개발하거나, 컨트리뷰트를 할 경우 해당 규약을 지켜주시기 바랍니다.

  1. 컨텍스트 스코프

    1-1. 블럭 스코프 하위에 this 변수명은 context로 지정하시기 바랍니다.

    HomeWorksMethod('component', {
 init: function(element) {
     // DO
     var context = this;

     // DO NOT
     var _this = this;

     // DO NOT
     var self = this;
 }
});

results matching ""

    No results matching ""