了解FineUIMvc的都知道，FineUIMvc中采用了大量的IFrame框架，对于IFrame的优缺点网上也有很多的讨论，这里我要说它的一个优点“有助于隔离代码逻辑”，这也是FineUIMvc官网对它的描述。IFrame在网页上下文中是完全独立的，这样也就不存在了样式及脚本之间的冲突问题。但由于IFrame与上下文之间是隔离的，在交互上也给我们带来了一些不便。
在接下来的文章中，我将主要介绍如何使用TypeScript对FineUIMvc进行组件式开发，而这里的组件就是基于IFrame，同时用TypeScript的方式来解决IFrame交互方面的不便。
为了能够更好的了解，本教程将围绕一个示例展开，下面为示例的截图
示例中有2个窗口（采用IFrame框架）及3个组件（分别为组件A、组件B、组件C），组件A在窗口1中显示，组件B及组件C在窗口2中分别切换显示
组件A中可以单击“在窗口2中显示组件B”及“在窗口2中显示组件”来切换显示组件B及组件C，同时组件B及组件C中也可以单击“刷新窗口1中的组件A”来刷新窗口1
发送按钮可以发送文本框中的文本到对应的组件中，下面的文本框将会显示来自其它组件发送过来的文本
介绍完示例后，我来说明一下数据发送与接收的流程，首先当组件A往组件B发送数据时，它并不是通过JS直接发送给组件B，而先回发到服务器，经服务器处理后（在发送文本的后加上GUID），再传输到组件B中，其它的发送按钮也是一样的道理，都要经过服务器处理后再回传回来。可以通过显示及刷新按钮来重新加载组件，但这也不会影响它们之间的数据交互。
发送数据后的示例图
这个示例只演示了一个简单的数据交互，在现实场景中组件与组件之间会存在着大量的数据交互，同时组件中也会夹杂着其它的非FineUIMvc控件，这样我们又该如何处理呢？
下面为组件交互的核心代码（TypeScript代码），示例代码还在整理中，事后会放到网上供大家下载。
1 private init() {
2 UI.window1.onReady(() => {
3 var aComponent = this.getAComponent();
4 if (aComponent) {
5 aComponent.onSendToB((e, m) => {
6 var bComponent = this.getBComponent();
7 if (bComponent) {
8 bComponent.receiveAData(m);
9 }
10 });
11
12 aComponent.onSendToC((e, m) => {
13 var cComponent = this.getCComponent();
14 if (cComponent) {
15 cComponent.receiveAData(m);
16 }
17 });
18
19 aComponent.onShowBComponent(() => {
20 BComponent.open(null, UI.window2);
21 });
22
23 aComponent.onShowCComponent(() => {
24 CComponent.open(null, UI.window2);
25 });
26 }
27 });
28
29 UI.window2.onReady(() => {
30 var bComponent = this.getBComponent();
31 if (bComponent) {
32 bComponent.onSendToA((e, m) => {
33 var aComponent = this.getAComponent();
34 if (aComponent) {
35 aComponent.receiveBData(m);
36 }
37 });
38
39 bComponent.onRefreshAComponent(() => {
40 AComponent.open(null, UI.window1);
41 });
42 }
43
44 var cComponent = this.getCComponent();
45 if (cComponent) {
46 cComponent.onSendToA((e, m) => {
47 var aComponent = this.getAComponent();
48 if (aComponent) {
49 aComponent.receiveCData(m);
50 }
51 });
52
53 cComponent.onRefreshAComponent(() => {
54 AComponent.open(null, UI.window1);
55 });
56 }
57 });
58 }