ComponentHelper(Prototype this)

Summary

컴포넌트 개발에 필요한 헬퍼도구 프로토타입.

개발 최적화를 위해 사용을 권장합니다.

사용예시

var context = '<p>Hello HomeWorks!</p>';
// _this.data.$helper는 ComponentHelper의 참조변수 입니다.
// parseTemplate 도구는 templates를 전달한 object와 매핑하여 html로 반환해줍니다.
var $html = $(_this.data.$helper.parseTemplate('template', {
    context: context
}));
$html.appendTo('body');

Parameters

Prototype this

ComponentHelper는 ComponentMethod의 하위 프로토타입입니다.

ComponentMethod가 초기화 될 때 ComponentHelper를 호출하며 이를 ComponentData에 배치합니다.

ComponentMethod에서 ComponentHelper에 접근 할 수 있으며, this.data.$helper를 통해 접근합니다.

Structures

promise([String namespace,] Function callback, Number time)

promise는 프레임워크 네임스페이스 안에서 특정한 이름으로 setTimeout을 생성해줍니다.

3개의 인수를 사용하여 Promise 이름, 콜백, 타임을 전달하지 않고,

2개의 인수로 콜백, 타임만을 전달 할 경우 Promise 이름으로 컴포넌트 구분자를 사용합니다.

이렇게 호출한 Promise는 time 이후 callback 호출합니다.

모든 Promise는 _ps라는 HomeWorks Closure 변수로 관리됩니다.

Promise가 시간이 되어 Callback을 실행하면, Promise 리스트에서 자동적으로 삭제됩니다.

사용예시

// 컴포넌트 구분자를 Promise 이름으로 사용.
_this.data.$helper.promise(function () {
    // 5초뒤에 이 영역이 실행됩니다.
    alert('Hello HomeWorks!');
}, 5000);

// 특정 인수를 Promise 이름으로 사용.
// sample이라는 이름의 Promise를 생성합니다.
_this.data.$helper.promise('sample', function () {
    // 5초뒤에 이 영역이 실행됩니다.
    alert('Hello HomeWorks!');
}, 5000);

invoke(String namespace)

promise를 도중에 취소하기 위한 도구입니다.

마찬가지로 특정 네임스페이스 내의 Promise 이름과 매칭되는 promise를 해제합니다.

사용예시

// 컴포넌트 구분자로 지정된 Promise를 해제합니다.
_this.data.$helper.invoke();

// 특정 인수를 Promise 이름으로 사용.
// sample이라는 이름의 Promise를 해제합니다.
_this.data.$helper.invoke('sample');

log(String message, Number code)

에러 메시지와 코드를 console.warn() 형태로 출력합니다.

HomeWorks 내부 로그는 이 헬퍼도구를 이용하여 출력됩니다.

사용예시

this.data.$helper.log('An error message', 500);

parseTemplate(String templateName, Component templateMapper)

ComponentMethod에서 정의한 템플릿을 파싱하여 불러옵니다.

사용예시

