[번역] Sencha 응용 프로그램 에서 플러그 인과 혼입 을 사용 합 니 다.
개술
프레임 워 크 클래스 의 기능 을 확장 할 때 새로운 기능 을 파생 클래스 에 직접 기록 합 니 다. 그러나 같은 기능 이 여러 구성 요소 에 존재 한다 면 가장 효과 적 인 방법 은 플러그 인 이나 혼합 으로 정의 하 는 것 입 니 다.플러그 인과 혼합 은 다른 종류의 클래스 에 추가 기능 을 추가 하 는 데 사 용 됩 니 다.본 고 는 이러한 종류 가 무엇 인지, 그들 간 의 차이, 그리고 그들 이 어떻게 일 하 는 지 를 소개 할 것 이다.Sencha Fiddle 에서 우 리 는 이러한 개념 을 보 여 주 는 예 를 준비 했다.
플러그 인 은 무엇 이 며 어떻게 사용 합 니까?
플러그 인 은 Ext. Component (또는 Ext. Component 에서 태 어 난 클래스) 에 기능 을 추가 하거나 수정 하 는 클래스 입 니 다. 다른 클래스 와 마찬가지 로 플러그 인 은 Ext. define 방법 으로 정의 하고 Ext. plugin. Abstract 로 확장 합 니 다.
// Simple example showing how to define a plugin// extending form Ext.plugin.Abstract
Ext.define('Fiddle.plugin.SamplePlugin', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.sampleplugin',
init: function (cmp) {
this.setCmp(cmp);
}});재 미 있 는 것 은 구성 요소 의 구조 함 수 를 통 해 구성 요소 가 렌 더 링 되 기 전에 호출 되 어야 하기 때 문 입 니 다.플러그 인 은 구성 요소 의 "pulugins" 설정 항목 을 통 해 참조 하고 설정 할 수 있 습 니 다. 사용자 정의 구성 요소 의 원본 정의 클래스 주체 내 [예제] 또는 초기 화 기간 의 설정 대상 내 [예제] 설정 을 할 수 있 습 니 다.Ext. plugin. Abstract 의 확장 으로 플러그 인 을 만 들 때 기본적으로 init, destroy, enable, disable 네 가지 방법 을 받 습 니 다.이 방법 들 을 어떻게 효과적으로 사용 할 수 있 는 지 소개 한다.
init
방법 init 는 플러그 인의 입구 입 니 다.구성 요소 가 렌 더 링 되 기 전에 구성 요 소 를 삽입 하고 구성 요소 와 대화 할 수 있 도록 합 니 다.이 단계 에서 플러그 인 은 플러그 인 정의 방법 이 쉽게 인용 할 수 있 도록 클 라 이언 트 구성 요소 의 인용 을 저장 해 야 합 니 다.Ext. plugin. Abstract 는 이 플러그 인 을 사용 하 는 구성 요 소 를 참조 하 는 두 개의 접근 기 방법 을 제공 합 니 다.
방법 getCmp 는 특히 중요 합 니 다. 플러그 인과 그 방법 은 플러그 인의 역할 영역 범위 내 에서 작 동 하기 때 문 입 니 다. 즉, this 는 플러그 인 구성 요 소 를 사용 하 는 것 이 아니 라 플러그 인 자체 를 참조 합 니 다.플러그 인 이 소유자 의 구성 요소 와 상호작용 을 해 야 할 때 접근 방법 (getter) 은 클 라 이언 트 구성 요 소 를 방문 할 때 사용 할 수 있 습 니 다.방법 init 는 init 가 처 리 될 때 플러그 인 논 리 를 설정 할 수 있 으 며, 소유자 구성 요소 의 HTML 렌 더 링 후에 플러그 인 논 리 를 다시 설정 해 야 할 수도 있 습 니 다.예 를 들 어 드래그 영역 은 구성 요소 의 HMTL 이 DOM 에 렌 더 링 되 어야 만 생 성 됩 니 다.이 경우 클 라 이언 트 구성 요소 의 애 프 터 렌 더 링 이 벤트 를 감청 하고 이 럴 때 구성 요소 의 기능 을 설정 해 야 합 니 다.[예시]
destroy
플러그 인의 destroy 방법 은 구성 요소 가 삭 제 될 때 호출 됩 니 다.플러그 인 을 통 해 만 든 모든 인 스 턴 스 (예 를 들 어 드래그 앤 드 롭, 키보드 내 비게 이 션 등) 는 이 럴 때 프로 그래 밍 방식 으로 소각 되 어야 합 니 다.클 라 이언 트 구성 요소 인 스 턴 스 에 설 치 된 편리 한 속성 도 null 로 설정 하거나 삭제 해 야 합 니 다.[예시]
enable/disable
방법 enable 은 플러그 인의 disabled 속성 을 false 로 설정 하 는 데 만 사용 되 며, disable 방법 은 disabled 를 true 로 설정 합 니 다.자신의 플러그 인 을 만 들 때 이 기능 을 확장 할 수 있 습 니 다.또한 처리 하기 전에 disabled 상 태 를 검사 하여 플러그 인 논 리 를 사용 할 지 여 부 를 결정 할 수 있 습 니 다.원 하 는 바 와 같이 플러그 인 을 사용 하거나 사용 하지 않 는 방법 에 따라 더 많은 것 을 사용 할 수 있 습 니 다.[예시]
플러그 인 참조 가 져 오기
사용 할 때 플러그 인 에서 정 의 된 방법 은 구성 요소 가 아 닌 플러그 인 에 속 하기 때문에 구성 요소 에서 인용 을 가 져 오고 플러그 인 으로 되 돌려 서 호출 하 는 방법 이 필요 합 니 다.또는 플러그 인의 방법 을 구성 요소 에 연결 하 는 것 이 더 편리 합 니 다.【 예 시 】 플러그 인 클래스 를 정의 할 때 플러그 인의 별명 이라는 접 두 사 는 매우 유용 합 니 다. alias: plugin. my pulugin.클 라 이언 트 구성 요소 가 플러그 인 을 사용 할 때 유형 을 통 해 플러그 인 을 쉽게 설정 할 수 있 습 니 다.
plugins: [{
ptype: 'myplugin'}]별명 은 구성 요소 의 findPlugin 방법 으로 플러그 인의 인용 을 검색 할 수 있 습 니 다. 예 를 들 어:
var thePlugin = owningClass.findPlugin(‘myplugin');마지막 으로 구성 요소 의 getPlugin 방법 과 pluginId 를 사용 하여 플러그 인 을 참조 할 수 있 습 니 다.
plugins: [{
ptype: 'myplugin',
pluginId: 'myPluginId';}] var thePlugin = owningClass.getPlugin(‘myPluginId');섞 여 들 어 가 는 것 은 무엇 이 며 어떻게 그것 을 사용 합 니까?
혼입 도 클래스 에 기능 을 추가 하 는 클래스 입 니 다.그러나 플러그 인의 운영 방식 과 는 다음 과 같 습 니 다.
혼 입 된 클래스 를 사용 하 는 인 스 턴 스 를 만 들 었 을 때 클래스 에서 정 의 된 모든 방법 을 직접 호출 할 수 있 습 니 다.이러한 방법의 내의 this 작용 역 은 바로 클래스 자체 이다.[예시] 혼 입 에서 정 의 될 수 있 는 방법 은 클래스 자체 의 방법 과 동명 이인 일 수 있 습 니 다.이런 상황 에서 혼합 방법 은 목표 류 의 원형 으로 복사 되 지 않 는 다.이 일 은 이런 방법 을 호출 하 는 것 이 원시 적 으로 정 의 된 방법 이 될 것 이다.같은 이름 의 혼 입 방법 을 호출 하려 면 소속 클래스 에서 혼 입 된 인용 을 얻 은 다음 에 혼 입 된 발 모 를 직접 호출 해 야 합 니 다.혼합 방법 을 직접 호출 할 때 그 역할 영역 은 혼합 클래스 가 될 것 입 니 다. 따라서 this 가 가리 키 는 것 은 혼합 클래스 자체 [예시] 입 니 다.다음 예제 와 같이 섞 여 있 는 id 가 util 이면 섞 여 정 의 된 destroy 방법 을 호출 합 니 다.
this.mixins.util.destroy.call(this);자신의 혼입 을 정의 하 다
비록 확장 Ext. Mixin 을 통 해 혼입 을 정의 하 는 것 을 권장 하지만 혼입 도 Ext. define 을 통 해 직접 정의 할 수 있 습 니 다.확장 Ext. Mixin 을 통 해 정의 하 는 주요 장점 은 혼합 류 를 정의 할 때 '갈고리' 를 정의 할 수 있다 는 것 이다.갈 고 리 는 혼합 류 에 정의 하 는 방법 으로 수신 류 에 해당 하 는 방법 이 있 기 전이 나 그 후에 자동 으로 호출 됩 니 다. 예 를 들 어 혼 입 된 after Destroy 방법 이 클래스 가 소 멸 된 후에 호출 되 는 지 확인 하려 면 after 갈 고 리 를 사용 할 수 있 습 니 다.
mixinConfig: {
after: {
destroy: 'afterDestroy'
}
}자신의 혼입 사용
자신 이 섞 인 첫 번 째 방법 은 배열 에서 완전한 클래스 이름 을 사용 하 는 것 입 니 다.설정 항목 mixins 의 혼합 클래스 는 배열 에 열 거 된 순서에 따라 처 리 됩 니 다.
"before", "after", "on", "extended" 갈고리 의 더 많은 세부 사항 을 사용 하 는 방법 은 Ext. Mixin API 문서 의 상단 설명 을 참조 할 수 있 습 니 다.
mixins: [
'My.utility.MixinClass' // "util" is used to reference the mixin]대상 문법 (아래 옵션 2 참조) 은 후방 호 환 을 제공 하지만, 키 이름 이 혼 입 된 id 정의 에 부합 되 지 않 기 때문에 권장 하지 않 습 니 다.
혼합 클래스 참조 가 져 오기
클래스 인 스 턴 스 에서 클래스 의 혼합 참조 가 필요 할 수 있 습 니 다.이것 은 소속 클래스 의 인 스 턴 스 mixins 속성 을 통 해 혼 입 된 id 를 통 해 참조 할 수 있 습 니 다 (예 를 들 어 this. mixins. util).혼 입 된 클래스 를 정의 할 때 혼 입 된 클래스 에 유일한 혼 입 된 id 를 설정 하 는 것 을 권장 합 니 다.혼합 클래스 의 id 를 설정 하거나 확인 하 는 세 가지 방법 이 있 습 니 다.
플러그 인 을 사용 하거나 섞 을 때
이제 플러그 인과 혼입 을 알 게 되 었 습 니 다. 그러면 클래스 를 정의 할 때 플러그 인 을 언제 사용 하고 혼입 을 언제 사용 합 니까?같은 기능 으로 쓰기 가 불가능 할 수도 있 기 때문에 어떤 종류의 형식 을 쓸 수 없 을 수도 있 습 니 다. 이 때 는 프로그램 에서 이 기능 을 어떻게 사용 하 는 지 고려 해 야 합 니 다.플러그 인 은 인 스 턴 스 에서 사용 할 수 있 고 이 인 스 턴 스 에 만 비용 을 추가 할 수 있 기 때문에 더욱 유연성 이 있 습 니 다.그러나 기능 이 모든 종 류 를 대상 으로 한다 면 혼합 내 에서 논 리 를 정의 하 는 것 이 효율 적 입 니 다. 플러그 인 예제 가 모든 인 스 턴 스 가 생 성 될 때 만 들 지 않 기 때 문 입 니 다.
저자: Seth Lemmons Seth Lemmons is a Senior Engineer on the Sencha Support team. He has experience in Ext JS, Sencha Touch, and software development. He lives in Boise, Idaho with his wife and ~200k other very nice people. Look for slemmon on the forums.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Extjs6 treepanel 자동 오른쪽 버그Extjs 버전: 6.2.0.981 문제 해결 방법 출처: https://www.sencha.com/forum/showthread.php?330686-Sencha-Architect-amp-ExtJS-6-TreePan...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
