[Extjs 4] 類系統

概述

Ext JS 4 有300多個類。

JavaScript 是一個原型驅動的語言。這種語言的優勢就是彈性大，可以使用不同的方法，不同的代碼風格和技術實現同樣的功能，缺點就是難預見，沒有統一的結構，難於理解，維護和重用。

物件導向的編程方式需要強型別，提供封裝和強調代碼標準規範，它需要開發人員需遵循一大堆規則，編寫的代碼是更可能是可預測的，可擴充的，可擴充的。但是就是不過動態和零活。

Ext JS4 號稱是結合了兩者的長處，規避了兩者的弱點。

命名規則

在程式碼程式庫的類，命名空間和檔案中使用統一的命名規範有助於使程式碼群組織化，結構化和可讀化。

1） 類

類名僅包含字母和數字字元； 雖然數字字元是允許的，但是除非類名是一個技術術語，否則盡量不要使用。不要使用底線，連字號和其他的非數字字母的字元。

比如：

MyCompany.useful_util.Debug_Toolbar  ==》 不推薦使用

MyCompany.util.Base64  ==》 可以使用(Base64是專業術語)

使用點串連符(.) 把類放入不同的包的命名空間中。 至少，所有的類有一個唯一的頂層命名空間， 比如：

MyCompany.data.CoolProxyMyCompany.Application

頂層的命名空間和實際的類名使用駝峰法命名，其他的全部使用小寫，比如：

MyCompany.form.action.AutoLoad

開發時不要使用Ext作為頂級命名空間(原因就是Ext本身就是使用這個了)

縮減語應盡量使用駝峰法命名：比如：

    Ext.data.JsonProxy 取代 Ext.data.JSONProxy    MyCompany.util.HtmlParser 取代 MyCompary.parser.HTMLParser    MyCompany.server.Http 取代 MyCompany.server.HTTP

2）源檔案

類的命名和定義的源檔案的路徑要對應起來。比如：

• Ext.util.Observable儲存在 src/Ext/util/Observable.js
• Ext.form.action.Submit儲存在 src/Ext/form/action/Submit.js

3） 方法和變數

命名規則和類的命名規則是完全一樣的。

4）屬性

靜態常量全部使用大寫字母，其他的用駝峰法命名，比如：

    Ext.MessageBox.YES = "Yes"    Ext.MessageBox.NO = "No"    MyCompany.alien.Math.PI = "4.13"

執行個體

1.  聲明

1.1） 舊的方式

在舊版的Ext JS(3.0) 中， 使用如下方式定義類

My.cool.Window = Ext.extend(Ext.Window, { ... });

這種定義方式有兩個問題：

1. My.cool 這個對象需要存在(使用Ext.namespace (aliased byExt.ns)定義)

2. Ext.Window 必須要定義(或以及匯入)

1.2）新的方式

Ext.define(className, members, onClassCreated);

舉個例子：

Ext.define('My.sample.Person', {    name: 'Unknown',     constructor: function(name) {        if (name) {            this.name = name;        }         return this;    },     eat: function(foodType) {        alert(this.name + " is eating: " + foodType);         return this;    }}); 

這樣的話， 在舊的方式下遇到的問題也就解決了。

定義了類型，如何new 一個類的執行個體呢？

var aaron = Ext.create('My.sample.Person', 'Aaron');

使用Ext.create  方式， 而不使用 new My.sample.Person() , 好處就是可以動態載入。

2. 配置

Ext JS 4配置的新特性有：

1) 配置完全的封裝

2) 每個配置屬性自動產生Getter  和Setter 方法

3) 自動為每個配置屬性產生apply 方法。自動產生的setter 方法在設值之前調用apply 方法。如果apply 方法沒有傳回值則setter 就不會設定值了。例如：

Ext.define('My.own.Window', {   /** @readonly */    isWindow: true,     config: {        title: 'Title Here',         bottomBar: {            enabled: true,            height: 50,            resizable: false        }    },     constructor: function(config) {        this.initConfig(config);         return this;    },     applyTitle: function(title) {        if (!Ext.isString(title) || title.length === 0) {            alert('Error: Title must be a valid non-empty string');        }        else {            return title;        }    },     applyBottomBar: function(bottomBar) {        if (bottomBar && bottomBar.enabled) {            if (!this.bottomBar) {                return Ext.create('My.own.WindowBottomBar', bottomBar);            }            else {                this.bottomBar.setConfig(bottomBar);            }        }    }});var myWindow = Ext.create('My.own.Window', {    title: 'Hello World',    bottomBar: {        height: 60    }}); alert(myWindow.getTitle()); // alerts "Hello World" myWindow.setTitle('Something New'); alert(myWindow.getTitle()); // alerts "Something New" myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string" myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 

3.  靜態

可以使用 static 配置靜態成員，例如：

Ext.define('Computer', {    statics: {        instanceCount: 0,        factory: function(brand) {            // 'this' in static methods refer to the class itself            return new this({brand: brand});        }    },     config: {        brand: null    },     constructor: function(config) {        this.initConfig(config);         // the 'self' property of an instance refers to its class        this.self.instanceCount ++;         return this;    }}); var dellComputer = Computer.factory('Dell');var appleComputer = Computer.factory('Mac'); alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac" alert(Computer.instanceCount); // Alerts "2"

錯誤處理和調試

Ext JS 4 提供了一些有用的特性用來調試和錯誤處理

 使用 Ext.getDisplayName()  得到方法的顯示名稱， 使用方式：

throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');