-
Notifications
You must be signed in to change notification settings - Fork 2
The Class System
Ext JS는 거대한 리팩토링을 통해 새로운 Class System과 함께 표면으로 올라왔다. 새로운 아키텍처는 Ext JS 4.x로 작성된 거의 모든 Single Class 하위에 위치한다. 그러므로 코딩을 시작하기 전에 잘 이해하는게 중요하다.
이 메뉴얼은 Ext JS 4.x의 새로운 클래스를 만들거나 현재 클래스들을 확장하고자 하는 개발자를 위한 문서이다. 이것은 4개의 섹션으로 나눠진다.
- 섹션 1 : "Overview(개요)" 강력한 Class System의 필요성을 설명.
- 섹션 2 : "Namaing Conventions(네이밍 관습)" 클래스 네이밍, 메소드, 프로퍼티 그리고 파일들에 대한 모범 사례에 대해 설명.
- 섹션 3 : "Hands-on(실습)" 예제 코드들을 자세히 단계별로 제공.
- 섹션 4 : "Errors Handling & Debugging(오류처리 및 디버깅)" 예외 처리 방법에 대한 유용한 팁&트릭을 제공.
Ext JS 4는 300개 이상의 클래스들을 가지고 있다. 그리고 우리는 매일 20만명 이상의 전세계 다양한 프로그래밍 배경을 가지고 있는 개발자들이 방문하는 거대한 커뮤니티를 가지고 있다. 프레임워크의 규모에서, 우리는 공통 코드 아키텍처를 제공해야하는 큰 도전에 직면했다.
내용은 친숙하고 간단하게.
빠른 개발, 쉬운 디버깅, 힘들지 않은 배포.
잘 정리되며, 유연하고 지속할수 있게.
JavaScript 언어는 계층이 없는 프로토타입 지향 언어이다. 자연어 이므로, 이 언어의 가장 강력한 기능 중 하나는 유연성이다. 그래서 많은 서로 다른 코딩 스타일과 테크닉에 따라 다른 방법으로 동일한 처리를 가능하게 한다. 그러나 그 기능은, 예측 불가능한 비용을 가진다. 통일된 구조 없이, JavaScript 코드를 이해하는 것과 재사용 및 유지하는 것은 정말로 어렵다.
반면에 클래스 기반 프로그래밍인 OOP는 아직도 가장 인기있는 모델로 유지되고 있다. 클래스 기반 언어는 일반적으로 엄격한 형검사, 캡슐화 그리고 표준 코딩 관습이 딸려 있다. 일반적으로 개발자들이 큰 원칙들을 지킴으로써 작성된 코드는 예측 가능 하며, 시간이 지남에 따라 확장해도 문제가 발생하지 않을 가능성이 높다. 그러나, 자바 스크립트와 같은 언어는 그와 같은 동적인 기술을 발견할 수 없다.
각각의 접근 방식은 장단점을 가지고 있지만, 같은 시간에 단점을 숨기는 동안 모든 장점을 가질 수 있을까? 대답은 "예"이며, Ext JS 4 솔루션을 구현했다.
클래스의 코드를 전체에 거쳐 일관성있는 네이밍 관습을 사용하여, 네임스페이스와 파일이름들을 조직화하며 구조화하고, 읽기 쉽게 유지하는 것을 돕는다.
클래스 이름은 영어, 숫자로 구성. 기술적인 용어에 속하지 않는 숫자도 허용되지만, 대부분의 경우 지양. '-', '_' 또는 영어, 숫자 이외의 문자를 사용하지 말것.
- MyCompany.useful_util.Debug_Toolbar는 지양.
- MyCompany.util.Base64 는 허용.
클래스 이름은 적절한 도트표기법(.)을 사용하여 패키지로 그룹화 해야 함. 최소한 클래스 이름 다음에 하나의 고유한 최상위 네임스페이스가 있어야함.
- MyCompany.data.CoolProxy
- MyCompany.Application
최상위 네임스페이스와 실제 실행 클래스 이름에는 CamelCase가 있어햐 하며, 다른 경우는 모두 소문자로 해야 함.
- MyCompany.form.action.AutoLoad
Sencha 에서 배포되지 않는 클래스는 최상위 네임스페이스로 Ext를 사용해서는 안됨. 또한 약어는 위에 나열된 CamelCase 규칙을 따라야 함.
- Ext.data.JSONProxy 대신에 Ext.data.JsonProxy
- MyCompary.parser.HTMLParser 대신에 MyCompany.util.HtmlParser
- MyCompany.server.HTTP 대신에 MyCompany.server.Http
클래스의 이름은 그것들이 저장되는 파일의 경로에 직접 매핑 된다. 결과적으로, 파일 당 하나의 클래스가 있어야 한다. 예를 들면 다음과 같다.
- Ext.util.Observable ==> path/to/src/Ext/util/Observable.js
- Ext.form.action.Submit ==> path/to/src/Ext/form/action/Submit.js
- MyCompany.chart.axis.Numeric ==> path/to/src/MyCompany/chart/axis/Numeric.js
path/to/src 는 당신 어플리케이션 클래스들의 디랙토리이다. 모든 클래스들은 공통 루트 아래 있어야 한다. 그리고 적절한 네임스페이스로 개발, 유지보수 그리고 배포를 해야한다.
마찬가지로 클래스 이름, 메서드 및 변수 이름은 영어, 숫자 문자 만을 포함할 수 있다. 그것들은 기술적인 용어에 속하는하지 않는 숫자는 허용되지만 대부분의 경우 지양하고 있다. '-', '_' 또는 영어, 숫자 이외의 문자를 사용하지 마라.
메소드와 변수 이름은 항상 CamelCase 규칙을 따라야 한다. 이것은 약어에 적용된다. 예들 들어,
- 허용하는 메소드 이름: encodeUsingMd5() getHtml() instead of getHTML() getJsonResponse() instead of getJSONResponse() parseXmlContent() instead ofparseXMLContent()
- 허용하는 변수 이름: var isGoodName var base64Encoder var xmlReader var httpServer
클래스 프로퍼티 이름들은 그것들이 정적인 상수인 경우를 제외하면, 앞서 말한바와 같이 메소드, 변수와 같은 관습을 정확히 따라야 한다. 정적 클래스 프로퍼티의 상수는 모두 대문자로 해야한다. 예를들면 다음과 같다.
- Ext.MessageBox.YES = "Yes"
- Ext.MessageBox.NO = "No"
- MyCompany.alien.Math.PI = "4.13"
만약 당신이 Ext JS의 이전 버전을 사용한 적이 있다면, Ext.extend 로 클래스를 만드는데 확실히 익숙할 것이다.
- var MyWindow = Ext.extend(Object, { ... });
다른 클래스를 상속하여 새로운 클래스를 만드는 것에 따라 이러한 접근방식은 쉽다. 그러나, 직접 상속하는것 이외에 우리는 클래스 생성 측면에서 statics, mixins, 구성 등 다른 능수능란한 API가 없었다. 우리는 곧 아이템 세부 항목을 검토할 것이다. 다른 예제를 살펴 보자.
- My.cool.Window = Ext.extend(Ext.Window, { ... });
이 예제에서는 네임 스페이스의 새 클래스를 Ext.Window 에서 확장되어 만들어 지기를 원한다. 우리는 2가지 문제를 제기할 필요가 있다.
- My.cool 은 기존의 객체를 우리가 Window의 속성으로 지정 하기전에 선언 할 필요가 있다.
- Ext.Window 는 exist / loaded 전에 페이지에 참조할 필요가 있다.
첫 번째 항목은 보통 Ext.namespace(Ext.ns)로 해결할 수 있다. 이 메소드는 object/property 트리를 통해 재귀적으로 횡단하는 방법과 그것이 아직 존재하지 않는 경우 그것을 만들 수 있다. 지루한 부분으로는 Ext.extend 위에 항상 추가해야 한다.
- Ext.ns('My.cool');
- My.cool.Window = Ext.extend(Ext.Window, { ... });
그러나, 두번째 문제는 쉽지 않다. 왜냐하면 Ext.Window는 직접/간접 적으로 상속되는 다른 여러 클래스에 따라 달라지며, 또한 차례로 이러한 의존성이 존재하는 다른 클래스에 따라 달라 질수 있기 때문이다. 그런 이유로, 응용프로그램이 작성되기 전에 그것이 프레임워크의 일부를 필요로 하더라도 ExtJS 4 는 일반적으로 ext-all.js의 형태로 전체 라이브러리를 사용한다.
ExtJS 4는 클래스 생성에 단 하나의 방법으로 모든 단점을 제거한다. : Ext.define 기본적인 문법은 다음과 같다.
- Ext.define(className, members, onClassCreated);
className : 클래스이름
members : object에서 key-value 쌍의 클래스 멤버의 컬렉션을 나타낸다.
onClassCreated : 이 클래스의 모든 종속성이 준비가되었을 때 onClassCreated가 호출되는 선택적 기능 콜백이며, 그 후 클래스가 완전히 생성된다. 클래스 생성의 새로운 비동기 특성으로 인해, 이 콜백은 여러 상황에서 유용할 수 있다.
이 내용은 섹션4에서 추가로 설명하겠다.
(예제는 소스로 대체)
우리는 Ext.create () 메서드를 사용해 My.sample.Person의 새 인스턴스를 생성한다. 우리는 새로운 키워드 (new My.sample.Person())을 쓸 수 있다. 그러나 그것은 당신이 동적 로딩을 활용할 수도 있기 때문에 항상 Ext.create 를 사용하는 것을 권장 한다. 동적 로딩에 관한 자세한 내용은 Getting Started guide 문서를 참고하라.
ExtJS 4에서, 클래스가 생성되기 전에 강력한 Ext.class 이전프로세서 처리의 상세 설정을 소개한다. 특징은 다음과 같다.
구성은 다른 클래스 맴버에서 완전히 캡슐화 된다. Getter 와 Setter 메소드는 클래스가 이미 정의 되어 이러한 메소드가 없는 경우 모든 설정 프로퍼티에 대해 클래스 자동생성 시 클래스프로토타입에서 자동으로 생성된다. 신청 메소드 또한 모든 config 프로퍼티에 대해 생성된다. 값을 설정하기 전에 자동으로 생성되는 setter 메소드는 내부 신청 메소드를 호출한다. 값을 설정하기 전에 사용자 정의 로직을 실행해야 하는 경우 오버라이드 config 프로퍼티에 대한 메소드를 적용한다. setter 값을 설정하지 않았다면 값을 반환하지 않는다. 예를 들어 아래 applyTitle 를 참고하자. 예제는 다음과 같다.
Static members는 statics config 를 사용하여 정의 할 수 있다.
ExtJS 4는 디버깅 및 오류 처리와 함께 당신을 도울 몇 가지 유용한 기능이 포함되어 있다.
너는 어떤 메소드의 display name을 얻으려면 Ext.getDisplayName()을 사용할 수 있다. 이것은 그 클래스이름과 메소드이름의 설명에 대한 에러를 던질때 특히 유용하다.
- throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');
에러가 Ext.define()를 사용하여 정의된 클래스 중 어떤 메서드에 던진 경우, 만약 당신이 WebKit 기반 브라우저(Chrome, Safari)를 사용한다면 그 메소드, 클래스 이름을 호출스택에서 확인 할 수 있다.