duansky'weblog

统计

留言簿(3)

友情链接

阅读排行榜

评论排行榜

关于extjs开发的方式

我觉得,开发EXTJS,首先要建立的就是组件化编程,你把一个form作为一个组件,也可以将半个页面都作为一个组件.当组件化编程之后你就要考虑分类别,分模块开发了,

我认为,一个组件一个JS文件,多个组件拼接成一个模块,这些组件都放在一个文件夹下,命名方法其实很简单,类似java如:
在App文件夹下的Scene文件夹内
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文件夹内
App.Business.CheckUser.js
    //同上
App.Business.Logout.js
    //同上

并且,切记,要把Extjs当做java来写,因此,你的程序只能有一个入口即只能允许整个程序中只出现一个
Ext.onReady(function(){

});
很多人不信Extjs可以这样写,说只能应用在小型的项目中,但是我可以告诉你,这样的写法完全适用与大项目,而且是项目越大越能展现出他的好处

我经历过刻骨铭心的失败总结出以下几点经验:
1.绝不使用全局变量(如有必要,可以用静态方法来做)
2.不能设置组件的(包括该组件下的小组件的)ID这个属性,(此组件的派生类你可以随意).
3.稀奇古怪的代码少写,因为你不能保证你的EXTJS版本永远停留在当前版本上(如果公司有钱买授权的话)
4.能在后台完成的业务逻辑坚决不在前台做,即使在前台做看起来比较简单(如果前台坐起来非常简单就算了,例如验证)
5.统一管理你的JSON生成.
6.规范你的代码


我下面有一段代码是我的风格,当然可能并不适合你:
Js代码 复制代码
  1. Ext.ns("App.Users.CURD");   
  2. /**  
  3.  * 必要的注释一个不能少,Javascript代码维护起来没有java好维护....  
  4.  *  
  5.  */  
  6. App.Users.CURD = Ext.extend(Ext.Panel,{   
  7.     //属性代码全部写在这里   
  8.     title:"CURD",   
  9.     //初始化组件(如果你的组件需要改变样式或者需要动它的dom,你可以重写父类的onRender,并把部分视图代码放在onRender函数中)   
  10.     initComponent:function(){   
  11.         App.Users.CURD.superclass.initComponent.call(this,arguments);   
  12.         //先定义自定义事件(如果必要的话)   
  13.            
  14.         //接着视图代码全部写在这里   
  15.   
  16.     },   
  17.     //方法函数全部写在这里   
  18.     //先将与后台数据交互的函数写出来   
  19.     addUser : function() {   
  20.         //对应后台同名的Action方法函数   
  21.     },   
  22.     delUser : function() {   
  23.         //对应后台同名的Action方法函数   
  24.     },   
  25.     updateUser : function() {   
  26.         //对应后台同名的Action方法函数   
  27.     },   
  28.     //供自己内部使用的函数跟在后面   
  29.     formClear : function() {   
  30.   
  31.     },   
  32.     //提供给外部调用的函数紧跟数据操作   
  33.     getSelectUsers : function(){   
  34.         return ......   
  35.     }   
  36.     setXXXX : function() {   
  37.     },   
  38.     //最后就是事件处理函数,因为函数比较多,事件处理往往伴随着页面逻辑,放在后面比较好找....混在中间不太好找   
  39.     onSubmit : function() {   
  40.   
  41.     },   
  42.     onDelet : function() {   
  43.   
  44.     }   
  45. });   
  46.   
  47. //*因为是基于UI的组件,因此一般都可以独立测试,测试通过后注释掉即可(注意我的注释写法)   
  48. Ext.onReady(function(){   
  49.     //.........   
  50. });   
  51. //*/  



最后一句....无论是ASP.NET组件(Coolite)还是什么可视化组件,前期学习都不要使用.

转自: http://www.javaeye.com/topic/486697

posted on 2009-10-16 22:36 duansky 阅读(364) 评论(0)  编辑  收藏 所属分类: Ext


只有注册用户登录后才能发表评论。


网站导航: