duansky'weblog

關(guān)于extjs開發(fā)的方式

我覺得,開發(fā)EXTJS,首先要建立的就是組件化編程,你把一個form作為一個組件,也可以將半個頁面都作為一個組件.當(dāng)組件化編程之后你就要考慮分類別,分模塊開發(fā)了,

我認(rèn)為,一個組件一個JS文件,多個組件拼接成一個模塊,這些組件都放在一個文件夾下,命名方法其實很簡單,類似java如:
在App文件夾下的Scene文件夾內(nèi)
App.Scene.ScreenManager.js
??? Ext.namespace("App.Scene.ScreenManager.XX","App.Scene.ScreenManager.YY");

App.Scene.ScreenControl.js
??? Ext.namespace("App.Scene. ScreenControl.XX","App.Scene. ScreenControl.YY");

App.Scene.Main.js
??? Ext.namespace("App.Scene. Main.XX","App.Scene.Main.YY");

在App文件夾下的Business文件夾內(nèi)
App.Business.CheckUser.js
??? //同上
App.Business.Logout.js
??? //同上

并且,切記,要把Extjs當(dāng)做java來寫,因此,你的程序只能有一個入口即只能允許整個程序中只出現(xiàn)一個
Ext.onReady(function(){

});
很多人不信Extjs可以這樣寫,說只能應(yīng)用在小型的項目中,但是我可以告訴你,這樣的寫法完全適用與大項目,而且是項目越大越能展現(xiàn)出他的好處

我經(jīng)歷過刻骨銘心的失敗總結(jié)出以下幾點經(jīng)驗:
1.絕不使用全局變量(如有必要,可以用靜態(tài)方法來做)
2.不能設(shè)置組件的(包括該組件下的小組件的)ID這個屬性,(此組件的派生類你可以隨意).
3.稀奇古怪的代碼少寫,因為你不能保證你的EXTJS版本永遠(yuǎn)停留在當(dāng)前版本上(如果公司有錢買授權(quán)的話)
4.能在后臺完成的業(yè)務(wù)邏輯堅決不在前臺做,即使在前臺做看起來比較簡單(如果前臺坐起來非常簡單就算了,例如驗證)
5.統(tǒng)一管理你的JSON生成.
6.規(guī)范你的代碼


我下面有一段代碼是我的風(fēng)格,當(dāng)然可能并不適合你:

Ext.ns("App.Users.CURD");
/**
 * 必要的注釋一個不能少,Javascript代碼維護(hù)起來沒有java好維護(hù)....
 *
 */
App.Users.CURD = Ext.extend(Ext.Panel,{
    //屬性代碼全部寫在這里
    title:"CURD",
    //初始化組件(如果你的組件需要改變樣式或者需要動它的dom,你可以重寫父類的onRender,并把部分視圖代碼放在onRender函數(shù)中)
    initComponent:function(){
        App.Users.CURD.superclass.initComponent.call(this,arguments);
        //先定義自定義事件(如果必要的話)
        
        //接著視圖代碼全部寫在這里

    },
    //方法函數(shù)全部寫在這里
    //先將與后臺數(shù)據(jù)交互的函數(shù)寫出來
    addUser : function() {
        //對應(yīng)后臺同名的Action方法函數(shù)
    },
    delUser : function() {
        //對應(yīng)后臺同名的Action方法函數(shù)
    },
    updateUser : function() {
        //對應(yīng)后臺同名的Action方法函數(shù)
    },
    //供自己內(nèi)部使用的函數(shù)跟在后面
    formClear : function() {

    },
    //提供給外部調(diào)用的函數(shù)緊跟數(shù)據(jù)操作
    getSelectUsers : function(){
        return ......
    }
    setXXXX : function() {
    },
    //最后就是事件處理函數(shù),因為函數(shù)比較多,事件處理往往伴隨著頁面邏輯,放在后面比較好找....混在中間不太好找
    onSubmit : function() {

    },
    onDelet : function() {

    }
});

//*因為是基于UI的組件,因此一般都可以獨立測試,測試通過后注釋掉即可(注意我的注釋寫法)
Ext.onReady(function(){
    //.........
});
//*/

最后一句....無論是ASP.NET組件(Coolite)還是什么可視化組件,前期學(xué)習(xí)都不要使用.

轉(zhuǎn)自: http://www.javaeye.com/topic/486697

posted on 2009-10-16 22:36 duansky 閱讀(375) 評論(0)  編輯  收藏 所屬分類: Ext