JAVASCRIPT

Getting Started

JAVASCRIPT에서는 HOMEWORKS 컴포넌트 사용방법에 대해 안내합니다.

Component

HOMEWORKS에서 앞으로 거론 될 컴포넌트라는 용어는 여러분이 일반적으로 사용하는 자바스크립트 라이브러리입니다.

• 컴포넌트 라이브러리는 아래와 같은 특징을 같습니다.

• 컴포넌트를 사용하신다면 여러분은 HTML 요소에 부가적인 효과나 기능을 입힐 수 있습니다.

• 컴포넌트는 기본적으로 페이지가 로딩될 때 한번 자동 적용됩니다,

• 만약 여러분이 리엑티브를 지원하는 프레임워크나 AJAX를 통한 비동기 호출을 사용할 경우

• 추가되는 엘리먼트에 한해 다시 업데이트를 하거나, 디렉티브(Directive)를 제공해줘야 합니다.

• 각각의 컴포넌트는 구분자(ID)를 갖습니다. 이 구분자는 중복 될 수 없습니다.

• 각각의 컴포넌트는 다양한 패턴으로 표현될 수 있습니다. 패턴은 다음 섹션을 참고해주세요.

Patterns

• HOMEWORKS에서 제공하는 컴포넌트는 아래와 같은 패턴으로 사용합니다.

1. jQuery plugin expression.

   // 각각의 element 요소들마다 component를 적용.
   $(element).component(arg1, arg2, arg3 ...);
   

2. jQuery method expression.

   // 각각의 element 요소들마다 component의 특정 method를 적용.
   $(element).component('{method name}', arg1, arg2, arg3 ...);
   

3. Pure function expression.

   // 각각의 element 요소들마다 component를 적용.
   component(element, arg1, arg2, arg3, ...);
   

4. Pure function method expression.

   // 각각의 element 요소들마다 component 하위 method를 적용.
   componentMethod(element, arg1, arg2, arg3, ...);
   

View Hook

Overview

• HOMEWORKS는 직관적인 바인딩을 위해 훅(HOOK)을 사용합니다.
• 실제로 HOMEWORKS 내부 로직을 살펴보면 아래와 같은 HOOK 요소가 있습니다.

// 버튼 Material Ripple 설정
(function (target, value) {
    this.ripple({
        theme: value
    });
}).hook('ripple');

• 위 코드에서 hook('ripple')의 의미는 data-ripple attribute를 가진 엘리먼트 요소에 대하여,
• 특정한 함수와 연결을 정의하는 부분입니다.
• 이때, hook은 찾은 엘리먼트 대상을 연결할 함수의 this로,
• data-pen attribute의 셀렉터에 해당하는 엘리먼트를 첫번째 인수로 전달합니다.
• 또한 연결된 data-attribute의 value에 해당하는 부분을 두번째 인수로 전달하게 됩니다.

예를들어

<a href="#" class="btn" data-ripple="dark" data-pen=".box">RIPPLE</a>
<div class="box">BOX</div>

위와 같은 HTML에서 HOOK으로 전달되는 매개변수는 각각 아래와 같이 됩니다.

this -> a.btn<jQuery>
----
arg 1 -> div.box<jQuery>
arg 2 -> dark<string>
arg 3 -> Extra arguments<undefined>

이는 아까 보여드렸던 HOOK Function에 전달되게 됩니다.

// 버튼 Material Ripple 설정
(function (target, value) {
    // this -> a.ripple <jQuery>
    // target -> div.box <jQuery>
    // value -> dark <string>
    this.ripple({
        theme: value
    });
}).hook('ripple');

Description

• VIEW HOOK은 HOMEWORKS에서 제공하는 View 바인딩 기법으로
• 처음에는 그 구조가 난해하실 수 있으나 JAVASCRIPT를 사용할 필요없이 HTML로 그 기능을 제공할 수 있어,
• 보다 직관적인 웹 개발을 하실 수 있습니다.
• HOMEWORKS에서 해당 컴포넌트에 대한 매개변수를 전달받는 용도로는 HTML5 data-attribute를 사용하고 있고
• 자세한 Attribute 명세는 아래와 같습니다.

• data-{component}: 해당 컴포넌트에 Hooking 합니다 Attribute랑 매칭되는 컴포넌트에 반영됩니다.
• data-{pen}: 대상 Element에 대한 매개변수가 필요할 때 이용합니다. CSS Query String을 명시합니다.

Dependencies

HOMEWORKS JAVASCRIPT는 jQuery에 의존을 갖습니다.

만약 여러분이 jQuery를 사용하지 않는다면 아래 jQuery를 추가하셔야 합니다.

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

License

HOMEWORKS 프레임워크는 IGAWorks에서 모든 권리를 갖습니다.

해당 프로젝트는 Private로 관리되기 때문에,

Docs 수정 및 2차 배포, 소스 사용여부를 포함하여 IGAWorks 관련 프로젝트 외 일체 사용을 금합니다.

이 라이센스는 추후 Public으로 변경되는 것에 따라 변경 될 수 있습니다.