[ExtJS5學習筆記]第六節 Extjs的類系統Class System命名規則及定義和調試

-------------------------------------------------------------資源連結-----------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------------------------------------------

本篇指導旨在給想要建立或者從EXT JS 4.X或者EXT JS 5.X繼承已有類的任何開發者的。

-------

EXT JS 5自帶了有超過300的類，到目前為止有200多萬的開發者在使用extjs開發，他們來自不同的地方，有不同的背景。是以這樣說來，在提供一份公共代碼結構上我們就面臨着一個巨大的挑戰，這些代碼結構是：

1.大家都熟悉了解，簡單容易學習

2.開發迅速，調試友善，部署的時候也沒有痛苦

3.有組織的，可擴充的，并且是可維護的

JavaScript是面向原型的類語言，其中一個最強大的功能就是自由，有好多的解決方案，可以使用不同的編碼風格還有技術問題，但是這樣就會以不可預知為代價了。沒有一個統一的結構，javascript代碼就很難了解，很難維護并且不好複用。

另一方面，基于類的程式設計仍然是最流行的面向對象的程式設計模式，基于類的語言通常需要強類型，封裝和标準的編碼慣例，通過讓開發人員堅持大量的原則,代碼更可能是可預測的,可擴充和可伸縮。然而,這個模型沒有JavaScript的動态能力。

每個方法都有優點和缺點,但是我們可以保持好的而壞的部分同時隐藏?答案是肯定的,你可以在Ext JS找到解決方案。

  在代碼中使用一緻的命名慣例基礎類、名稱空間和檔案名可以幫助組織你的代碼,結構化和可讀性。

  類名隻能包含字母數字字元。數字被允許但是不被鼓勵，除非他們屬于一個技術術語。不要使用下劃線、連字元或其他任何非字母數字字元。例如:

這個是被推薦的

這個是可以接受的

  類名應該打包到像使用對象屬性(.)一樣的适當的名稱空間中。類名至少應該有一個獨特的頂級名稱空間中緊随其後。例如:

頂級名稱空間和實際的類名應該駝峰模式其它一切應該都小寫，例如:

不是使用sencha生成的類盡量不要使用Ext作為頂級空間。縮略詞也應該遵守駝峰預約定，如：

使用Ext.data.JsonProxy 而不是 Ext.data.JSONProxy

使用 MyCompany.util.HtmlParser 而不是MyCompary.parser.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是應用程式的類路徑。所有類應該在這種共同的根下，,應該給予适當的名稱空間以便可以最好的開發、維護和部署。

以類似的方式,類名、方法和變量名隻能包含字母數字字元。數字被允許但是不被鼓勵,除非他們屬于一個技術術語。不要使用下劃線、連字元或其他任何非字母數字字元。方法和變量名應該遵循駝峰原則這也适用于縮略詞。

例如：

可接受的方法名稱:

encodeUsingMd5()

getHtml()而不是 getHTML()

getJsonResponse()而不是getJsonResponse()

parseXmlContent()而不是parseXMLContent()

可接受的變量名:

var isGoodName

var base64Encoder

var xmlReader 

var httpServer

類屬性名遵循完全相同的約定時除了靜态常量。

靜态類常量屬性應該全部大寫。例如:

Ext.MessageBox.YES = "Yes"

Ext.MessageBox.NO = "No"

MyCompany.alien.Math.PI = "4.13"

如果你曾經使用過Ext的4.x版本，你可能會對Ext.extend方法來建立類比較熟悉：

這種方法很容易遵循以建立一個新的類繼承自另一個。除了直接繼承,我們沒有其他方面創造流暢的API的類。這個排除諸如配置、靜态和mixins。我們稍後将詳細回顧這些物品在本指南。

讓我們再看看另一個例子：

在本例中,我們想我們新類命名空間,并使其從Ext.window延伸。有兩個問題我們需要解決:

1.在給My.cool屬性指派Window屬性的時候，需要先有這個對象存在。

2.ext . window需要存在/加載頁面,才能引用

解決第一個問題我們可以通過Ext.namespace(别名 Ext.ns)來解決。這個方法遞歸地通過對象/屬性樹建立他們如果他們不存在。這需要在之前添加Ext.extend

第二個問題不容易解決,因為ext.window可能取決于許多其他類。反過來,這些依賴關系可能依賴于其他類的存在。出于這個原因,Ext JS 4之前編寫的應用程式引入整個ext-all.js的形式,不管應用程式是不是隻需要一小部分的架構。

Ext JS 4消除這些缺點為類建立一個方法你需要記住:Ext.define。它的基本文法如下:

className:類名

members:一個對象,代表一個類成員的鍵-值對的集合

onClassCreated:一個可選的回調函數當所有定義的類和類本身是完全做好了準備的時候被調用。由于類建立的異步本性,這個回調在很多情況下是非常有用的。這些将在第四部分進一步讨論

注意:我們建立了一個新的My.sample的執行個體。使用Ext.create()方法。我們可以使用新的關鍵字(new My.sample.Person())。不過建議得到的習慣總是使用Ext.create因為它允許您利用動态加載。動态加載的更多資訊參見入門指南

在Ext JS 4中,我們介紹了一個專用的配置屬性,它是在類建立之前被強大的Ext.Class 預處理建立的類。功能包括:

1.從其他類成員配置是完全封裝

2.如果方法還未定義，建立期間Getter和setter方法為每個配置屬性自動生成到類原型類。

3.一個apply方法也為每個屬性生成配置。内部自動生成setter方法調用apply方法之前設定值。你可以覆寫apply方法申請配置屬性,如果你需要運作自定義邏輯之前設定的值。如果apply不傳回一個值,setter不會設定值。

為Ext類使用配置,Ext JS 5消除了需要手動調用initConfig()。然而,對于自己的類,擴充Ext.Base initConfig()仍然需要手動調用。

你可以看到下面的配置示例：

這是一個如何使用它的例子:

靜态變量可以使用statics配置來定義：

Ext JS包括一些有用的特性,将幫助您調試和錯誤處理。

您可以使用Ext.getDisplayName()的任何方法的顯示名稱。這對抛出錯誤的類名和方法名描述來說是特别有用的:

當有錯誤在使用Ext.define時抛出的時候，你應該檢視這個方法還有類的堆棧資訊，你可以看下谷歌Chrome中報錯的資訊如下：