了解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     }

基於TypeScript的FineUIMvc組件式開發（開頭篇）