Ext JS 4 공식 문서 3 - 클래스 시스템 개요 및 실습

Ext JS 4는 클래스 시스템을 상향식으로 재구성합니다. 이는 Ext JS 역사상 최초로 클래스 시스템을 대규모로 리팩토링한 것입니다. 새로운 아키텍처는 거의 모든 Ext JS 4 클래스에 적용되므로 코딩을 시작하기 전에 이에 대해 어느 정도 이해하는 것이 매우 중요합니다.
이 매뉴얼은 Ext JS 4에서 새로운 클래스를 생성하거나 기존 클래스를 확장하려는 개발자를 대상으로 합니다. 이 매뉴얼은 4개 부분으로 구성되어 있습니다.
1부: "개요" -- 강력한 클래스를 생성하는 단계를 설명합니다. 클래스 시스템 필요성
2부: "명명 규칙" -- 클래스, 메서드, 속성, 변수 및 파일에 대한 최상의 명명 규칙에 대해 논의
3부: "연습" -- 자세한 단계별 지침 제공 코드 예제
4부: "오류 처리 및 디버깅" -- 예외 처리 방법에 대한 매우 유용한 팁과 요령을 제공합니다

1. 개요
Ext JS 4가 끝났습니다. 300개의 수업이 있으며 현재까지 우리는 전 세계에서 다양한 프로그래밍 배경을 가진 200,000명 이상의 개발자로 구성된 대규모 커뮤니티를 보유하고 있습니다. 이 규모의 프레임워크의 경우 공통 코드 아키텍처를 제공해야 하는 큰 과제에 직면합니다.
친숙하고 배우기 쉽습니다
개발 속도가 빠르고 디버깅이 쉽고 배포가 간단합니다
체계적이고 확장 가능하며 유지 관리가 용이합니다.
JavaScript는 형식이 지정되지 않은 프로토타입 지향 언어이며 이 언어의 가장 강력한 기능 중 하나는 유연성입니다. 다양한 코딩 스타일과 기술을 사용하여 다양한 방법으로 동일한 작업을 수행할 수 있습니다. 그러나 이 기능에는 예상치 못한 비용이 발생합니다. 통합된 구조가 없으면 JavaScript 코드를 이해하고 유지 관리하고 재사용하기가 어렵습니다.
클래스 기반 프로그래밍, 즉 가장 널리 사용되는 OOP 모델을 사용하는 것입니다. 클래스 기반 언어는 일반적으로 강력한 형식을 갖추고 캡슐화를 제공하며 표준 코딩 규칙을 따릅니다. 일반적으로 개발자가 통합된 코딩 규칙 세트를 따를 때 작성하는 코드는 예측 가능하고 확장 가능하며 확장 가능성이 높습니다. 그러나 JavaScript와 같은 언어와 동일한 동적 기능은 없습니다.
각 방법마다 장단점이 있는데, 두 가지 모두의 장점을 활용하고 단점을 숨길 수 있을까요? 대답은 '그렇다'입니다. 우리는 Ext JS 4에서 이 솔루션을 구현했습니다.

