| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | http://1 |
| extra_vars4 | ko |
| extra_vars5 | http://faidcy.tistory.com/84 |
| extra_vars6 | sitelink1 |
Code Conventions for the JavaScript Programming Language
본 문서는 Douglas Crockford 의 자바스크립트 코딩 컨밴션과 YUI 공개 컨밴션을 기본 문서로 하여 작성된
자바스크립트 토딩 컨밴션 문서다.
Javascript File (코드 파일)
- 자바스크립트 포르그램은 .js 확장자로 저장
- 특정 세션 또는 페이지 로직을 위한 코드가 아니면 HTML 파일과 별도의 파일로 저장.
- <script src="filename.js> 태그를 <body> 의 최대한 밑부분에 위치시켜야 한다. 이것은 스크립트 로딩/파싱으로 인한
지연을 피할 수 있다. 서버가 MIME type을 정하기 때문에 language 또는 type 속서을 안 써도 된다.
Indetation (들여쓰기)
- 들여쓰기의 기본 단위는 4개의 스페이스이다. 현재까지 탭종료 위치지정에 대한 표준이 존재하지 않기 때문에 탭 쓰기를
피하는 것이 좋습니다. 스페이스를 쓰면 파일 사이즈가 커질 수 있으나 minification 또는 compressor 툴 등을 쓰면 된다.
Line Length (줄 길이)
- 한 라인의 문자수가 80자 이하로 작성하는 것이 좋다. 80자 이상일 경우 다음줄로 넘길 때 연산자 다음으로 넘겨여 한다.
- 콤마가 되로 줄넘기기가 제일 좋다. 다음줄의 8개의 스페이스로 들여쓰기 한다.
Comments (주석)
- 항상 코멘트를 닿을 때 당신의 코드를 이해하고 수정하고 추가해야 하는 사람의 노고를 생각하야 한다.
- 한 눈에 보고 코드의 목적, 흐름, 메인 로직을 쉽게 파악할 수 있도록 작성하는 것이 좋으면 너무 길거나 복잡하면 안된다.
- 약간의 유머가 있으면 더 좋죠^^. 단지 실망시키지 마세요~~ 예를 들면
i = 0; // Set i to zero. 이것이 전혀 쓸때 없는 코멘트이다.
- 기본적으로 라인 코멘트를 사요하고 블럭 코멘트를 문서화나 주석에 사용하세요.
- 알려진 이슈나 기능요청이 있으면 TODO 코멘트 하기
- 실제 production release 또는 실서버에 옮기기 전에 해결해야 하는 코드 부분이 있을 경우 FIXME 코멘트 하기
- 중요한 TODO 일 경우 bug tracker 에 꼭 이슈 티켓을 쓰기
JavaDoc Style Comments
- 자동 문섬 생성 툴은 JavaDoc, JsDoc, JsDoc Toolkit, ScriptDoc, Helma 등으 라이브러리 사용 가능
/**
* The module object is ....
* @module
* @requires
* @optional
* @title
* @beta
* @experimental
*/
/****************************************************************************/
/****************************************************************************/
/****************************************************************************/
/**
* Class is ...
* @description (deprecated?)
* @namespace
* @class
* @method
* @property
* @event
* @uses
* @private
* @public
* @static
* @type
* @constructor
* @param {type} name Remark
* @return
*/
Variable Declarations (변수 선언)
- 모든 변수를 사용하기 전에 선언해야 한다. Javascript 는 이것을 요구하진 않지만 프로그램의 더 이해하기 쉽게 하고
변수가 (Implied)비의도적으로 전역변수(global variable) 될 수 있는 것을 방지할 수 있다.
- var 구문 변수 선언들을 함수 버디의 가장 위부분에 해야 한다.
- 변수들을 각각의 하나의 라인에 alphabetical 순서대로 선언하고 코멘츠를 달아주는 것이 좋다.
- 전역변수 사용을 되도록 최소화하고 비의도적의 전역변수의 사용을 금지
Variable Type Prefixes
aFoo array
dtFoo date
eFoo error
elFoo HTML element
doFoo function related to the fooEvent handler, which may be called separately or overridden
fnFoo function
nFoo number
oFoo object
onFoo function to handle fooEvent
sFoo string
xFoo regular expression
isFoo boolean also hasFoo, useFoo, or bFoo
Suffixes
fooEvent event fired when Foo happens
Coding Tools
- syntax 또는 symantic 체크를 Javascript Lint(http://www.javascriptlint.com/) 같은 validation 툴을 쓴다.
Function Declarations (함수 선언)
- 모든 함수 선언 사용전에 해야 한다. inner 함수는 var 구문 뒤에 한다. 이것은 함수 scope 에 어떤 변수들이 있는지를 명확하게 해 준다.
- 함수의 이름과 왼쪽 파라미터 소괄호 "(" 사의에 공백이 있으면 안된다.
- 오른쪽 파라미터 소괄호 ")" 와 함수 버디 구문의 시작인 왼쪽 중괄호 "{" 사의에 1개의 스페이스를 둔다.
- 버디는 4개의 스페이스으로 들여쓰이고 버디 닫는 "}" 중괄호는 함수 시작 리안과 마춰야 한다.
function outer(c, d) {
var e = c * d;
function inner(a, b) {
return (e * a) + b;
}
return inner(0, 1);
}
- 자바스크립트에서 함수와 오브젝트 리터럴이 표현식(expression)이 허용되면 어디서나 쓰여질 수 있기 때문에 이 컨벤션은 잘 맞는다.
inline 함수와 복잡한 구조에도 좋은 가독성(readability)를 제공한다.
function getElementsByClassName(className) {
var results = [];
walkTheDOM(document.body, function (node) {
var a; // array of class names
var c = node.className; // the node's classname
var i; // loop counter
// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.
if (c) {
a = c.split(' ');
for (i = 0; i < a.length; i += 1) {
if (a[i] === className) {
results.push(node);
break;
}
}
}
});
return results;
}
- 만약에 함수 리터럴이 anonymous(익명)일 경우 "funciton" 단어와 왼쪽 "(" 관호 사이에 역시 1개의 스페이스를 둔다. 스페이스가 빠지면
"function" 란 이름의 함수로 혼될 수 있어서 가독성이 떨어진다.
div.onclick = function (e) {
return false;
};
that = {
method: function () {
return this.datum;
},
datum: 0
};
- 전역 함수의 사용을 최소화 해야 한다.
Names (이름)
- 함수, 변수 등의 이름이 26개의 대소문자 (A .. Z, a .. z), 10개의 숫자 (0 .. 9)와 _ (underbar) 으로 구성되어야 한다.
국제문자 또는 $ (dollar sign), (backslash) 등의 특수문자의 사용금지
- 이름의 첫번째 문자로 _(underbar) 를 사용 금지. 이는 가끔 private 변수로 사용되지만 실제로 private 이지 못한다.
- 일반적으로 변수와 함수가 소문자로 시작되어야 된다.
- new 접두어와 같이 사용되는 생성자 함수는 대문자로 시작된다. 자바스크리트는 new 누락시 compile-time warning 또는
run-time warning 을 주지 않기 때문에 안 좋습니다.
- 전역 변수일 경우 모두 대문자로 쓴다
Statements (구문)
Simple Statements (단순)
- 모든 단순 구문의 끝에 ; (semicolon) 을 붙인다. 함수 리터럴 또는 오브젝트 리터럴을 할당(assignment) 하는 구문도 할당구문이며 semicolon 으로 끝나야 한다는 것을 주의해야한다..
- 자바스크립트에서 모든 표현식을 구문으로 쓸 수 있기 때문에 semicolon으로 끝난 구문과 끝나지 않은 구문과 혼동될 수 있다.
이것을 방지하기 위해 단지 할당 표현식과 호출 표현식을 구문으로 인식하고 뒤에 semicol을 붙인다.
Compound Statements (혼합 구문)
- 혼합 구문은 { } 중괄호 안에 여러 개의 구문을 포함하는 구문이다.
- 혼합 구문안의 구문들은 추가 4개의 스페이스으로 들여씌여야 한다.
- 왼쪽 "{" 중괄호는 구문 시작줄의 끝에 있어야 한다.
- 오른쪽 "}" 중괄호는 새 줄에 쓰이며 구문 시잘줄의 시작과 들여쓰기 마춰져야 한다.
- 혼합 구문이 단 1개의 구문을 포함하고 있더라고 "{ }" 중괄호로 둘러쌓는 것이 좋다. 예를 들면 만약 if 구문이 중괄호 없으면 나중에 구문을 더
추가시 오류를 발생시킬 수 있다
Labels
- 구문 라벨을 선택사항이고 while, do, for, switch 구문에서만 사용될 수 있다
return Statement (반환 구문)
- return 구문에서 반환되는 변수 또는 값을 ( ) 소괄호로 둘러쌓으면 안 된다. 반환 표현식은 return 과 같은 줄에서 시작되야 한다.
if Statement
- if 형태의 구문들의 다음과 같은 형식을 취한다.
if (condition) {
statements;
}
if (condition) {
statements;
} else {
statements;
}
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
for Statement
- for 형태의 구문들의 다음과 같은 형식을 취한다.
for (initialization; condition; update) {
statements;
}
for (variable in object) if (filter) {
statements;
}
- 첫째 형식은 array 에서 사용되어야 하고 정해진 수의 반복을 해야 한다.
- 둘째 형식은 오브젝트와 사용된다. 오브젝트의 prototype에 추가되는 멤버들과 실제 오브젝트의 멤버들을 구별하기 위해
hasOwnProperty 메소드를 사용하는 것이 바람직하다.
for (variable in object) if (object.hasOwnProperty(variable)) {
statements;
}
while Statement
- while 형태의 구문들의 다음과 같은 형식을 취한다.
while (condition) {
statements;
}
do Statement
- do 형태의 구문들의 다음과 같은 형식을 취한다.
do {
statements;
} while (condition);
- 다른 혼합 구문들과 달리 do 구문은 항상 ; (semicolon) 으로 끝난다.
switch Statement
- switch 형태의 구문들의 다음과 같은 형식을 취한다.
switch (expression) {
case expression:
statements;
default:
statements;
}
- case 는 들여쓰기 필요없기 때문에 switch 가 맞춰져야 한다.
- default 를 제외한 모든 statement가 break, return 또는 throw로 끝나야 한다. fall through 하지 말 것.
try Statement
- try 형태의 구문들의 다음과 같은 형식을 취한다.
try {
statements;
} catch (variable) {
statements;
}
try {
statements;
} catch (variable) {
statements;
} finally {
statements;
}
continue Statement
- continue 구문으로 되도록 사요하지 말아야 한다. 이것은 함수의 로직흐름을 애매모호하게 만들기 때문이다.
Whitespace
- 공백줄이 로직적으로 관련된 코드 섹션들을 분리해주고 가독성을 높인다.
- 공백 스페이스는 다음과 같은 상황에서 쓰인다:
- keyword의 뒤에 왼쪽 "(" 소괄호가 있는 경우 1개의 스페이스으로 분리한다. 이것은 함수 호출과 keyword 호출을 구별하는데 도움이 된다.
while (true) {
- . (점)과 "(" 외쪽 관호와 "[" 대괄호를 제외한 모든 binary 연산자들은 피연산자와 1개의 스페이스으로 분리되어야 한다.
- 또는 typeof 같은 unary 연산들을 제회한 모든 unary 연산자들은 피연산자과의 사이에 스페이스가 없어야 한다.
- for 구문의 제어부분에 들어가는 각 구문은 ; (semicolon) 으로 끝나고 중간사이에 1개의 스페이스가 들어간다.
- 모든 , (comma) 콤마 뒤에 공백이 붙어야 한다.
Bonus Suggestions
{} and []
- 오브제트를 생성할 때 {} 대신에 new Object() 를 사용하다.
- [] 대신에 new Array() 를 사용
- 멤버들의 이름이 순차적일 경우 array 를 사용하다.
- 멤버들의 이름이 의미의 string 일 경우 object 를 사용하다.
, (comma) Operator
- 콤마 연산자의 사용을 for 구문의 제어부분에서의 정말 규칙적인 사용을 제외하여 되도록 피해야 한다.
(이것은 object 리터럴, array 리터럴, var 구문과 파라미터 목록 등에서 쓰이는 comma seperator 에 적용되지 않는다. )
Block Scope
- 자바스크립트는 블럭은 scope 가 없고 유일하게 함수는 scope 를 가지고 있다. 혼합구문에서 사용되는 경우 말고는 블럭을 쓰지 말 것.
Assignment Expressions
- if 와 switch 구문의 제어부분에 할당을 하지 말아야 한다. if (a = b) { 를 의도한 것인지 if (a == b) { 를 의도한 것인지를 구별할 수 없다.
=== and !== Operators
- 연산자 == 와 != 들은 변수의 타입 체크를 하지 않기 때문에 되도록 === 와 !== 연산자 사용을 추천한다.
Confusing Pluses and Minuses
- a+ 뒤에 + 또는 ++ 를 붙이지 말아야 한다. 이것은 혼동을 유도한다.
total = subtotal + +myInput.value; 를 total = subtotal + (+myInput.value); 으로 더 파악하기 쉽게 쓸 수 있다.
eval is Evil
- eval 함수는 자바스크립트에서 가장 많이 잘 못 쓰이는 기능이다. 피해야 한다.
- eval 는 aliases 를 갖고 있다
- 절대 Function 생성자를 쓰지 말 것
- 절대 setTimeout 또는 setInterval 함수에 string 을 넘기지 말 것.
참고:
1. Code Conventions for the JavaScript Programming Language (http://javascript.crockford.com/code.html)
2. Conventions (http://code.google.com/p/yazaar/wiki/Conventions)
Write By : CHULUUNKHUUENKHCHULUUN (엥흐촐론)