// 이 예제는 ComponentMethod를 포함하기 때문에 다소 길수가 있습니다.
// 하지만 실제 사용하는 로직은 아래와 같으므로 이 로직을 기억해주시기 바랍니다.
_ws.component = new ComponentMethod('component', {
    // init은 컴포넌트를 호출 할 때 자동으로 실행되는 함수입니다.
    init: function(element, options) {
    // this는 ComponentMethod의 Prototype 참조변수입니다.
        var _this = this;
        var $template = $(_this.data.$helper.parseTemplate('template', {
            componentName: _this.data.id, // _this data는 ComponentData이며, id 값은 컴포넌트 구분자입니다.
            context: '<p>Hello HomeWorks!</p>'
        }));
        $template.appendTo(element);
    },
    templates: {
        template: '<div class="template template-{componentName}">{context}</div>'
    }
}

// 위 로직까지가 ComponentMethod 정의부분 입니다.
// '정의부분'이기 때문에 정의된 부분을 사용하는 '호출부분'이 필요합니다.

// 아래는 호출부분 입니다, 이 로직은 상당히 많이 사용하니 기억해주세요.

//jQuery 클로저
$(function() {
    (function(element, attr) {
        // element는 data-component 어트리뷰를 사용하는 각각의 엘리먼트가 전달됩니다.
        // attr은 data-component의 값이 전달됩니다.
        // 다만 attr이 false로 지정되있다면 이 함수 대상에 ignore 처리됩니다.
        // 정의부분에서 정의했던 component라는 이름의 컴포넌트를 사용합니다.
        element.component();
    }).hook('component');
});

위 코드는 아래와 같은 HTML 구조에서 사용할 수 있습니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>parseTemplate Sample</title>
    </head>
    <body>
        <!-- 이 전에 hook('component') 에서 지정한 component는-->
        <!-- data-component 속성을 가진 아래 엘리먼트를 잡아냅니다.-->
        <div data-component="true"></div>
    </body>
</html>

위 코드를 브라우저에서 실행하면 아래와 같이 작동됩니다.

<!DOCTYPE HTML>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>parseTemplate Sample</title>
    </head>
    <body>
        <!-- 이 전에 hook('component') 에서 지정한 component는-->
        <!-- data-component 속성을 가진 아래 엘리먼트를 잡아냅니다.-->
        <div data-component="true">
            <div class="template template-component"><p>Hello HomeWorks!</p></div>
        </div>
    </body>
</html>

// 결론적으로 parseTemplate는 ComponentMethod에서 정의한 template을
// 매핑 Component에 맞게 파싱하여 HTML로 반환해줍니다.
var $template = $(_this.data.$helper.parseTemplate('template', {
    componentName: _this.data.id, // _this data는 ComponentData이며, id 값은 컴포넌트 구분자입니다.
    context: '<p>Hello HomeWorks!</p>'
}));

bind(Component element, String eventName, Function Callback, Boolean immediateExpression)

이 도구는 HTML 엘리먼트에 이벤트를 연결해주는 역할을 합니다.

jQuery의 bind 함수와 기능이 유사하지만 아래와 같은 차이점으로 이 도구를 권장합니다.

bind 도구의 장점

이벤트를 컴포넌트 네임스페이스 단위로 묶을 수 있습니다.

이벤트를 정의와 동시에 실행시킬 수 있습니다.

커스텀 트리거의 extra를 자동으로 event에 병합해줍니다.

사용예시

// 사용방법은 간단합니다.
// 아래는 $element로 엘리먼트를 하나 변수에 할당하고,
// 그 엘리먼트에 click 이벤트를 연결하는 로직입니다.
var $element = $('.btn');
this.data.$helper.bind($element, 'click', function() {
    // .btn 엘리먼트를 클릭하면 이 로직이 실행됩니다.
    alert('Hello HomeWorks!');
});

네임스페이스

// 아래는 jQuery bind의 예시입니다.
$(document).bind('click', function() {
    somemodal.close();
    // document 클릭이후 목적에 달성하였으니 해당 이벤트를 해제합니다.
    $(this).unbind('click');
    // 여기서 문제가 하나 발생했습니다.
    // document 같은 공통으로 많이 접근하는 엘리먼트에 click을 해제하면
    // 이 엘리먼트의 모든 click 엘리먼트가 해제됩니다.
    // 다른 플러그인이 만약 이 엘리먼트에 이벤트를 연결하였더라도
    // 그 연결이 해제되어 충돌이 발생할 수 있습니다.
});

// 아래는 jQuery bind의 예시입니다.
this.data.$helper.bind($(document), 'click', function() {
    somemodal.close();
    // 헬퍼 도구를 사용하면 이런 문제에서 안전합니다.
    this.data.$helper.unbind($(document), 'click');
});

즉시 실행

// 우리는 툴팁 컴포넌트가 필요합니다.
// 툴팁은 엘리먼트를 클릭해도 나타나지만, 처음에 한번은 무조건 보여집니다.
// 이럴 때는 보여지는 함수를 하나 만들어 이벤트에 연결 시키고
// 함수를 바로 실행하는 구문을 추가하면 되지만
// 가독성이 떨어지며 불필요한 코드 라인이 추가됩니다.
this.data.$helper.bind($('.tooltip-btn'), 'click', function() {
    sometooltip.open();
}, true);
// bind 도구의 마지막 인수를 true로 지정하면 연결된 이벤트가 먼저 한번 실행됩니다.

Extra 병합

// 때로는 Event를 전달받는 측이 추가 정보를 원하거나
// 기본 이벤트를 조작할 필요가 있습니다.
// 아래는 버튼을 클릭하면 클릭한 위치에 툴팁이 나타납니다.
this.data.$helper.bind($('button'), 'click', function(event) {
    sometooltip.open().move({
        x: event.offsetX,
        y: event.offsetY
    });
});


// 다른 컴포넌트에서 동적으로 추가되는 버튼에도 위와 같은 동작을 연결하고 싶습니다.
var _this = this;
var $btn = $('<a href="#" class="btn">Click Me</a>');
_this.data.$helper.bind($btn, 'click', function(event) {
    // triggerHandler 도구는 세번째 인수로 extra를 넘깁니다.
    // 이때 extra는 bind 도구에서 자동으로 자신의 event에 병합시킵니다.
    _this.data.$helper.triggerHandler($('button'), 'click', event);
});

unbind(Component element, String eventName)

unbind 도구는 bind 도구로 연결 시킨 이벤트를 해제할 때 사용됩니다.

사용예시

// .btn 엘리먼트에 해당 컴포넌트의 click 이벤트를 해제합니다.
this.data.$helper.unbind($('.btn'), 'click');

trigger(Component element, String eventName, Var extras)

trigger는 이벤트를 강제적으로 실행 할 때 사용됩니다.

아래 triggerHandler 도구와 차이점은 trigger는 실제 native 이벤트 까지 호출합니다.

사용예시

// .btn 엘리먼트에 해당 컴포넌트의 click 이벤트를 실행합니다.
this.data.$helper.trigger($('.btn'), 'click');

위 사용 법은 컴포넌트 내에서 ComponentHelper의 bind로 연결한 이벤트만 정상적으로 호출됩니다.

그 이유는 특정 네임스페이스 내에 선언된 이벤트만을 호출하기 때문입니다.

일반적인 전역 이벤트를 실행시키고자 한다면 아래와 같이 호출하시기 바랍니다.

// .btn 엘리먼트에 해당 컴포넌트의 click 이벤트를 실행합니다.
// 세번째 인수를 true 설정하면 이벤트를 전역적으로 호출할 수 있게 합니다.
this.data.$helper.trigger($('.btn'), 'click', true);

triggerHandler(Component element, String eventName, Var extras)

triggerHandler는 trigger 도구와 달리 이벤트를 가상으로 호출합니다.

나머지 파라미터 규칙은 trigger 도구와 동일합니다.

사용예시

// .btn 엘리먼트에 해당 컴포넌트의 click 이벤트를 실행합니다.
this.data.$helper.triggerHandler($('.btn'), 'click');

ComponentHelper

ComponentHelper(Prototype this)

Summary

Parameters

Structures

results matching ""

No results matching ""