duansky'weblog

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

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

我認(rèn)為,一個(gè)組件一個(gè)JS文件,多個(gè)組件拼接成一個(gè)模塊,這些組件都放在一個(gè)文件夾下,命名方法其實(shí)很簡(jiǎn)單,類似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來(lái)寫,因此,你的程序只能有一個(gè)入口即只能允許整個(gè)程序中只出現(xiàn)一個(gè)
Ext.onReady(function(){

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

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


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

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

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

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

    },
    onDelet : function() {

    }
});

//*因?yàn)槭腔赨I的組件,因此一般都可以獨(dú)立測(cè)試,測(cè)試通過(guò)后注釋掉即可(注意我的注釋寫法)
Ext.onReady(function(){
    //.........
});
//*/

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

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

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