2012-02-23 56 views
0

由於許多開發人員將我生產的基於Web的應用程序正在使用AJAX檢索數據和HTML。AJAX - 替換內容的元素/類/定時器清理

我是新來的網頁開發和JavaScript,但有幾十年在其他語言的編程經驗。

我正在使用mootools,這是一個很棒的框架,但一直在缺乏javascript中的析構函數,甚至是爲dom元素進行onDestroys/unloads。

我已經寫了大量的UI類(主要是爲了學習),他們中的很多人使用setInterval定時器來定期從WebServer獲取數據並更新頁面上的元素(主要來自相機的圖像)。

當使用菜單請求另一個頁面並且內容div被重新加載新的HTML和Javascript(使用Request.HTML)時,會出現大多數問題。這種簡單的方法將新版本中已有的所有元素替換爲新版本,並運行新腳本。舊腳本或舊對象中的任何定時器都將繼續運行。這給我留下了許多孤兒Clauses,元素和計時器。

我一直在閱讀關於mootools網站的更多信息,並意識到了我一直在犯的許多錯誤,並開始糾正許多問題。其中最大的不是使用Element.store和Element.retrieve,而是直接將我的類鏈接到元素。

我已經發現,重新加載的div的內容需要在調用Request.HTML之前調用destroy的所有子元素來釋放,但不會刪除(清除)正在運行的任何定時器。

所以我在這裏已經做了的jsfiddle deinitialize classes顯示我一直很努力,它的出現很好地工作,但下面,我想知道的是,

  • 這是個好主意嗎?
  • 有沒有其他問題我可能錯過了?
  • 你能看到這種類型的實現有什麼問題嗎?
  • 還是我重新發明輪子,錯過了 的東西?

說明

當類初始化它存儲本身與元件。

它也appendes(如有必要)本身到一個AssocClasses數組中,也存儲在元素中。

我創建了一個ClearElement函數,每當一個元素的內容被替換爲和AJAX調用或其他方法,它獲得div內的所有元素,並且如果他們有和AssocClasses數組連接,調用在數組中的每個類中取消初始化,然後調用每個直接子對象的銷燬來釋放元素/存儲。

任何信息,指針等將被最好地收到。

回答

1
Most issue occur when another page is requested with the menu and the content div is reloaded with new HTML and Javascript (using Request.HTML). This simple replaces all the elements already in the div with the new one and runs the new scripts. Any timers in the old scripts or old objects created will continue to run. This was leaving me with lots of orphaned Clases, elements and timers. 

我會重新考慮你的定時器存儲和在你的ajax調用中使用evalScripts。

將這些保留在您的AJAX請求之外。在進行同行代碼審查時,我很少看到需要這些的實例,並且可以以更好的方式完成。

也許被點擊了它觸發完全或回調函數的onSuccess

沒有看到你確切的代碼將很難進一步建議的鏈接。

+0

Thankyou Tim迴應,我知道我沒有給出太多的代碼繼續下去,我會盡力把一些東西放在網絡上,但那會休息一段時間。我正在考慮使用Assets動態加載JS,甚至每個應用程序的CSS都會讓管理員確保只添加一次。我將繼續使用firebug來了解其他網站如何做事和閱讀formus,我可能會最終停止嘗試讓所有看起來更像我使用的代碼(Delphi)並意識到應該如何完成。順便說一句我已經爲你的博客添加了書籤 – Dampsquid 2012-02-23 23:00:43

+0

資產是一個非常強大的類,我經常使用它。根據爲每個應用程序(或模塊或頁面,根據您的編碼)加載的JS文件而言,我通常會嘗試封裝對象內的所有變量和函數,以避免與其他動態加載的自定義腳本的名稱空間衝突。關於博客,在接下來的幾周內,它將重新推出一個新的響應式設計,以及我用完整的演示和文檔以及githiub鏈接編寫的大約15個課程。 – 2012-02-24 20:12:32