本文地址：?[http://blog.csdn.net/sushengmiyan/article/details/38479079](http://blog.csdn.net/sushengmiyan/article/details/38479079) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------資源鏈接----------------------------------------------------------------------- 翻譯來源 ?Sencha Cmd官方網站： ? ?[http://www.sencha.com/products/extjs/up-and-running/the-class-system](http://www.sencha.com/products/extjs/up-and-running/the-class-system) ------------------------------------------------------------------------------------------------------------------------------------------------ 本篇指導旨在給想要創建或者從EXT JS 4.X或者EXT JS 5.X繼承已有類的任何開發者的。 ### 概述 ------- EXT JS 5自帶了有超過300的類，到目前為止有200多萬的開發者在使用extjs開發，他們來自不同的地方，有不同的背景。所以這樣說來，在提供一份公共代碼結構上我們就面臨著一個巨大的挑戰，這些代碼結構是： 1.大家都熟悉了解，簡單容易學習 2.開發迅速，調試方便，部署的時候也沒有痛苦 3.有組織的，可擴展的，并且是可維護的 JavaScript是面向原型的類語言，其中一個最強大的功能就是自由，有好多的解決方案，可以使用不同的編碼風格還有技術問題，但是這樣就會以不可預知為代價了。沒有一個統一的結構，javascript代碼就很難理解，很難維護并且不好復用。 另一方面，基于類的編程仍然是最流行的面向對象的編程模式，基于類的語言通常需要強類型，封裝和標準的編碼慣例，通過讓開發人員堅持大量的原則,代碼更可能是可預測的,可擴展和可伸縮。然而,這個模型沒有JavaScript的動態能力。 每個方法都有優點和缺點,但是我們可以保持好的而壞的部分同時隱藏?答案是肯定的,你可以在Ext JS找到解決方案。 ### 命名約定 在代碼中使用一致的命名慣例基礎類、名稱空間和文件名可以幫助組織你的代碼,結構化和可讀性。 ### ? 類命名約定 類名只能包含字母數字字符。數字被允許但是不被鼓勵，除非他們屬于一個技術術語。不要使用下劃線、連字符或其他任何非字母數字字符。例如: ~~~ MyCompany.useful_util.Debug_Toolbar ~~~ 這個是被推薦的 ~~~ MyCompany.util.Base64 ~~~ 這個是可以接受的 類名應該打包到像使用對象屬性(.)一樣的適當的名稱空間中。類名至少應該有一個獨特的頂級名稱空間中緊隨其后。例如: ~~~ MyCompany.data.CoolProxy MyCompany.Application ~~~ 頂級名稱空間和實際的類名應該駝峰模式其它一切應該都小寫，例如: ~~~ MyCompany.form.action.AutoLoad ~~~ 不是使用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方法來創建類比較熟悉： ~~~ var MyWindow = Ext.extend(Object, { ... }); ~~~ 這種方法很容易遵循以創建一個新的類繼承自另一個。除了直接繼承,我們沒有其他方面創造流暢的API的類。這個排除諸如配置、靜態和mixins。我們稍后將詳細回顧這些物品在本指南。 讓我們再看看另一個例子： ~~~ My.cool.Window = Ext.extend(Ext.Window, { ... }); ~~~ 在本例中,我們想我們新類命名空間,并使其從Ext.window延伸。有兩個問題我們需要解決: 1.在給My.cool屬性賦值Window屬性的時候，需要先有這個對象存在。 2.ext . window需要存在/加載頁面,才能引用 解決第一個問題我們可以通過Ext.namespace(別名 Ext.ns)來解決。這個方法遞歸地通過對象/屬性樹創建他們如果他們不存在。這需要在之前添加Ext.extend ~~~ xt.ns('My.cool'); My.cool.Window = Ext.extend(Ext.Window, { ... }); ~~~ 第二個問題不容易解決,因為ext.window可能取決于許多其他類。反過來,這些依賴關系可能依賴于其他類的存在。出于這個原因,Ext JS 4之前編寫的應用程序引入整個ext-all.js的形式,不管應用程序是不是只需要一小部分的框架。 ### 新的方式 Ext JS 4消除這些缺點為類創建一個方法你需要記住:Ext.define。它的基本語法如下: ~~~ Ext.define(className, members, onClassCreated); ~~~ className:類名 members:一個對象,代表一個類成員的鍵-值對的集合 onClassCreated:一個可選的回調函數當所有定義的類和類本身是完全做好了準備的時候被調用。由于類創建的異步本性,這個回調在很多情況下是非常有用的。這些將在第四部分進一步討論 例如： ~~~ Ext.define('My.sample.Person', { name: 'Unknown', constructor: function(name) { if (name) { this.name = name; } }, eat: function(foodType) { alert(this.name + " is eating: " + foodType); } }); var aaron = Ext.create('My.sample.Person', 'Aaron'); aaron.eat("Salad"); // alert("Aaron is eating: Salad"); ~~~ 注意:我們創建了一個新的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()仍然需要手動調用。 你可以看到下面的配置示例： ~~~ Ext.define('My.own.Window', { /**@readonly */ isWindow: true, config: { title: 'Title Here', bottomBar: { height: 50, resizable: false } }, 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) { if (!this.bottomBar) { return Ext.create('My.own.WindowBottomBar', bottomBar); } else { this.bottomBar.setConfig(bottomBar); } } } }); /**A child component to complete the example. */ Ext.define('My.own.WindowBottomBar', { config: { height: undefined, resizable: true } }); ~~~ 這是一個如何使用它的例子: ~~~ 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 }); alert(myWindow.getBottomBar().getHeight()); // alerts 100 ~~~ ### 靜態變量 靜態變量可以使用statics配置來定義： ~~~ 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 } }); 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" ~~~ ### 錯誤控制和調試 Ext JS包括一些有用的特性,將幫助您調試和錯誤處理。 您可以使用Ext.getDisplayName()的任何方法的顯示名稱。這對拋出錯誤的類名和方法名描述來說是特別有用的: ~~~ throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here'); ~~~ 當有錯誤在使用Ext.define時拋出的時候，你應該查看這個方法還有類的堆棧信息，你可以看下谷歌Chrome中報錯的信息如下：