JavaScript 기본 코딩 패턴

1. 변수 정의
//일반적인 작성 방법
var a = 0;
var b = 1;
var c = 'xxx';

// 권장 쓰기 방법
var a = 0,
b = 1,
c = 'xxx';

2. 리터럴을 사용해 보세요

//일반 쓰기
var obj = new Object();
               obj.a = 'aa'; 
        obj.b = 'bb';

// 추천 작성
var obj = {
a: 'aa',
b: 'bb'
};

var arr = [];

function getXX(index){
return ['aa', 'bb', 'xx', 55, 'xxb'](index);
}

function getMessage(code){
return {
404 : 'xxx',
500: 'xxx'
}[code];
}

3. 일반 리터럴

var regex = new RegExp('someting' );

// 정규 표현식이 변경될 수 있는 경우에만 생성자를 사용하세요.

var cls = 'someclass' ,
regex = new RegExp(cls + '\s*', 'ig') ; // 동적 정규식에만 해당

// 그 외의 경우 리터럴 사용
var regex = /someting /ig;
　
4. 기본값 설정(개인적 느낌)

// 기본값
var arg = arg || 'default'; // fallback

document.getElementById('test').onclick = function(event){
var 이벤트 = 이벤트 || window.event;
};

function getX(a){
return a+1 || 'default';
}
< ;BR>function getY(b){
Return typeof b !== "undefine" ? b : 'default';
}

5. // 조건
답변 = obj && obj.xx && obj.xx.xxx;

// 연속판단

if(obj && obj.xx && obj.xx.xxx){

// 뭔가를 하세요
}

if(obj.xx){
// 뭔가를 하세요
}

if(!obj){
// 뭔가를 하세요
}

// 합치 판단을 사용하세요
if(a === b){
// 뭔가를 하세요
}

// 시도하지 마세요 브라우저를 감지하려면 사용할 기능이
if(document.getElementById){
// 기능 감지
}
　
6. >// 삼항
check ? value1 : value2;

// 삼항 연산자가 더 간결합니다
var foo = (조건) ? value1 : value2;

function xx() {

if(조건){
반환 값1;
}else{
반환 값2;
}
}

함수 xx(){
반환 (조건) ? value1 : value2;
}

// 삼항 연산자 형식 지정
foo = predicate ? "one" :
predicate ? "two" :
"default"; // 형식
　
7. 반복 값 삽입

// 반복 삽입
var name = value[i];
i++;

//
var name = value[i++];

　

8. DOM 작업

// DOM 작업
el.style.display = 'none' // 오프라인
// 작업
el.style.display = 'block';

/ / 더 나은 작동을 위해 문서 조각화 사용 www.2cto.com

var 조각 = document.createDocumentFragment() ; // 더 좋음

el.innerHTML = ''; // 모든 하위 항목을 빠르게 제거하지만 메모리 누수가 발생할 수 있음
el.innerHTML = 'xxx' // 좋습니다.

// NodeList를 주의해서 다루세요
var Images = document.getElementsByTagName('img'); // 동적 목록에 주의하세요
　
9. 이벤트 프록시 사용 외부 요소의 이벤트를 수신하는 프록시
document.getElementById('list').onclick = function(evt ){
var evt = evt || window.event,
target = evt.target || evt.srcElement;

if(target.id === 'btn1'){
             // 뭔가를 하세요
  }

}

　
10.

// 네임스페이스로서의 객체
var MYAPP = {};
MYAPP.dom.get = function(id){};
MYAPP.style.css = function(el, style) {};

MYAPP.namespace('event');
　
11. 연결 작업

// 연결 작업: return this
function setValue(el, value ){
el.value = value;
return this;
}

var obj = new MYAPP.dom.Element('span');
obj.setText( ' hello')
.setStyle('color', 'red')
.setStyle('font', 'Verdana');
　
12. 비공개 범위

// Function
(function(){
var _private = 'cant see me';

})();

(function($){
$ (' #xxb').click(function(){ });
})(jQuery);
　
13. 객체 구성

// 객체 구성
function foo(id , conf, null , null){
// 뭔가를 합니다
}

foo('bar', {
key1 : 1,
key2 : 2
}) ;
　
14. 유형 변환

// 유형 변환
+'010' === 10;
숫자('010') === 10;
parseInt('010', 10) === 10;
10 + '' === '10';

+new Date() // 타임스탬프
+new Date
　
15. 확장된 프로토타입

// 상위 호환성이 필요한 경우에만 사용하세요. 그 외의 경우에는 프로토타입 객체를 확장하지 않는 것이 좋습니다.
Array.prototype.forEach = function(){
// 상위 호환에만 해당
};
　
16. 루프 최적화

// 캐시
for(var i=0, j = document.getElementsByTagName(' a' ).length; i--){
// 아마도 더 빠를 것입니다
}

// 가장 빠르다고 합니다
(i--){
// 어쩌면 가장 빠를 수도 있습니다
}
　
17. 새로운 특수 new

Array.forEach();
getElementsByClassName();
querySlectorAll();

// 먼저 새로운 기능이 지원되는지 확인하세요. 사용 가능한 경우
if(document.getElementsByClassName){
// 사용
}else{
/ / 구현
}

18. 지연 로딩

// 한 번만 판단하고, 함수를 다시 호출할 때는 판단할 필요가 없습니다.
functionlazyDef(){
if (조건1){
lazyDef = function( ){ };
}else if(condition2){
     lazyDef = function(){ };
  }
    returnlazyDef(); 공개 메소드

var MYAPP = {};

MYAPP.dom = (function(){

var _setStyle = function(el, prop, value){
console ) . log('setStyle');
};

return {
setStyle: _setStyle
};
})();

// 언제 MYAPP 언제 .dom.setStyle이 실수로 덮어씌워졌습니다. _setStyle은 내부적으로 계속 사용할 수 있습니다
　
20. 디버깅

// 최대한 많이 사용해 보세요. 여러 매개변수를 전달하고 최종적으로 연결된 문자열
console.log('xx','xx','...');

console.dir(someObj);

console.dirxml(someDom);
console .time('timer');
console.warn('xxx');

// 캡슐화를 사용하면 실수로 릴리스되어도 문제가 발생하지 않지만 보고할 때 줄 번호에 문제가 있을 수 있습니다. 오류
function msg( msg){
if(console && console.log){
console.log(msg) // 잘못된 줄 번호
}
}