ExtJS教程（3）--- Ext中類的使用

標籤：extjs   javascript   

本章僅僅介紹Ext中類的基礎知識，一些進階知識會在以後的章節中穿插介紹

註：由於上傳較為麻煩，且圖片佔用篇幅較大，所以在以後的文章中如果不是特別必要，將不會插入很多圖片，最終的執行結果請大家自行驗證。

1、定義一個類

//使用Ext定義一個類Ext.define('Person',{name:'jaune',age:18});//建立一個類var person = new Person();console.log(person);

從打出來的結果中可以看出我們定義的屬性已經出現在了類中。這是Ext中最簡單的類的定義方式

注意中的superclass，我們用Ext定義的類如果沒有指明繼承自哪個類，預設都是繼承自Ext.Base，這個類就相當於Java中的Object類，是Ext所有類的基類。如何繼承其他類會在下面講到。

2、Ext中建構函式

Ext.define('Person',{name:'jaune',age:18,constructor:function(config){Ext.apply(this,config);}});//建立一個類var person = new Person({name:'petty'});console.log(person);

這裡的apply與第二章中的apply類似，Ext同樣有applyIf函數，用法與第二章中的applyIf類似，第二章中的apply和applyIf函數就是仿照的Ext中的這兩個函數寫的.。如果大家有興趣查看源碼的話可以再Ext的協助中找到Ext.apply方法然後點擊後面的“view source”查看其源碼。

3、類的繼承

//使用Ext定義一個類Ext.define('Person',{name:'jaune',age:18,constructor:function(config){Ext.apply(this,config);}});//類的繼承Ext.define('Man',{extend:'Person',sex:'Male',constructor:function(config){//這裡是為了確保建立的對象中的sex屬性是Male，如果config中有sex屬性就刪除這個屬性if(config.hasOwnProperty('sex')){delete config.sex;}/* * callParent的意思就是調用父類同名的方法，這裡用作繼承父類構造方法 * 比如父類中有一個toString方法，在子類的toString方法中調用this.callParent()方法，則會執行父類中的toString方法 * 這個大家可以親自驗證 */this.callParent([config]);},//這個方法是為了方便列印toString:function(){return {name:this.name,age:this.age,sex:this.sex};}});var man = new Man({name:'tom',sex:'Female'});console.log(man.toString());/* * 列印結果如下 * Object {name: "tom", age: 18, sex: "Male"}  */

man對象建立的過程是，new對象時將config傳入Man類的建構函式中，然後Man的建構函式將sex屬性過濾掉，然後調用父類的構造方法將config中的屬性賦予man對象

4、類的靜態屬性和靜態方法

/** * statics 可以包含類的靜態和靜態方法，但是不能被子類繼承 * inheritableStatics 與statics類似但是可以被子類繼承 */Ext.define('DateUtil',{inheritableStatics:{currentDate:Ext.Date.format(new Date(),'Y-m-d'),getCurrentDate:function(formatStr){if(Ext.isString(formatStr)){Ext.Date.format(new Date(),formatStr);}else{return this.currentDate;}}}});console.log(DateUtil.currentDate);Ext.define('TimeUtil',{extend:'DateUtil',statics:{currentTime:Ext.Date.format(new Date(),'Y-m-d H:i:s')}});console.log(TimeUtil.currentDate);

上面的兩個類，如果DateUtil中用的是statics屬性來定義靜態屬性和方法則TimeUtil無法繼承

5、單例在Ext中定義單例模式的類非常簡單，在定義類的時候加上singleton:true 就表示要定義的類為單例，剩下的事情Ext會替你解決，只需要像定義普通類一樣編碼就可以了。

Ext.define('DateUtil',{singleton:true,currentDate:Ext.Date.format(new Date(),'Y-m-d'),getCurrentDate:function(formatStr){if(Ext.isString(formatStr)){Ext.Date.format(new Date(),formatStr);}else{return this.currentDate;}}});console.log(DateUtil);

JS中的單例其實就是將類執行個體化，可能沒有大家想的那麼複雜