Cairngorm框架使用总结

最新推荐文章于 2022-05-12 15:42:56 发布

转载最新推荐文章于 2022-05-12 15:42:56 发布 · 744 阅读

flex 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Cairngorm框架的MVC分层架构及其实现逻辑，详细分析了从事件触发到数据更新的全过程，并提供了关键代码示例。

Cairngorm框架使用总结

从8月份开始接触Flex，因为要着急上项目，所以把在最短的时间最快的熟悉Flex成为了那段时间的主要任务。我和大多数在网络是搜索Flex学习教程，框架应用示例讲解资源的童鞋是有着一个共同的经历，熟悉其他的一些编程语言，了解一些事件驱动的实质内涵。但是作为一个普通人，想要尽快的去熟悉Flex ，如若有一些javascript和ajax的编程经验会更好一些（Flex中的语法和javascript很类似，并且有事件监听和异步通信等特点。）。

编程语言的通性有很多，数据类型、事件方法、控件应用，这些都是可以靠以前的语言基础来即时应用的，略微不同的可能就是一些属性、事件的名称变化，还有Flex的一些特殊效果和安全机制了。

我从熟悉Flex基础到接触Cairngorm框架，也就是个三五天的时间。当时接触到Cairngorm框架，从定义上来看，并没有那种了然于胸的感觉，从MVC分层来看待Cairngorm框架，若是没有进行Flex编程的话，一下子搞明白这个框架流程图（如下图）的详细含义，还是有难度的。这是一个非常详尽和简单的示意图，以下我主要分析一下这个流程图，以此将Flex中数据绑定，事件广播，远程调用等知识点关联起来。本文旨在帮助大家进一步了解Cairngorm框架，如需Demo，Q我即可。

1．宏观来看，这是一个MVC分层架构模型，并由以下7部分组成。

即按照流程图中的部分描述，可以得到以下信息。

a) Model(数据模型M)：使用singleton(单例)模式共享变量；全局变量、页面的数据绑定

b) VO Value Object)：储存特定值对象变量。Flex端实体类，通过Event机制作为参数传递

c) VIew(视图V)：将Model的数据绑定互组件并广播侦听Cairngorm Event；

d) Controller(控制器)：侦听Cairngorm事件并将其映射到Cairngorm Command；Flex特殊机制，来把Event和 Command关联起来

e) Command(命令)：调用Cairngorm Delegate或其它Command ，并更新Model；调用代理类实现业务逻辑或直接在Flex端实现业务逻辑

f) Delegate(委托)：实例化RPC(远程过程调用)并将其结果返回给Command；通过配置文件调用服务器端类方法实现业务逻辑

g) Business(业务)：定义RPC。

2. 从细节角度去分析这个框架流程，需要有一定的面向对象编程经验。

从View入手：My Contancts页面，体现的业务逻辑就是通过Add Contact将个人联系方式添加到右侧的List of Contacts中。

当点击 Add Contact 按钮，会触发如下事件，将当前页面中的数据封装到VO（Value Object）中的ContactVo里面，然后将ContactVo实体对象以传参形式通过Cairngorm Event机制传递。通过实例化一个AddContactEvent，然后dispach() 掉这个对象，这样框架内部会进行一个事件广播和事件捕获。

3. 接着看一下继承了Cairngorm Event 的AddContactEvent类。具体内容如下图，定义一个属性变量（从页面传参过来的实体类）或者还有其他一些标志量（如，定义一个flag来标示当前调用事件为Add或Update等事件）。这里需要注意将当前Event名称指定给父类（super）下图中的AddContactControl.EVENT_ADD_CONTACT为FrontController中定义的一个常量，用来标示当前Event的一个名称。

4. 事件进行捕获，通过FrontController中继承FrontController的AddContactControl类来将上面的Event和Command进行绑定。这样，当捕获到AddContactEvent的时候，会自动调用相应的AddContactCommand类。

整个框架实现逻辑的部分就是在Command这部分，在这里我们一般会调用Delegate（代理）类，通过这样调用Remote ObjectClass 来实现逻辑。

同样AddContactCommand 实现了Command和Responder（利用其回调函数机制）接口，按照框架流程图

onResult方法会在Delegate类中相应方法正常执行后被调用。如下图所示，在该方法执行中会将当前Event中传参传递过来的VO实体类添加一个全局变量contacts（位于model中，直接在页面的List of Contact上进行数据绑定）中去，由于Flex中数据绑定的特点（双向性），页面会自动将数据更新，显示当前已经添加进去的一条记录。