무하프로젝트

장식자 패턴은 더글라스 아저씨가 만드신 method() 함수에서도 찾아 볼 수 있다.

- javascript decorator pattern:

http://lostechies.com/jimmybogard/2009/01/20/javascript-decorator-pattern/

- 자바스크립트 method() 함수:

http://mohwaproject.tistory.com/archive/201202?page=2

아래 코드는 런타임 시 해당 객체(obj1)에 원하는 기능(method1, method2)을 추가 시킨다.

Observer Pattern

흔히 발행/구독 패턴이라 불리는 이 패턴은 객체의 상태 변화를 관찰하는 관찰자(옵져버)를 객체에 등록(구독)하여, 객체에 상태 변화가 있을때마다 등록된 목록의 관찰자들에게 통지(발행) 하도록 하는 디자인 패턴이다.

쉽게 말해 Broadcast System을 구축할 수 있으며, 각 모듈간의 밀접한 커플링을 조율하여, 모듈의 재사용성을 높인다.

아래 코드는 모든 유저(user1, user2, user3)가 현재 까지 등록(구독)된 유저 현황에 대한 정보를 통지(발행)를 받을 수 있다.

DOM 사용 최소화 하기

노드 조각(document.createDocumentFragment), 노드 사본(elem.cloneNode), 문자 배열([])을 활용한 노드 추가 시 아래와 코드와 같이 DOM 접근을 최소화 하여 비용을 줄일 수 있다.

1. 기본적인 엘리먼트 추가 방법.

function notReflow() {

    var elem = document.getElementById('container');

    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        elem.appendChild(a);
    }

    return false;
}

2. 노드 조각을 활용한 엘리먼트 추가 방법 

function notReflow() {

    var frag = document.createDocumentFragment();

    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        frag.appendChild(a);
    }

    document.getElementById('container').appendChild(frag);

    return false;
}

3. 노드 사본을 활용한 엘리먼트 추가 방법 

function notReflow() {
 
    var elem = document.getElementById('container');
    var clone = elem.cloneNode(true);
 
    for (var i = 0; i < 10; i++) {
        var a = document.createElement('a');
        a.href = '#';
        a.appendChild(document.createTextNode('test' + i));
        clone.appendChild(a);
    }
 
    elem.appendChild(clone);
 
    return false;
}

4. 문자 배열을 활용한 엘리먼트 추가 방법 

function notReflow() {

    var h = [];

    for (var i = 0; i < 10; i++) {

        h.push('test' + i + '');
    }

    document.getElementById('container').innerHTML = h;

    return false;
}

상황별 테스트 결과:

첫 번째 상황: 153ms

두 번째 상황: 136ms

세 번째 상황: 129ms

네 번째 상황: 127ms

- 첫 번째 상황을 제외한 나머지 상황들은 성능 상 큰 차이를 보이지 않았지만, 객체 맴버(조각, 사본)를 사용한 방법보다 엘리먼트 속성인 innerHTML을 활용한 문자 배열 추가 방식이 좀 더 빠른 결과를 가져왔다.

자바스크립트 안티패턴(Antipatterns)의 유형과 사용법.

정의: 

코드 작성 시 문제에 대한 해결책으로 자주 사용되는 패턴이지만 예상치 못한 결과를 가져올 수 있는 패턴이기도 합니다.

또한, 언어에 대한 지식과 경험이 부족한 상황에 더 많은 문제가 발생하곤 하지만, 코드 작성 시 적재적소에 제대로만 사용한다면 코드 가독성 및 성능을 높일 수 있는 많은 방법을 제시하기도 합니다.

1. 암묵적 변수 선언으로 인한 충돌:

전역 변수는 웹페이지 내 모든 코드에서 공유됩니다. 즉, 모든 전역 변수는 동일한 객체(window) 맴버에 생성되기 때문에 목적이 다른 동일한 이름의 전역 변수를 재 정의 시 먼저 정의된 변수를 덮어쓰게 되어 예상치 못한 오류가 발생하게 됩니다.

아래 prototype() 함수 내부의 암묵적 변수 선언(안티패턴)으로 인해 라이브러리 코드의 전역 변수($)가 새로운 객체로 제 정의되어 라이브러리 객체 맴버(setName)에 접근할 수 없게 되었습니다.

2. parseInt() 함수를 통한 형 변환 오류

아래와 같이 parseInt() 함수의 매개변수 생략 시 예상치 못한 결과를 반환합니다.

이유는 parseInt() 함수는 매개변수 생략 시 기본적으로 8진수로 형 변환하여 반환하기 때문입니다.

3. 네이티브 프로토타입 확장

자바스크립트 네이티브 객체인 Object 프로토타입 맴버 확장 시 생성된 모든 객체는 확장 프로토타입 맴버를 모두 상속받게 됩니다.

즉, 생성되 모든 객체는 확장 프로토타입 맴버에 접근할 수 있다는 얘기입니다.

하지만 이 과정을 통해 객체 상속에서의 문제와 같은 여러 가지 예상치 못한 결과가 나올 수 있습니다.

아래는 그에 대한 예제 코드입니다.

4. 여러개의 변수 선언 시 var 생략법

아래 함수와 같은 연속적인 변수 선언 시 var 키워드를 생략하고 쉼표(,)로 구분하여 선언할 시 코드 가독성을 높일 수 있습니다.

즉 쉼표를 변수 앞에 작성하면 변수의 추가/삭제/주석 처리 시 용이 합니다.

5. 순회문

순회문은 카운트를 거꾸로 내려가서 0과 비교하는 것이 배열의 length 또는 0이 아닌 값과 비교하는 것보다 빠르게 수행됩니다.

아래는 순회문의 일반적인 처리를 비교한 결과입니다.

이전 포스트에서 우리는 AJAX 대한 정의와 XHR 객체 맴버에 대해 알아보았습니다.

이번 시간에는 그 내용을 바탕으로 AJAX API 코드를 작성하고 코드에 설명해 드리도록 하겠습니다.

아래는 작성된 AJAX API 전체 소스입니다.

API 실행 함수

API 맴버 설명:

- 호환 가능한 XHR 객체를 가져오는 함수이며, 즉, 브라우저(버전 포함)에 따라 반환되는 객체가 달라집니다.

- 전송 될 데이터 객체를 파라메터 문자열로 직렬화 시키는 함수

- 요청 HTTP Header 정의 함수