基於TypeScript的FineUIMvc組件式開發

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

示例代碼：

鏈接: https://pan.baidu.com/s/1bJs4Bc 密碼: yz9j

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！