2. 명명 규칙
항상 코드의 클래스, 네임스페이스 및 파일 이름을 기반으로 일관된 명명 규칙을 사용하면 코드를 읽기 쉽고 체계적으로 유지할 수 있습니다. 읽을 수 있습니다.
1) 클래스
클래스 이름은 영숫자만 포함할 수 있으며, 기술 용어에 속하지 않는 한 대부분의 경우 숫자는 허용되지 않습니다. 밑줄, 하이픈 또는 기타 영숫자가 아닌 문자를 사용하지 마십시오. 예:
MyCompany.useful_util.Debug_Toolbar는 허용되지 않습니다.
MyCompany.util.Base64는 괜찮습니다.
클래스 이름은 객체 middle의 도트 표현식(.) 속성을 사용하여 적절한 네임스페이스에 배치되어야 합니다. . 최소한 클래스 이름에는 고유한 최상위 네임스페이스가 있어야 합니다. 예:
MyCompany.data.CoolProxy
MyCompany.Application
최상위 네임스페이스와 클래스 이름은 모두 카멜 표기법을 사용해야 합니다. 또한 다른 모든 항목은 모두 소문자여야 합니다. 예:
MyCompany.form.action.AutoLoad
Sencha의 Ext JS에 의해 게시되지 않은 클래스는 Ext를 최상위 네임스페이스로 사용할 수 없습니다.
약어도 위에서 언급한 카멜 케이스 명명 규칙을 따라야 합니다. 예:
Ext.data.JsonProxy는 Ext.data.JSONProxy를 대체합니다.
MyCompany.util.HtmlParser는 MyCompary.parser.HTMLParser를 대체합니다.
MyCompany.server.Http는 MyCompany.server.HTTP를 대체합니다.
2) 소스 파일
클래스 이름은 해당 클래스가 저장된 파일 경로에 직접 매핑됩니다. 따라서 각 파일은 하나의 클래스만 가질 수 있습니다. 예:
Ext.util.Observable이 저장됩니다. /to/src/Ext/util/Observable.js
Ext.form.action.Submit은 /to/src/Ext/form/action/Submit.js
MyCompany.chart.axis.Numeric에 저장됩니다. /to/src/MyCompany/chart/axis/Numeric.js에 저장됩니다.
/to/src 경로는 애플리케이션 클래스의 루트 디렉터리이며 모든 클래스는 이 공통 루트 디렉터리에 배치되어야 합니다.
3) 메소드 및 변수
클래스 이름과 유사하게 메소드 및 변수 이름에는 영숫자만 포함될 수 있으며, 기술 용어에 속하지 않는 한 대부분의 경우 숫자는 허용되지 않습니다. 밑줄, 하이픈 또는 기타 영숫자가 아닌 문자를 사용하지 마십시오.
메소드 이름과 변수 이름도 항상 camelCase여야 하며 이는 약어에도 적용됩니다.
예:
허용되는 메서드 이름: encodeUsingMd5(), getHTML() 대신 getHtml(), getJSONResponse() 대신 getJsonResponse(), parseXMLContent() 대신 parseXmlContent()
허용되는 변수 이름: var isGoodName, var base64Encoder, var xmlReader, var httpServer
4) 속성
클래스 속성 이름은 정적 상수를 제외하고 위의 메서드 및 변수와 완전히 동일한 명명 규칙을 따릅니다.
정적 클래스 속성, 즉 상수는 모두 대문자로 표기해야 합니다. 예:
Ext.MessageBox.YES = "Yes"
Ext.MessageBox.NO = "No"
MyCompany.alien.Math .PI = " 4.13"

3. 실습
1. 선언
1.1) 이전 방법
이전 버전을 사용한 경우 Ext JS에서는 Ext.extend를 사용하여 클래스를 생성하는 방법에 익숙해야 합니다.
var MyWindow = Ext.extend(Object, { ... })
이 방법을 사용하면 새 클래스를 쉽게 생성할 수 있습니다. 그러나 직접 상속 외에는 구성, 정적 구성 및 믹스인 클래스와 같은 클래스의 다른 측면을 생성하기 위한 좋은 API가 없습니다. 이에 대해서는 나중에 자세히 검토하겠습니다.
다른 예를 살펴보겠습니다.
My.cool.Window = Ext.extend(Ext.Window, { ... })
이 예에서는 Namespace 클래스를 사용하여 새 예를 생성하려고 합니다. 여기에서 해결해야 할 두 가지 문제가 있습니다:
My.cool은 Window를 속성으로 할당할 수 있도록 기존 네임스페이스 개체여야 합니다.
Ext.Window는 존재하고 있어야 합니다.
첫 번째 문제는 일반적으로 Ext.namespace(별칭은 Ext.ns)로 해결됩니다. 이 방법은 존재하지 않는 객체를 재귀적으로 생성하는데, 귀찮은 점은 항상 다음을 기억해야 한다는 것입니다. Ext.extend 앞에 추가하세요:
Ext.ns('My.cool');My.cool.Window = Ext.extend(Ext.Window, { ... }); 그러나 두 번째 문제는 Ext.Window는 다른 많은 클래스에 의존할 수 있고 이러한 종속 클래스로부터 직접 또는 간접적으로 상속받을 수 있으며 이러한 종속 클래스는 다른 클래스에 의존할 수 있기 때문에 해결하기 쉽지 않습니다. 이러한 이유로 Ext JS 4 이전에 작성된 애플리케이션은 일반적으로 전체 라이브러리 파일 ext-all.js를 가져오지만 그 중 일부만 필요할 수도 있습니다.
1.2) 새로운 방법
Ext JS 4는 이러한 모든 단점을 제거합니다. 클래스를 생성하는 유일한 방법은 Ext.define이며 기본 구문은 다음과 같습니다.
Ext.define ( className,members, onClassCreated);
className: 클래스 이름
members는 클래스 멤버 컬렉션, 일련의 키-값 쌍을 나타내는 대형 개체입니다.
onClassCreated는 선택적 콜백 함수입니다. 클래스의 모든 종속성이 준비되고 클래스가 완전히 생성되었을 때. 이 콜백 함수는 여러 상황에서 유용하며 이에 대해서는 4부에서 자세히 설명하겠습니다.
예:

코드 복사 코드는 다음과 같습니다.

