如何轉換基於JavaScript的大型應用程序？

Question

我的情況是這樣的，我一直負責解決一個嚴重依賴於JavaScript的應用程序中的小問題和調試問題。其他任務之一將是使應用程序更易於理解和更具可擴展性。隨着新功能和新功能的添加，當前應用程序的修改和更新越來越困難。在一個函數中進行更改可以真正改變另一個函數中的內容。

我最初的想法是讓JavaScript的面向對象的，因爲它代表的只是一堆的功能，如果/ thens，開關等...

如果我的想法是正確的，並把它朝那個方向是要走的路，任何人都可以建議我可以使用的模型或格式來更好地分解應用程序。就像我應該變成一個對象，我應該把什麼變成方法或屬性等......我只需要某種指導。

如果我的想法是不正確的，朝着這個方向走並不是走的路，任何人都可以給我一些關於另一種方法的想法。

謝謝，

Answer 1

我會考慮在圖片中引入jQuery庫。

轉換幾個區域以查看您可以預期會收縮多少代碼。

Answer 2

我真的不知道你是什麼樣的代碼看起來像，所以我真的不能給你任何東西比一些普遍性的建議更好：

• 使用JavaScript庫，比如jQuery，MooTools，或Prototype。我會推薦jQuery，但我不能說我真的非常使用其他人。這裏的要點是，他們都是圖書館，這些圖書館可以讓您更輕鬆地完成常見任務，而這些任務讓您非常煩瑣。

• 如果您看到相同或相似的代碼行，請將這些行重構爲新函數。

• 避免幻數。它們使得代碼的可伸縮性降低以及可讀性降低。例如，如果您引用的期望長度恰好是100，請將100分配給變量，然後引用該變量。您可以偶爾掃描您的代碼並查找數字。除變量聲明外，除偶爾使用1,0,-1或2外，您不應看到非常多的數字。魔術弦也是如此。

• 將所有這些配置數據代碼保存在一個地方，以便輕鬆更改。你甚至可能擁有一個完全獨立的文件，其中包含所有數據。

• 將相關變量放入對象中。例如，代替具有xCoords，yCoords和zCoords的coords對象具有x,y和z作爲其屬性。你真的不應該有很多獨立的全局變量。

• 嘗試使用一致的代碼風格並嘗試給出明智的名稱。這本身可以使你的代碼更具可讀性。

對於一個快速現實生活中的例子，透過這塊small code project，看到在其評論進行了改進什麼樣的東西。您可以通過在Code Review網站上激活您的代碼改進技巧。

Answer 3

Backbone.js

骨幹供應結構，以JavaScript的沉重應用程序通過 鍵 - 值綁定和自定義事件，集合 提供機型的枚舉功能，觀點與陳述事件 處理了豐富的API，以及通過 REST風格的JSON界面將它全部連接到您的現有應用程序。

Backbone可能是一個很好的解決方案。這不是太侵入。如果沒有其他的綁定，模型和自定義事件可以真正幫助您按順序獲得該代碼。