首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex代码组织结构的1点经验

2012-11-23 
Flex代码组织结构的一点经验在开始设计部门内部太极项目二期的时候,就一直在反思一期工作中的哪些不足以及

Flex代码组织结构的一点经验

在开始设计部门内部太极项目二期的时候,就一直在反思一期工作中的哪些不足以及给组内同学带来的痛苦。
其中最让我苦恼的是界面的设计和开发,我很懒,当时在用EXTjs写界面的时候就想,如果每种界面都像VB的程序一样拖拖拉拉就可以搞出一个看似专业的界面就好了。再结合组内同学对界面的恐惧,我征求大家的意见后,决定在二期采用Flex做一个副客户端展示层。
这个决定挺痛苦的,EXTjs刚用熟练,就要扔掉重新去学Flex,而且要重做这个页面,想想都头疼。
我不会Flex,当初用EXTjs也是现学现卖,所以我觉得不用太复杂的技巧和功能的话,学习成本不会大。但有一点我很关注,就是Flex这种需要编译的语言和JavaScript的动态有很大的不同,我在一期设计EXTjs的代码组织方式的时候,得益于JS的动态执行,每个开发者负责一个独立的js文件,所有的事情都在自己这个文件里面做,不管对错,都不影响其它同学。但Flex如何把代码按照业务逻辑分开,这个我想了好久,下面是我最后的设计方案,我觉得可行性还不错,希望熟悉FLEX的前辈能过来指导下。

=========================FLEX代码组织结构========================

我想要做如下的界面,
每个组员负责菜单上的某个功能模块,
每个组员的代码和其它同学的代码完全隔离开,
但要可以和主窗体交互,这就要求每个模块的包中留有给主窗体代码的CallBack接口。
界面、菜单和大体布局如下:




以菜单为切入点讨论下,
我希望每个同学负责一个或几个模块,并且希望他们对每个模块的实现放到自己独立的一个代码文件夹内。
由于各模块的菜单是由各模块的实现者定义的,主窗体无法事先知道,所以必须在主窗体初始化的时候,通过初始化的回调函数得到各个模块的菜单项,然后拼凑起来,再赋值给主窗体的Menu控件展现出去。这里的代码我是这样设计的:

代码的文件结构:



在主窗体代码中这样引用:






这样菜单就可以动态的被拼装起来,无论以后如何更改菜单数据,主窗体的代码无需变动。但是菜单数据有了,每个菜单的动作却是不一样的,为了避免耦合,这是onclick的响应事件一定要由各个模块来完成,但在模块代码变更的时候如何又不影响主窗体代码呢?下面是我的解决方案。

由于用户的行为都是从菜单点击进来的,
所以我给每个模块一个ModuleID,这样主程序可以知道去访问哪个模块的CallBack函数去处理这个点击事件。
但模块是主程序所知道的,各个模块的菜单是由每个模块的负责人自己定义的,不应该放到主程序中处理,否则过于耦合,不方便扩展。
于是每个菜单项的一个ID就被当作CallBack函数的一个参数回传给所属模块,让模块处理自己的每个菜单项事件。不过需要定义这个ID的名字,而且要每个模块统一,这样主程序才能知道如何去访问这个属性,我将它命名为CallBackID。

我将模块按照package来管理,在每个package内实现自己的逻辑,并且提供CallBack函数。
比如点击菜单这个事件就需要CallBack函数来访问对应模块内部的代码处理。
在主程序内我是这样处理的




点击某一菜单后界面变化:




当菜单点击的时候,主窗体先响应点击事件,得到Event对象的ModuleID后,主窗体就知道给哪个模块的CallBack函数去处理该事件。但模块的子菜单如何处理,并不是主窗体代码能够关心到的,这里就把CallBackID回传过去,让模块的CallBack函数去处理。

拿一个模块的代码举例:

public function clearThis():void{this.target = null;this.item = null;}


即便如此 在flash.system.gc()后还发现有大量垃圾没有被销毁。尤其是create的UI控件。
仔细研究后感觉 Flex UI等控件本身就存在大量对象相互引用,而它使用的是FlashPlayer的垃圾回收器,导致gc不能正确回收Flex创建的UI Object。
所以这是硬伤,不好解决。 4 楼 CharlesCui 2009-12-17   jiorry 写道
2. 我说的Flex内存问题,你再仔细研究一下。
(1). Google一下“Flex垃圾回收”
(2). 用Flex Profiling 查看对象的生成与销毁数量上和内存上的变化。

我有类似的项目,后期发现应用的内存在长时间使用后 暴涨到1G多,整台电脑运行缓慢。仔细优化,不能解决。


谢谢提醒,我们在报表模块会有很多报表对象被加载到主窗体中,这部分存在溢出的风险很大,我尽量控制控件的创建和回收. 5 楼 民工精髓 2009-12-17   不太赞同。菜单应该只由最外层控制,不需要引用那么多模块,整个的菜单应该放在同一个专门的地方配置,除了路径之外,可以考虑配置它的处理模块是哪个,然后到最外层菜单加载了之后再决定。p_menu_root.appendChild固定写了那么多东西,就不灵活了 6 楼 foodyi 2009-12-18   flex解耦的一般做法应该是事件传递,程序中出现庞大的switch case块和if else块判断进行逻辑判断是否应该值得考虑一下呢?
以下是个人的一点建议,可以考虑使用springactionscript来实现,利用spring ioc来管理mxml和class,例如将meun的dataprovider通过spring来配置,每个模块中的一些属性或者初始化方法都通过配置文件管理. springactionscript集成了cairgorm框架,如果需要触发每个子模块就可以通过cairgorm框架发送event,然后由事先映射的command来执行.每个模块可以根据情况对一个自己的command,command可以用来加载模块或者一些逻辑处理. 如果主界面变动比较少的情况下,可以考虑使用flex liberary project讲这部分程序生成swc包,暴露出一些公共接口给子模块调用.
我比较懒不喜欢多打字,有什么问题大家互相探讨吧. 7 楼 CharlesCui 2009-12-18   民工精髓 写道整个的菜单应该放在同一个专门的地方配置

