注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

北漂的小羊

Java编程,开发者,程序员,软件开发,编程,代码。新浪微博号:IT国子监

 
 
 

日志

 
 
关于我

在这里是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。让我们更好地用技术改变世界。请关注新浪微博号: IT国子监(http://weibo.com/itguozijian)

网易考拉推荐

ExtJS编程思想和开发方式,编写可重用的代码规范  

2013-01-15 12:08:12|  分类: Ext Js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

唠叨几句:不要认为 EXTJS 就是一个界面改良,在项目中,我仍然用 N 张页面,在 N 张页面部署 EXTJS .这个我不用多讲,效率问题大家都看得出来, EXTJS 是一个集成开发工具,注定他的开发包很大,一个 600 多 K 的 JS 文件,打算让它下载多少次呢?应该说, EXTJS 不仅是一个 AJAX 开发框架,也是一个富客户端开发平台, AJAX 是可以部署到多个页面,而完整的 EXTJS 是不能这样的做的,但是,他却能和 FLEX 一样,在一张页面中,完成项目中所有事件。

一个组件一个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.规范你的代码 

Ext.ns("App.Users.CURD"); 
/** 
* 必要的注释一个不能少,Javascript代码维护起来没有java好维护....  
* */ 
App.Users.CURD = Ext.extend(Ext.Panel,{ 
    //属性代码全部写在这里 
    title:"CURD", 
    //初始化组件(如果你的组件需要改变样式或者需要动它的dom,你可以重写父类的onReander,并把部分视图代码放在onReander函数中) 
    initComponent:function(){ 
        App.Users.CURD.superclass.initComponent.call(this,arguments); 
        //先定义自定义事件(如果必要的话) 
        //接着视图代码全部写在这里 
    }, 
    //方法函数全部写在这里 
    //先将与后台数据交互的函数写出来 
    addUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    delUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    updateUser : function() { 
        //对应后台同名的Action方法函数 
    }, 
    //供自己内部使用的函数跟在后面 
    formClear : function() { 
    }, 
    //提供给外部调用的函数紧跟数据操作 
    getSelectUsers : function(){ 
        return ...... 
    } 
    setXXXX : function() { 
    }, 
    //最后就是事件处理函数,因为函数比较多,事件处理往往伴随着页面逻辑,放在后面比较好找....混在中间不太好找 
    onSubmit : function() { 
    }, 
    onDelet : function() { 
    } 
}); 
    //*因为是基于UI的组件,因此一般都可以独立测试,测试通过后注释掉即可(注意我的注释写法) 

Ext.onReady(function(){ 
    //......... 
}); 
// 
*/

一、单页面
目前的应用方式:一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel , panel 中用 html 属性放置一个 iframe ,用 iframe 去加载另外一个全新的页面。

单页面方式:还是一个 Viewport ,点击每个菜单在 Viewport 的 center 区域生成一个 tab ,这个 tab 就是一个 panel ,但是 panel 中不使用 iframe ,而是将原来用 iframe 方式加载的内容,直接“画”在 panel 中。

目前的应用方式的问题:
1.  占用内存超高:每个 tab 都会用 iframe 加载一个全新的页面,每个页面都会载入一套完整的 ExtJS 的运行环境,由于浏览器的原因,这些 tab 关闭的时候内存不会完全释放,这样随着 tab 的开关,内存占用越来越多,占用几百 M 都没问题。
2.  center 区域内部的宽高,无法随浏览器宽高变化,无法自适应
3.  iframe 内外相互控制,内外沟通非常困难
4. 需要消耗额外的 js 解析时间,速度慢,重新加载要消耗解析 js 的时间
5.  用 iframe 有时候会导致一些莫名其妙的变形问题,滚动条问题

 

单页面方式:
1. 不用 iframe 加载, ExtJS 自己会释放无用的对象、事件占用的内存,一般一个应用只占用几十 M 内存
2.  由于是在一个页面内, ExtJS 自己可以掌控宽高自适应
3. 单一页面无此问题
4. 只需要第一次载入页面的时候加载 ExtJS 运行库
5.  很容易控制,无此问题
二、组件化
编写 ExtJS 程序,应该像搭积木一样,在 Viewport 这样一个框架中,我们添加各种积木块进去得到我们想要的形状。 Extjs 给我们提供了很多最小块的积木,每一块都是一个组件,我们可以将几个最小的组件组合成一个稍微大一点的组件,我们不可能每个功能都从最小的组件从头搭建, 我们可以收集一些更大一些的组件,实现这个层面的组件复用,组件是可大可小的,组件的复用也是可大可小的。组件化编程是一个思想,而不是一门技术,这个思 想可以用在任何地方。

三、 UI 与逻辑分离
可能大家都已近习惯了将 handler 和 listeners 与一大堆 Config Options 写在一起了。不能说这是一种错误的用法,但是这绝对不是好用法。类似下面这种代码是不是随处可见呢?

ExtJS编程思想和开发方式,编写可重用的代码规范 - 天涯草 - 天涯草
 
这种写法,再加上全集变量泛滥,就会导致整个 js 文件混乱不堪,一个 js 文件 3000 行代码,全局变量满天飞,想要的时候找不到,我想大家都遇到过吧。

ExtJS编程思想和开发方式,编写可重用的代码规范 - 天涯草 - 天涯草
 
再看一下下面这段代码,不会不感觉清爽很多呢

ExtJS编程思想和开发方式,编写可重用的代码规范 - 天涯草 - 天涯草
 

UI 与逻辑分离,就是在设计一个组件的时候,将 UI 写成一个类,将事件处理和其他逻辑写成另外一个类,两个类存放在两个不同的 js 文件中 ( 非必须 ) 。这样子的好处:

  1. 改动 UI 和逻辑,几乎不会相互影响
  2. 代码清晰规范,提高开发速度,降低维护成本
  3. 组件可以重用,界面可以重用
  4. 有利于开发规范的统一
  5. 因为使用继承,内存开销减少,运行速度加快

写EXTJS代码都是按着下载下来的example来写的。到最后JS文件中充斥各种的var和各种的id。可怕的是,在项目做了一年多,两年经历各种新增功能和BUG修改之后,有的js文件居然达到了5000多行。。。

      偶然间在做一个新模块的时候用上了EXT Designer。发现导出的文件结构是:数据、UI、事件分离的三个文件。再配合storeId,ref等等属性之后,代码结构回非常清晰。

      数据部分:一般在EXT中采用继承JsonStore,并定义storeId方便引用。
TestJsonStore = Ext.extend(Ext.data.JsonStore, {    
 constructor: function(cfg) {         
cfg = cfg || {};        
 TestJsonStore.superclass.constructor.call(this, Ext.apply({             
storeId: 'TestJsonStore',            
fields: [  {name: 'field'}] }, cfg)); } }); 


     UI部分:采用组件对象继承,xtype,并设置ref属性用来方便引用到组件对象。
TestViewUi = Ext.extend(Ext.Viewport, { layout: 'fit',
 initComponent: function() { 
Ext.applyIf(this, {
items: [{ xtype: 'panel', ref: 'testPanel',height: 518,width: 846,layout: 'border',items: [  ]                 }             ]  });         
 TestViewUi.superclass.initComponent.call(this);  } }); 


    事件绑定部分:
TestView = Ext.extend(TestViewUi, { 
initComponent: function() { TestView.superclass.initComponent.call(this);        //TODO add event     } });
  评论这张
 
阅读(1180)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016