`
yuehuahappy
  • 浏览: 8226 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

flex 中module、component的区别

    博客分类:
  • Flex
 
阅读更多

今天要记录一下技术上的事情,根据我这两个月来的学习把module、component这两个用来解耦的东西做下较为详细的说明,以及这两个与主程序的 关系还有我所了解的通信方式做一下总结。

首先,module和components都可以把一个比较大的程序分成几个“部分”,这样每个部分可以单独开发和测试,更符合软件工程的“分而治之”思 想,也会大大减少开发的难度和尽可能的减少认为错误,而且还都可以复用。

module是可以动态加载和卸载的,也就是说它不是编译到主程序中的,可以做到想要的时候拿来,不想要的时候卸掉。因为module是预先编译的,但是 module不可以独立执行,一定要嵌到一个Application中才可以运行。注意:用它的时候用的是.swf,也就是编译之后的代码。简单的应用可 以用<mx:ModuleLoader>标签,在里面把url属性赋值就可以了,例如url="******.swf",复杂一点的就要用
moduleManager类来进行管理和控制了,跟其他的Manager是差不多,详细的根据Api吧。

component是静态的,它的用于自定义一个组件(类似于Button、dataGrid等),只要包含了定义好component的包,在Flex
Builder中的Design模式下就可以像拖拽Button一样来应用它,会非常的方便。它在应用的时候相当于把自己嵌进Application中,
要随着Application进行编译。这从某种意义上说有点像import和include的区别。在代码应用上,在Application中的
xmlns属性中引入定义好的component所在的包就可以了,例如:xmlns:something="components.*",标签中可以这
样引用<something:yourComponent>,yourComponent就像一个自定义的button。

建立module和component只需要在IDE中右键,其余的就自然明白了。下面趁热打铁,说一说通信上的事情。

首先,调用主程序的方法或者属性,都可以用parentApplication.sth来调用。理论上来说只要module可以调用主程序中的方法,那么
module和Application之间的所有数据交互任务就都可以完成了,只是实现起来会比较麻烦,我这样做过,包括module和module之间
通信,可以通过Application作为桥。而更为高级一点的技术是通过自定义事件和接口契约来进行更为随意的通信。比如说Application要和
Module通信,那么首先要明确module要提供出什么方法A(),然后定义一个接口,这个接口要继承IEventDispatcher,然后此接口
声明module想要提供的方法A(),之后module要实现这个接口,把A()方法实现,还要声明一个特定类型的事件,然后Application中
声明一个ModuleLoader,要通信的Module跟其关联,然后通过child as
接口的名字获得接口就可以监听特定事件,也可通过那个接口调用Module的方法了。听起来挺复杂的,其实确实挺复杂的。要比较了解接口和自定义事件,要 不挺难整明白到底怎么回事的。总之就是通过接口
和自定义事件来完成很随意的通信,不过实现起来还真是挺有难度的。

上面听起来挺蒙的,缕一下,就是通过一个接口(Module实现它,主程序通过Module获得它),来监听Module的事件和调用Module的方
法。对,就是这个意思。

通信上总结一下,Module和component都是可以parentApplication来调用主程序的方法和属性的;component可以指定
id,然后Application可以通过id直接调用component中的对外方法;Module貌似是行不通的,我没实现过,有人弄通了指教一下
哈;通过自定义事件是可以进行比较方便的通信,component和Module都可以;如果中间加上接口的话会更好,结构更清晰,解耦性更好,但同时实 现起来也相对麻烦些。本人经验尚浅,如有不妥,敬请指正~

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    避免Flex RSL重复load 提高module加载性能的swc

    首先,理解SWC(Software Component)是Flex中的一个关键概念。SWC文件是一种静态库格式,可以包含ActionScript类、资源、元数据等,使得开发者能够组织和重用代码。将常用的功能或组件封装在SWC中,可以减少RSL的...

    Flex 和 java 整合 教程

    6. **Flex Application, Module, Component**:Flex前端应用结构,包括主应用、模块和组件,以及Actionscript类,共同构建出用户交互界面。 开发团队分工明确: - 组长贾育锟负责文件管理和短消息模块。 - 楚京洲...

    Component_FTM.rar

    标题中的"Component_FTM.rar"表明这是一个与FreeRTOS(FreeRTOS Kernel)相关的组件,FTM是FlexTimer Module的缩写,常在微控制器(MCU)中用于实现定时器功能。这个压缩包文件包含了用于S32K144系列微控制器的FTM...

    springgraph.zip

    一个n的flex组件(SpringGraph Flex Component) SpringGraph Flex Component 有几个demo,不多做解释,用了就知道强大了,关于如何使用,以后在慢慢写了。 &lt;A href="http://mark-shepherd.com/thesaurus"&gt;...

    react-flexa:高度基于标准CSS API的自适应React Flexbox(CSS Flexible Box Layout Module)网格系统

    React弹性 高度基于标准CSS API的自适应React Flexbox(CSS灵活框...class Component extends React . Component { render ( ) { return ( &lt; Col xss=removed&gt; 25% width &lt; / Col &gt; &lt; Col xss=removed&gt; 25%

    Parsley Hello World 实例工程源代码

    7. **Contextual Component**:Parsley中的Contextual Component概念,指的是根据上下文环境创建和管理的对象。在这个实例中,登录组件可能就是一个上下文相关的组件,依赖于特定的上下文(如用户会话信息)。 8. *...

    Angular-9仪表板:使用Angular 9,Angular材质,Highchart和Flex布局从头开始创建Angular仪表板

    Scratch制作的Angular仪表板使用Angular 9,Angular Material,Highchart和Flex布局。 该项目是使用版本9.1.0生成的。 演示版 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改...

    angluar快速上手

    在`app-routing.module.ts`中配置路由,通过`RouterModule.forRoot()`方法定义路由表,然后在`app.component.html`中使用`&lt;router-outlet&gt;`指令展示路由对应的组件。 学习Angular的过程中,理解组件间通信、服务...

    Some technical documents of Parsley.

    标题中的“Parsley”指的是一个开源的ActionScript框架,主要用在Adobe Flex和Flash Platform上,用于构建富互联网应用程序(RIA)。这个框架提供了一种强大的依赖注入(DI)和命令模式实现,帮助开发者管理应用的...

    Flex-login

    运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中...

    FlexGraphics_V_1.79_D4-XE10.2_Downloadly.ir

    - FIX: When the curve contain more then one figure and they were all unconfined and curve have alternative brush then whole flex-object bounding rectangle was filed. - FIX: The MaskColor property ...

    看板:Angular 10-CSS(Scss-Bulma-Flex)-测试(Karma-Jasmine)-e2e(量角器-Jasmine)

    运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中...

    angular-material-starter:带有Bootstrap 4.6的Angular Material 11模板,用于响应式和渐进式Webapp,包括i18n翻译,Awesome字体图标,Angular Firebase,Angular Flex-layout,自定义和深色主题,Google字体

    代码脚手架运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。建造运行ng build来构建项目。 构建工件将存储在...

    Adam Freeman - Pro Angular_ Build Powerful and Dynamic Web Apps-Apress (2022).pdf

    了解模块(Module)、组件(Component)、服务(Service)和指令(Directives)等基本概念。 2. **数据绑定**:Angular的数据绑定允许开发者在视图和模型之间轻松交换数据。书中会讲解双向数据绑定、属性绑定、事件...

    ng-book2: The Complete Book on Angular5.r66随书源代码

    在 `app-routing.module.ts` 文件中,你可以看到路由配置,包括路由的定义、懒加载等。 5. **表单(Forms)**:Angular提供了两种表单模式——模板驱动和响应式表单。在 `forms` 目录下,你可以找到这两种表单的...

    ng-book2-angular-6-r68

    1. **Angular架构**:介绍Angular的基本组件,包括模块(Module)、组件(Component)、服务(Service)、指令(Directive)和管道(Pipe)。此外,还会讲解依赖注入(Dependency Injection)系统,这是Angular的...

    angular 仿windows 拖拽

    我们需要在模块中导入`DragDropModule`,然后在组件中使用`cdkDrag`和`cdkDropList`指令来标记可拖动元素和目标区域。 4. **事件监听**:通过监听`cdkDragStarted`, `cdkDragMoved`, 和 `cdkDragEnded`事件,我们...

    osmf_dev_guide

    深入学习 OSMF 中各个核心组件的功能及其工作原理,这将有助于开发者更好地利用这些组件来构建复杂的播放器。 **2. 掌握插件机制** 插件是 OSMF 的一大特色,通过开发自定义插件可以轻松扩展播放器的功能。开发者...

    Angular资料(权威指南及其相关插件与demo实现)

    1. **Angular权威指南**:这是一本详尽的教程,覆盖了Angular的核心概念和技术,包括模块(Module)、组件(Component)、服务(Service)、指令(Directives)、表单(Forms)、路由(Routing)等。权威指南帮助...

    Portfolio:使用Angular框架创建我的投资组合。 工作正在进行中

    1. 添加路由:在`app-routing.module.ts`中定义路由配置,将URL映射到投资组合组件。 2. 配置路由:在`app.component.html`中添加导航链接,使用`&lt;router-outlet&gt;`标签显示路由匹配的组件。 **六、服务和依赖注入**...

Global site tag (gtag.js) - Google Analytics