JavaScript Coding Convention

-

Intro

javascript(이하 js)로 개발함에 있어서 개발자들간에 지켜야할 코딩 규약을 정하고자 한다.

Convention

Javascript File

  1. file encoding은 UTF-8로 한다.
  2. file extention은 .js로 한다. ex) Test.js
  3. javascript 코드는 기본적으로 HTML 파일에 들어가지 않는것을 권장한다.
  4. HTML에서 javascript include는 <script src="filename.js"> 형태로 기술한다.

Indentation & Line

  1. indent는 space 4칸으로 한다.(tab 지양)
  2. line length는 가능한 80 line에 맞추도록 한다.

Declaration

Variable

  1. 변수 선언은 반드시 var 를 사용한다.
  2. var statement는 function body의 최상단에 위치한다.
  3. var statement는 alphabetical ascending order로 배치 될수 있도록 한다.
    변수선언 샘플
    ...
    function printName() {
        var channel;
        var program;
        var size;
        ...
    }

Function

  1. function은 가능한 expressive하게 선언하지 않고 declarative하게 선언하는것을 권장한다.
    함수선언 샘플
    // suggest not to use if you can.
    var foo = function (arg1, arg2) {
        ...
    };
    // suggest to use this style.
    function foo(arg1, arg2) {
    ...
    }
  2. named function은 function keyword와 name 사이 space 1칸, parameter와 { 사이 space 1칸으로 한다.
    named function
    function myName(arg1, arg2) {
        ...
    }
  3. anonymous function은 function keyword와 argument 사이 space 1칸, parameter와 { 사이 space 1칸으로 한다.
    named function
    var af = function (arg1, arg2) {
        ...
    };
  4. inner function의 정의는 var statement 다음에 위치하도록 한다.
    named function
    function myName(arg1, arg2) {
        var v1;
        function inner(a1) {
            ...
        }
        ...
    }
  5. immediate function invocation은 괄호"()" 사이에 function이 위치할 수 있도록 한다.
    named function
    var af = (function (arg1, arg2) {
        var a;
        ...
        return a;
    }());

Naming

  1. variable naming은 lowercase와 숫자, underscore(_)의 조합으로 만들도록 한다.
    named function
    var channel_number;
    var program_name;
    ...
  2. underscore(_)로 시작하는 이름은 private에 한해서만 사용하도록 한다.
  3. method로 사용할 function명은 lowercase로 시작된 camel type을 사용한다.
    named function
    function doStuff() {
        ...
    }
  4. constructor로 사용될 function명은 uppercase로 시작된 camel type을 사용한다.
    named function
    function ChannelManager() {
        ...
    }
    ...
    var ch = new ChannelManager();
  5. global variable은 어떻게 할까?...고민중

Statement

  1. statement는 마지막에 항상 semicolon(;)을 붙이도록 한다.
  2. compound statement는 아래와 같은 패턴을 사용하도록 권장한다.
    named function
    // if-else
    if (condition) {
        statements
    }
         
    if (condition) {
        statements
    } else {
        statements
    }
    if (condition) {
        statements
    } else if (condition) {
        statements
    } else {
        statements
    }
    // for
    for (initialization; condition; update) {
        statements
    }
    for (variable in object) {
        if (filter) {
            statements
        }
    }
    // while
    while (condition) {
        statements
    }
    // do-while
    do {
        statements
    } while (condition);
    // switch
    switch (expression) {
    case expression:
        statements
    default:
        statements
    }
    // try-catch
    try {
        statements
    } catch (variable) {
        statements
    }
    try {
        statements
    } catch (variable) {
        statements
    } finally {
        statements
    }

Comparator

  1. ==와 != 대신 ===와 !==를 사용하는 것을 권장한다.

Additional

  1. eval은 보안상의 문제가 있으니 되도록 쓰지않도록 한다."eval is evil"
  2. with는 알기 힘든 버그를 만들어 낼수 있으니 되도록 쓰지 않도록 한다.
    http://yuiblog.com/blog/2006/04/11/with-statement-considered-harmful/
  3. global scope이 필요한 경우가 아니면 Function constructor는 사용을 자제한다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

[Protocol] WIEGAND 통신

-
이미지
1. WIEGAND 통신 방식이란? 두 개의 D0, D1 라인을 이용해 소량의 데이터를 전송 하는 방식으로 , 주로 출입통제 장치의 리더와 컨트롤러 간의 통신 방식에 사용 됩니다. 물론 리더는 RS-485, RS-232, ABA-Track II 와 같이 다양한 통신 방식을 취하기도 하지만, 주로 WIEGAND 방식을 많이 사용 합니다. 그 이유는 .. 개인적으로 생각했을때 구현이 쉽고, 별도의 PHY 칩을 사용 하지 않기 때문에 생산 단가를 좀더 줄일 수 있어서가 아닌가.. 생각해 봅니다.  2. WIEGAND 통신 타이밍도 위 그림과 같이 D0, D1  두 신호선으로 통신 합니다. D0, D1 이 각각 의미 하는 것은, D0 가 LOW 이면 그 비트 값이 '0' 이고, D1 이 LOW 이면 그 비트 값이 '1' 임을 의미 합니다. 따라서 D0 와 D1 은 동시에 LOW 가 되지 않으며, 정해진 타이밍이 있습니다. 예를 들어 위 그림의 신호를 데이터로 변환해 보자면, 4 번 LOW 값이 있으므로 4 비트 임을 알 수 있고, 값은 1101 임을 알 수 있습니다. 3. WIEGAND 신호 구현 실제 WIEGAND 통신 방식으로 데이터를 전송 할때는  데이터가 손상될 수 있으므로, 앞뒤에 패리티비트를 추가 하거나, 복잡한 계산방법을 적용해 데이터를 암호화 하는 경우도  있습니다. 하지만 생성된 데이터는 약 20 ~ 40 Bit 이내의 데이터이고, 이를 0 번 비트 부터 차례대로 전송 하면 됩니다. 해당 비트가 0 이면 D0 가 연결된 PIN 을 LOW 로 하고, 비트 값이 1 이면 D1 이 연결된 PIN 을 LOW 로 해주면 그만 입니다. 물론 회로적으로 GPIO 의 출력을 그대로 내보내지는 않고 트랜지스터 등을 이용해 힘을 실어 주어야 겠지요. 그럼 받는 쪽은 어떻게 해야 할까요? 위 회로의 좌측이 리더에서 들어온 WIEGAND 신호이고, 우측...
자세한 내용 보기

Orange for Oracle에서 한글 깨짐 해결책

-
NLS_LANG 한글 깨짐 현상 접속은 잘되었는데  SQL 툴을 통하여 조회를 해 보면 한글 부분이 ?? 로 나타나는 현상이 발생하는 경우가 있습니다.  Oracle Server 에서 사용하는 언어와 Orange for Oracle 에서 사용하는 언어가 달라서 발생하는 경우입니다.  이 경우 SQL TOOL 에서  SELECT * FROM v$NLS_PARAMETERS 를 입력하면  NLS_LANGUAGE,  NLS_TERRITORY, NLS_CAHRACTERSET 세가지 값을 알 수 있습니다. Orange -> Tools -> Orange Options -> Common -> Environment -> Client -> NLS_LANG 의 위치에  입력을 하고 저장을 하면됩니다.  제 경우에는 AMEFICAN_AMERICA.KO16KSC5601 로 설정이 되었습니다.  여기까지 실행하면 Orange for Oracle을 정상적으로 사용할 수 있게 됩니다.  출처:  https://gostart.tistory.com/71  [Ogam]
자세한 내용 보기

[UI] GNB·LNB·SNB·FNB 용어 설명

-
이미지
GNB (Global Navication bar) 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴를 가리킨다. 최상위 메뉴로 보통 상단에 위치하고 있다. 메인메뉴라고도 부른다. GNB사진 LNB (Local Navigation Bar) GNB를 누를 경우 소제목 형식으로 나오는 메뉴를 가리킨다. 네비게이션을 통해 특정 지역으로 가는 네비게이션 바이다 LNB 사진 SNB(SIde Navigation Bar) 일반적으로 왼쪽에 많이 있기 때문에 LNB(Left Navigation Bar)라고 부르기도 한다. 메인메뉴와 서브메뉴를 제외한 나머지 사이드 메뉴이다. SNB 사진 FNB (Foot Navigation Bar) 하단 메뉴를 가리킨다. FNB 사진 출처:  https://youngkeol.tistory.com/29  [용고리의 지식상자]
자세한 내용 보기