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

本文地址： http://blog.csdn.net/sushengmiyan/article/details/38479079

本文做者：sushengmiyan

-------------------------------------------------------------資源連接-----------------------------------------------------------------------

翻譯來源  Sencha Cmd官方網站：    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中報錯的信息以下：