需要幫助重構JavaScript代碼更易於修改，維護並更加強大

Question

搜索頁面包含很多方面，這些方面可通過麪包屑進行跟蹤，其他部分可添加到狹窄搜索，保存搜索，結果計數即時更新，很多東西。我正在使用JavaScript和jQuery來處理所有的UI，這個代碼基本上是一些功能和一個很棒的文檔準備功能。觸發搜索時，將根據UI中顯示的內容收集標準。例如，爲了獲得一些方面，我簡直就是看看當前顯示的是什麼碎片，並看看他們的數據（）/ text/class /等等。確定標準。

我需要的是如何組織和設計這種類型的應用程序的代碼的幫助。我沒有一個連貫的問題，但我會嘗試一些。

• 是否可以像對待Java中的對象那樣對待DOM元素？例如我有一個麪包屑，這真的只是一個div。我有創建麪包屑，刪除它們等功能。我將文本和數據（）視爲對象的字段。

• 繼續前面的例子，我實際上沒有一個Crumb JavaScript對象。我是不是該？保持對象和元素之間關聯的最佳方式是什麼，特別是因爲這些對象和元素不斷被創建和刪除。

• 稍微切線，但任何測試建議？沒什麼我所做的就是連單元測試，這確實不坐的權利與我...

TL; DR不得不盡快建立一個複雜的搜索UI，同時學習JavaScript和它成爲一個爛攤子。需要有關最佳做法的幫助以及如何組織我的代碼。

Answer 1

既然你已經使用jQuery，您有以下選擇利用它的優勢：

1. 的jQuery已經提供了繞着DOM對象上提供了包裝和大量的方法DOM包裝。你可以使用它而不是創建你自己的包裝器對象。

2. 如果這樣可以使項目1更加實踐，那麼您可以輕鬆創建新的方法來操作jQuery對象。 jQuery插件並不比jQuery.myMethod = function() { code here }更難。

3. 如果你想讓你自己的對象擁有你自己的方法，那麼它可以包含你的DOM元素的相關DOM元素或相關的jQuery包裝器（取決於你是否經常需要一個jQuery對象來操作DOM元素）。

4. jQuery提供了.data()，它允許您以只要DOM元素一直存在但不會導致內存泄漏的方式訪問和存儲DOM元素的屬性。如果您不構建自己的對象，則可以使用它來存儲與DOM元素關聯的實例數據。如果您正在構建自己的包含DOM元素的對象，那麼您可以直接將屬性存儲在自己的對象上。

5. 通常最好不要在DOM元素本身上存儲大量的自定義屬性，所以你應該將它們存儲在你自己定製的javascript對象中，或者使用類似jQuery的.data()之類的東西。

更多的細節如何，最好做到這一點需要你做什麼，你的業務是什麼，你的元素的壽命是如何工作的，你需要跟蹤哪些實例數據深入的瞭解，如何訪問和存儲或找到對這些元素的引用等等......沒有單一的答案，因爲適當的架構取決於許多你沒有透露的要求，除非是非常一般的水平。