Ext.define( 'My.sample.Person',{ 
name: 'Unknown', 
constructor: function(name) { >eat: function(foodType) { 
alert(this.name " is eating: " foodType );　 }}); 
var aaron = Ext.create('My.sample.Person', 'Aaron') ; 
aaron.eat("Salad"); Salad"); 

 
우리는 .sample.Person의 Ext.create() 메소드 인스턴스를 사용하여 My를 생성했습니다. 물론 새로운 키워드(new My.sample.Person())를 사용할 수도 있지만 동적 로딩 기능을 활용할 수 있으므로 항상 Ext.create를 사용하는 습관을 기르는 것이 좋습니다. 동적 로딩에 대한 자세한 내용은 Ext JS 4 시작 가이드를 참조하세요. 


2. 구성 

Ext JS 4에서는 클래스가 생성되기 전에 강력한 전처리기 클래스인 Ext.Class에서 사용할 전용 구성 속성을 도입했습니다. 다음과 같은 특징이 있습니다.
구성은 다른 클래스 멤버로부터 완전히 캡슐화됩니다.
각 구성 속성의 getter 및 setter 메소드는 클래스 프로토타입에 자동으로 생성됩니다(이 메소드가 클래스에 정의되지 않은 경우 에서). 동시에 각 구성 속성에 대해 적용 메소드가 생성되고 자동으로 생성된 setter 메소드는 값을 내부적으로 설정하기 전에 이 적용 메소드를 호출합니다. 값을 설정하기 전에 사용자 지정 논리를 실행하려면 적용 메서드를 재정의하면 됩니다. Apply가 값을 반환하지 않으면 setter 메서드는 값을 설정하지 않습니다. 아래 applyTitle 메소드를 살펴보겠습니다. 다음 예제에서는 새 클래스를 정의합니다.

코드 복사

코드는 다음과 같습니다. 다음은:

 
Ext.define('My.own.Window', {　　/**@readonly*/ 
isWindow: true, 
config: { 
title: '여기에 제목', 
bottomBar: { 
활성화: true, 
높이: 50, 
크기 조정 가능: false　　　　 }　　 }, 
생성자: function(config) {　　　　 
this.initConfig(config);　　 } , 
applyTitle: function(title) {　　　　 
if (!Ext.isString(title) || title.length === 0) { 
alert('오류: 제목은 비어 있지 않은 유효한 제목이어야 합니다. string');　　　　 
} else {　　　　　 
return title;　　　　 
}　　 }, 
applyBottomBar: function(bottomBar) {　　　　 
if (bot tomBar && BottomBar.enabled) {　　　　　　 
if (! this.bottomBar) {　　　　　　　　 
return Ext.create('My.own.WindowBottomBar', BottomBar);　　　　　　 
} else {　　　　　　　　 
this.bottom Bar.setConfig(bottomBar);　　　　　　 
}　　　　 
} 
}}); 

下side是如何使用这个新类的例子：

复代码代码如下:

 
var myWindow = Ext.create('My.own.Window', { 
title: 'Hello World', 
bottomBar: { 
height: 60　　}}); 
alert(myWindow.getTitle()); // "Hello World" 경고 
myWindow.setTitle('Something New'); 
alert(myWindow.getTitle()); // "새로운 것" 경고 
myWindow.setTitle(null); // 경고 "오류: 제목은 비어 있지 않은 유효한 문자열이어야 합니다." 
myWindow.setBottomBar({ height: 100 }); // 하단바 높이를 100으로 변경 

3. 静态配置
静态配置成员可以使사용 statics属性来定义:

复主代码 다운로드:

Ext.define('Computer', { 
statics: { 
instanceCount: 0, 
factory: function(brand) {　　　　　　 
// 정적 메서드의 'this' 참조 클래스 자체에　　　　　　 
return new this({brand:brand});　　　　 }　　 }, 
config: { 
brand: null}, 
constructor: function(config) {　　　　 
this. initConfig(config); 　　　　 
// 인스턴스의 'self' 속성은 해당 클래스를 참조합니다　　　　 
this.self.instanceCount ;　　 }}); 
var dellComputer = Computer.factory('Dell');var appleComputer = Computer.factory('Mac'); 
alert(appleComputer.getBrand()); 
// 자동 생성 getter를 사용하여 구성 속성 값을 가져옵니다. 경고 "Mac" 
alert(Computer.instanceCount); 
// 경고 "2" 

 

四. 错误处理와调试 Ext JS 4包含了一些유용한 특징, 可以帮助你调试와错误处리：
你可以使용Ext.getDisplayName()방법법获取任何法的显示name称，这是특별한 용도로 사용되는 当抛 Out错误时, 可以用来에서 错误描述里显示类name 와 方法name:
throw new Error('[' Ext.getDisplayName(arguments.callee) '] Some message here');
Ext.define()은 WebKit에서 사용 가능한 특정 유형의 사용 방식을 사용하여 WebKit에서 사용하는 브라우저입니다.看到방법명과类칭합니다.

Ext JS 4 공식 문서 3 - 클래스 시스템 개요 및 실습_기본 지식