如何組織模塊化的web應用程序

Question

我有一個網站，其中有一個典型的「儀表板」頁面上有多個模塊。他們都與同一個數據庫進行通信，並使用同一組表格，其中一些表格可以完成書寫，顯示等工作。

我應該使用iframe來實現該功能還是結合所有代碼或者是否有其他選項？

這些模塊可以在客戶端JavaScript級別上相互交互。例如，我單擊模塊A中的一個按鈕，模塊B中的文本框將被隱藏。

此外，您如何實現這樣的功能，當我使用模塊A將數據寫入數據庫時​​，模塊B將知道是時候重新獲取新數據。

Answer 1

如果重新顯示它們迪您網頁的不同部分需要彼此溝通，那麼我認爲內聯框架不是一個好主意。 （雖然我可能會丟失一些東西。）

您可能想看看Backbone.js。它爲您提供了JavaScript中的模型/視圖框架，在模型更改時自動重新呈現視圖，這可能使您更容易讓所有模塊保持彼此同步。

你基本上會在加載頁面時在Backbone.js模型中複製數據庫對象，然後讓頁面模塊與其Backbone.js模型保持同步，而不是反覆輪詢服務器以查找已發生的更改無論如何，在頁面中。

Answer 2

我應該使用iframe來實現該目標還是結合所有代碼或者是否有其他選項？

更好：模板驅動的網站

而且，你怎麼做到這樣，當我用模塊A寫東西到數據庫，模塊B會知道它的時間來重新獲取新的數據。

有很多方法，例如：

1. 添加一個bool柱「標誌」，以標記行是否已被變更（假定1如果 修改，否則爲0）
2. 模塊B查詢服務器（你正在使用AJAX吧？）在給定的時間間隔來檢查 那些「標誌」，找回它們並設置爲0，然後根據需要

Answer 3

不應該有任何理由爲您所描述的內容使用iframe。一個類似於jQuery這樣的Javascript UI庫將所有的工作都放在了操縱網頁的不同元素上，同時保持標記更清晰，所以你應該首先檢查一下。

如果仍然無法解決您在不同模塊之間進行通信的問題，請查看Backbone.js：它是一個Javascript模型/視圖/控制器庫，可幫助您將模型（在您的情況中爲數據庫代碼）向其發送數據和/或響應其更新事件（您的儀表板小部件）的視圖。