XpressEngine
  • INTRODUCE
  • 시작하기
    • 권장 사양
    • 터미널 환경 설치
    • 웹 환경 설치
    • 업데이트
    • 문제 해결(디버깅)
  • 사이트 설정
    • 회원 설정 및 관리
    • 관리자 비밀번호 설정
    • 사이트맵 추가 및 제거
    • 컨텐츠 관리 및 신고 집계
    • Store 토큰 설정
    • 익스텐션 설치 / 업데이트
    • 기본 테마 설정
    • SEO 설정
    • 다국어 설정
    • 캡챠 설정
  • 번들 플러그인
    • 미디어 라이브러리
    • 외부페이지 플러그인
    • 플러그인 업로드
  • 개발자 문서
    • 개요
    • 디렉토리 구조
    • 컴포넌트
    • 플러그인
    • 서비스
    • 라이프 사이클
    • 라우팅
    • 컨트롤러
    • 요청
    • 응답
    • 프레젠터
    • 뷰
    • 템플릿
  • 플러그인 개발
    • 개요
    • 기본경로 및 구조
    • 기본 플러그인 생성
    • 플러그인 정보 추가 및 수정
    • 관리자 사이트 메뉴 추가
    • 위젯 개발/제작
    • 모듈 개발/제작
    • 에디터 제작
    • 에디터 툴 제작
    • UI 오프젝트 제작
    • 토글 메뉴 제작
    • 다이나믹 필드 제작
    • 다이나믹 필드 스킨 제작
  • 테마 개발/제작
    • 기본경로 및 구조
    • 기본 테마 생성
    • 서브 테마 활용
    • 설정 파일 작성
    • 테마 편집 기능
  • 스킨 개발/제작
    • 기본경로 및 구조
    • 기본 스킨 생성
    • 설정 파일 작성
  • 서비스
    • 카테고리
    • 캡챠
    • 설정
    • 문서
    • 키생성(Keygen)
    • 메뉴/모듈
    • 이벤트/인터셉션
    • 파일/스토리지
    • 회원/인증
    • 모바일
    • 권한
    • 데이터베이스
    • 메일
    • 프론트엔드
    • 이미지처리
    • 세션
    • 헬퍼
    • 쿠키
    • UI오브젝트/폼빌더
    • 카운터
    • 휴지통
    • 유효성검사
    • 오류처리
    • 테마
    • 위젯박스
  • 프론트엔드 (JS)
    • 프론트 엔드 JS 시작하기
    • Lang
    • Page
    • Page Modal
    • Request
    • Validator
Powered by GitBook
On this page
  • window.XE
  • EventEmitter
  • XE.app()

Was this helpful?

프론트엔드 (JS)

Previous위젯박스Next프론트 엔드 JS 시작하기

Last updated 6 years ago

Was this helpful?

XpressEngine 3(이하 XE)의 Front-End의 기능 및 동작은 XE 변수에 담겨 있으며, App 및 Event, AOP를 이용할 수 있습니다.

window.XE

window.XE를 노출하고 있으며, XE에서 제공하는 기능이 담겨있습니다.

  • Event를 구독, 트리거 할 수 있도록 EventEmitter를 확장하고 있습니다

  • Request, Router, Lang 등 내장된 App을 사용할 수 있는 상태로 포함하고 있습니다.

    • 각 App은 EventEmitter를 확장하고 있으며, 개별적으로 이벤트를 관리합니다.

  • XE.app() 메소드로 Request 등 등록된 App의 instance를 전달하는 를 반환합니다.

EventEmitter

EventEmitter는 이벤트에 대한 listener를 관리하고 트리거하는데 사용됩니다.

  • $$emit, $$on, $$once, $$off, $$offAll

  • $$on, $$once

    • callback 첫번째 argument는 발생된 이벤트의 이름

  • before 옵션으로 순서를 조정할 수 있습니다.

    • 이름을 가진 listener만 대상으로 할 수 있습니다.

XE.$$on('eventName', /*callback*/(eventName, arg1/*, arg2, ...*/) => {
    console.debug('emitted', eventName, arg1, arg2)
}, options)

XE.$$on('setup', (eventName, arg) => {
    console.debug('emitted', eventName, arg)
}, { name: 'low'})

XE.$$on('setup', (eventName, arg) => {
    console.debug('emitted', eventName, arg)
}, { name: 'common', before: 'low' } )

XE.app()

  • XE Object에 포함되는 모듈은 App을 확장하였으며, Singleton임

  • EventEmitter를 확장하고 있음

  • XE Core에서 다루는 것만을 고려했으므로 외부에서 이를 직접 확장하여 사용하기는 어려울 수 있음

// XE.app()은 Promise를 반환 함

// boot된 instance를 반환
XE.app('Request').then((appRequest) => {
    appRequest.get()
})

// instance를 반환 (아직 boot 되지 않았을 수 있음)
XE.app('Request', (appRequest) => {
    appRequest.get()
})
Promise