Ext JS 4: The Class Definition Pipeline





Ext JS 4: The Class 


Definition Pipeline









#Class 생성 전처리기



- 전처리기: 클래스 생성 준비가 완료되기까지 아래 파이프라인 절차가 실행된다.




1. define Method




define 메서드의 대표적인 기능으로 클래스 생성 및 구성 또는 정의된 네임스페이스 해석 과정등이 있다.


ExtJS4 Class System의 모든 클래스는 Ext.Class의 인스턴스이며, 시스템 공통 클래스인 Ext.Base 클래스를 상속받는다. 또한, 그(Ext.Base) 클래스는 자신의 기본 메서드인 callOverriddencallParent 등과 같은 맴버들을 하위 클래스에게 제공한다.



만약, 확장(extend) 클래스를 명시하지 않고, 신규 클래스를 정의할 경우, 클래스 정의 단계에선 Ext.Base를 상속하는 과정이 자동으로 이뤄진다.(기본적인 신규 클래스 생성 시에는 Ext.Base 공통 클래스를 자동으로 상속받게 된다)


반대로 확장(extend) 클래스를 지정한 경우에는 정의된 확장 클래스를 통해 상속 받게된다.






- 확장 클래스를 지정하지 않은 경우





- 아래 결과와 같이 ClassA 인스턴스가 생성되었고, 확장 클래스가 정의되지 않아 공통 클래스인 Ext.Base 클래스가 자동으로 할당(상속) 된것을 볼 수 있다.







- 확장 클래스(ClassA)를 지정한 경우





- 아래 결과와 같이 ClassB 인스턴스가 생성되었고, 확장 클래스(ClassA)가 정의되었으며, Ext.Base 공통 클래스는 확장 클래스(ClassA)를 통해 상속받아 확장된것을 확인할 수있다.



즉, ClassB의 __superclass__ 는 ClassA 가 된다. 또 그것의  __superclass__ 는 Ext.Base가 되는 형태이다.







2. Loader


- 각 클래스간의 종속성을 모두 파악해 필요로 하는 클래스가 모두 로드되기 전까지 지속적으로 프로세스를 수행한다.



1. ClassA.js 및 ClassB.js 파일을 생성한다.

2. app.tests.ClassB 클래스의 확장 클래스(app.tests.ClassA)를 정의하면, 시스템 전처리기 단계인 Loader 로 인해 해당 클래스를 로드하게 된다.






- 아래 결과와 같이 app.tests.ClassB 인스턴스가 생성되었고, 확장 클래스(app.tests.ClassA)가 정의되었으며, Ext.Base 공통 클래스는 확장 클래스(app.tests.ClassA)를 통해 상속받아 확장된것을 확인할 수있다.







- Loader로 인한 Deadlock 발생 원인



1. ClassA.js 및 ClassB.js 파일을 생성 후 각 클래스를 아래와 같이 정의한다.

2. app.tests.ClassA 클래스는 정의된 확장 클래스(app.tests.ClassB)를 로드 한다.

3. app.tests.ClassB 클래스는 정의된 확장 클래스(app.tests.ClassA)를 로드 한다.

4. 서로간의 클래스 종속성으로 인해 결국 클래스 로드 무한 루프가 발생하게되며, 이는 곧 Deadlock 발생에 원인이 된다.


 


- 아래는 Deadlock 발생 메시지에 대한 이미지이다.









3. Extend: 



- 정의된 확장 클래스가 모두 로드되면, 해당 클래스를 확장시킨다.





1. app.tests.ClassB 클래스는 확장 클래스(app.tests.ClassA)로 확장한다.


2. 확장 클래스 맴버는 아래와 같이 app.tests.ClassB 인스턴스의 superclass 프로퍼티 및 prototype 맴버로 접근 가능하다.


3. 이 두 접근 객체의 차이는 superclass 프로퍼티의 경우 원본 객체의 Pointer에 직접 접근하는 반면, prototype 맴버는 확장된 자신의 프로퍼티로 직접 접근하게 된다.


즉, superclass 프로퍼티에 할당된 객체 수정 시 원본 객체의 Pointer에 접근해 수정을 할 수있는 반면, prototype 맴버에 할당된 객체는 원본 객체가 아닌 자기 자신의 맴버만 수정하게 되는것이다.






- 네이티브 자바스크립트 구현







4. Mixins 



- 확장 클래스의 결합이 수행된다.(다중 상속 가능)





1. app.tests.ClassB 클래스는 확장 클래스(app.tests.ClassA)로 확장한다.


2. 확장 클래스 맴버는 아래와 같이 app.tests.ClassB 인스턴스의 mixins.classA 프로퍼티 및 prototype 맴버로 접근 가능하다.


3. 이 두 접근 객체의 차이는 mixins.classA 프로퍼티의 경우 원본 객체의 Pointer에 직접 접근하는 반면, prototype 맴버는 확장된 자신의 프로퍼티로 직접 접근하게 된다.


4. 원본 객체 접근 및 수정에 관한 내용은 위 Extend 프로퍼티 내용과 동일하다.







5. Config 


- config 객체 맴버로 할당된 모든 메서드는 getter/setter 메서드들을 기본으로 가지게 된다.





- config 객체 맴버(id, name)는 아래와 같이 getter/setter 메서드들을 가지게 된다.








6. Statics



Statics 객체 맴버는 함수(클래스: ClassA) 객체 맴버로 할당되게 된다. 


즉, 해당 함수 객체의 value 데이터로 할당되는것이며, 이는 타 언어의 Static 맴버와 동일하게 사용 가능하다.





- 네이티브 자바스크립트 Statics 구현




- 아래 결과와 같이 ClassA 함수 객체의 맴버로 Statics 객체 맴버로 정의된 getStaticId 메서드가 할당된것을 볼 수 있다.












#Class 생성 후처리



- 후처리기: 클래스 생성 준비가 완료된후 클래스 동작에는 영향을 끼치지 않는 파이프라인 절차가 실행된다.




1. Aliases 


- 해당 클래스 네임스페이스의 별칭을 정의한다.

- ClassA 클래스 인스턴스 생성 시 기존 "ClassA" 문자열 및 아래 alias로 지정된 "_classA" 로도 생성 가능하다.






- 객체 인스턴시 생성시 결과는 아래와 같다.








2. Singleton 



Singleton 프로퍼티 값을 true로 할당 시 해당 클래스의 인스턴스가 메모리상에 미리 올라가 따로 인스턴스 생성 없이 해당 객체를 바로 사용할 수 있게 된다. 



즉, 타 언어의 Singleton 패턴을 자바스크립트로 구현한 방식이며, 만약 Ext.create 메서드를 통해 따로 인스턴스를 생성하려 하면 에러를 반환하게 된다.


 



- 네이티브 자바스크립트 Singleton 구현










3. Legacy 



기존 문법과의 호환성을 위해 Ext 클래스가 대체 이름을 가질 수있게 만든다. 


즉, ExtJS 이전 버전과의 문법 호환성을 위해 참조하는 클래스명을 대치시키는 것이 중 한 부분이라할 수 있겠다.









4. Callback



- 클래스가 완전히 정의된 후 단 한번 실행하게 되는 callback 함수이다.





- 사용 범위는 극히 적을것이나, 필요시 사용 가능하다.






Trackback 0 Comment 0
prev 1 2 3 4 5 6 ··· 168 next