你如何組織你的Javascript代碼？

Question

當我第一次使用Javascript時，我通常只需將我需要的東西放入函數中，並在需要時調用它們。 就在那時。

現在，我正在用Javascript構建越來越復雜的Web應用程序; 利用其響應更快的用戶交互，我意識到我需要讓我的代碼更具可讀性 - 不僅是我，還有任何取代我的人。 除此之外，我希望在幾個月后閱讀我自己的代碼時，減少“我為什么這么做”的時刻（ 是的，我在這里說實話，我確實有什么想法，我在思考片刻的時候自己，雖然我盡量避免這種情況 ）

幾個星期前，我進入了Joose，到目前為止，它已經很好了，但我想知道其他人如何將他們的代碼變成有意義的部分並且可供下一個程序員閱讀。

除了使其可讀之外，您將HTML與代碼邏輯分離的步驟是什么？ 假設您需要使用數據創建動態表行。 你是否在你的Javascript代碼中包含它，將td元素附加到字符串或者你做了什么。 我正在尋找現實世界的解決方案和想法 ，而不是某些專家提出的一些理論觀點。

那么，如果您不理解上述內容，您是否使用OOP實踐。 如果你不這樣做你用什么？

Answer 1

對於真正的 JS重型應用程序，您應該嘗試模仿Java。

• 在HTML中盡可能少的JS（最好是 - 只需調用bootstrap函數）
• 將代碼分解為邏輯單元，將它們全部保存在單獨的文件中
• 使用腳本將文件連接/縮小為一個捆綁包，您將作為應用程序的一部分
• 使用JS命名空間可以避免混亂全局命名空間：

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

即使您沒有使用任何框架，使用所有這些技術將產生一個非常易於管理的項目。

Answer 2

我使用不引人注目的javascript，因此，在腳本標簽之外我不會在html中保留任何javascript。

兩者完全分開。

一個javascript函數將在DOM樹完成時啟動，它將通過html並添加javascript事件，以及需要更改的任何其他內容。

為了組織起見，我傾向於使用一些javascript文件命名，類似於他們使用的html頁面，然后對於常見功能，我傾向於按照他們的工作對它們進行分組，並選擇一個解釋它的名稱。

所以，例如，如果我有UI函數，那么我可以調用它們：myapp_ui_functions.js

我嘗試將應用程序的名稱放在文件名中，除非有一些javascript是幾個項目共有的，例如strings.js。

Answer 3

我（通常）有一個文件包含一堆函數，就是這樣。 這包含在每個使用Javascript的頁面中。 在頁面本身中，我將調用以下函數：

$(function() {
  $("#delete").click(delete_user);
  $("#new").click(new_user);
});

其中delete_user()和new_user()在外部文件中定義。

我也使用不引人注目的Javascript，對我來說這意味着jQuery （還有其他不引人注意的庫）。

您不希望每個頁面都有單獨的文件。 這只意味着更多不必要的外部HTTP請求。 有了一個文件 - 假設你已經有效地緩存了它 - 它將被下載一次而就是它（直到它改變）。

如果我有大量的Javascript或該網站被有效地分成多個區域，那么我可能會拆分Javascript，但事實並非如此。

另外，就我的源代碼而言，我可能有多個JS文件但我經常最終將它們組合成一個客戶端下載（以減少HTTP請求）。

有關多個javascript / css文件的更多信息：最佳做法？ 和PHP中的Javascript 。

Answer 4

我一直在重寫我的可重用代碼作為jQuery插件。 當我開始做ASP.NET MVC時，我從Prototype轉移到了jQuery。 加班我將可重復使用的代碼，或者至少是從基於Prototype的OO到jQuery樣式的插件遷移了很多。 其中大部分都存儲在自己的JS文件中（主要是內部網應用程序，因此盡管有額外請求，頁面加載速度仍然很高）。 我想我可以添加一個構建步驟，如果需要，可以合並這些。

我還決定使用MasterPage方法，該方法使用ContentPlaceHolder作為關閉正文標記之前的腳本。 標准的jQuery / jQuery UI加載，任何其他常見的JS就在MasterPage中的腳本占位符之前。 我在MasterPage頂部有一點JS，它定義了一個數組，該數組包含部分視圖需要在頁面加載時運行的任何函數。 這些函數從MasterPage中的基本document.ready（）函數運行。

我的所有JS都與我的標記完全分開。 某些JS可能存在於部分視圖中 - 當部分可能被多次包含以使其特定於視圖的實例時，這些被封裝 - 但通常不是。 通常只包含在占位符中，以便它加載到頁面底部。

Answer 5

此外，如果你想要OO重，請查看mochikit： http ： //www.mochikit.com/

Answer 6

我發現如果你希望它是干凈的，可讀的甚至是安全的，那么使用OO方法開發你的javascript就是你的選擇。 我發布了以下問題

用於編寫javascript對象的最干凈的格式

並得到了一些關於如何編寫我的javascript代碼的精彩回復。 如果您遵循這些基本原則，您幾乎可以使用任何庫，例如yui，jquery和prototype。