民工你好啊,
我想模块就这么几个是固定下来了,写死的问题不大,以后基本不会改动.
每个模块的菜单和事件由各个模块的负责人自己去搞,这样的话应该不放在同一个配置里面吧?小弟拙见.

foodyi 写道flex解耦的一般做法应该是事件传递,程序中出现庞大的switch case块和if else块判断进行逻辑判断是否应该值得考虑一下呢?
以下是个人的一点建议,可以考虑使用springactionscript来实现,利用spring ioc来管理mxml和class,例如将meun的dataprovider通过spring来配置,每个模块中的一些属性或者初始化方法都通过配置文件管理. springactionscript集成了cairgorm框架,如果需要触发每个子模块就可以通过cairgorm框架发送event,然后由事先映射的command来执行.每个模块可以根据情况对一个自己的command,command可以用来加载模块或者一些逻辑处理. 如果主界面变动比较少的情况下,可以考虑使用flex liberary project讲这部分程序生成swc包,暴露出一些公共接口给子模块调用.
我比较懒不喜欢多打字,有什么问题大家互相探讨吧.

foodyi你好,
后台并没有用spring,而且不打算绑定于java,但你说这个子模块和事件事先映射好的方法我很喜欢,还有你说的cairgorm框架倒是提醒我了,为何不用现有的Flex的框架去做呢,我在之前就没想过一个RIA也会有框架.

谢谢各位的友情提醒,经历了各位的破冰帮助之后,我以后的Flex设计会更成熟一点.但我现在还是很幼稚的,比如有些同学说的话我就没看懂,太菜了.

大家看着有问题就继续指导一下,不胜感激!

还有,报表这块儿也是很头疼的,N多东西,如何重复利用代码和自定义的模块也需要大家指导下.

Regards!
8 楼 民工精髓 2009-12-18   放在统一的地方进行配置是有很多好处的,比如以后要推出定制化产品,屏蔽一些功能,不用改代码,只改配置数据就可以了,又比如遇到产品合并,模块菜单要进行调整,怎么做方便呢?

上面那位兄台说的映射,也是我要表达的意思之一,频繁传递也容易导致耦合度过高,我个人觉得主菜单不应当跟模块有什么交互,它们都应该从服务端读写 9 楼 reilost 2009-12-18   我们组开发的时候是单独开发module,然后主页面使用xml文件进行节点配置.
这样每个模块单独开发,采用module进行加载,配置比较灵活些...

内存问题太烦人了...我们现在的程序各个模块点一遍内存就彪高...
viewstack我们尽量不用,都是在titlewindow里需要时才用,viewstack回收实在是...
titlewindow的话注意下还是可以被收掉的.
jiorry说的那个方法也不错但是还是会有一个实例,我觉得还是在写的时候就注意细节,尽量让titlewindow可以被回收掉.. 10 楼 foodyi 2009-12-18   后台并没有用spring,而且不打算绑定于java
--------------------
springactionscript是专门给flex用的和java没关系 11 楼 faiinlove 2009-12-18   思路很不错,程序设计的也很不多!
但是太过于传统,像VB时代的风格!
完全没有将ActionScript/Flex的灵活用上来!!

AS3/Flex是全异步的事件驱动,完全的符合解耦要求。

每个功能都是独立的,那个窗体只不过是一个展示容器·
还有就是建议多数页面用AS写,不要用Flex画·
你会发现一个Flex任何都不写,编译后也有32K左右,但是同样的一个界面,用AS写,编译后大约2K左右!!值得考虑啊!

12 楼 faiinlove 2009-12-18   再次看了一遍,发现确实事件没用上来!
啊,你应该感到超级遗憾,因为你没有体验到AS3的事件给你带来的那种便捷与快感!! 13 楼 chinakite 2009-12-18   如果你本来就没打算用Module的话,那这个思路基本可以达到要求
但是不用Module的话,这些模块下来,这个得有swf有多大?下载是个大问题啊

如果用Module的话,这个思路就完全不对头了 14 楼 reilost 2009-12-18   引用你会发现一个Flex任何都不写,编译后也有32K左右,但是同样的一个界面,用AS写,编译后大约2K左右!!值得考虑啊!

额,不知道是怎么编译的,我编译出来的怎么大小一样 15 楼 kevinyao 2010-01-08   不错,不过还有些不足.
1.考虑到权限, 菜单信息应该放到数据库管理. 和权限配合使用.
2.建议菜单和Module一一对应,(当然要设计Module的父类,设置一些共同的处理和变量) 开发人员各干各的互不影响.
3.自己设计一个全局的ModuleContainer, 负责每个Module的生命周期.和共通事件的分发.
特别注意:Module卸载的时候,对象引用的处理.

热点排行