FLOW

HOMEWORKS COMPONENT 처리 순서는 아래와 같습니다.

Component Call

• COMPONENT를 호출하는 모든 방법을 의미합니다.
• 호출방법에 대한 패턴은 JAVASCRIPT > Patterns에서 확인하실 수 있습니다.

View Hooks

• 리액티브 개발을 위한 뷰와 컴포넌트 연동을 위한 작업입니다.
• View Hook에 대한 자세한 설명은 JAVASCRIPT > View Hook에서 확인하실 수 있습니다.
• View Hook에 바인딩 된 엘리먼트가 확인되면, 컴포넌트 호출(Component Call)이 발생합니다.

Fetch

• 초기 문서가 로드 된 후 View Hook은 한번만 발동됩니다.
• 비동기 웹 서비스를 제공하는 경우, 통신이 완료 된 후 문서가 변경 될 수 있습니다.
• 이때 추가되거나 변경된 엘리먼트에 대해서 View Hook을 제공하기 위해서는, Fetch를 사용해야 합니다.
• Fetch는 새로 추가된 엘리먼트에 대해서 View Hook을 적용합니다.

bindFunc

• 컴포넌트가 호출된 경우 bindFunc에 전가됩니다.

• bindFunc는 호출 패턴을 체크합니다, 조건은 아래와 같습니다.

  • Route 처리단계로 이동.

    1. jQuery 컴포넌트 호출방식 init 호출.

       $(element).component();
       

    2. jQuery 메소드 호출방식 method.init 및 method.[method name] 호출.

       $(element).component('method name');
       

    3. window 컴포넌트 호출방식.

       component();
       // or
       method();
       

  • 메소드 직접 호출 $(element).method(args).

    $(element).method();
    

Route

• bindFunc에서 넘어온 호출패턴을 분석하여 컴포넌트를 실행합니다.
• jQuery 호출패턴과, window 호출패턴(전역 함수실행)을 비교하여 분기합니다.