你如何組織你的Javascript代碼？

當我第一次使用Javascript時，通常只需將我需要的任何東西放入函數中，並在需要時調用它們。那是當時的情況。你如何組織你的Javascript代碼？

現在，我正在用Javascript構建越來越複雜的Web應用程序;利用其更具響應性的用戶交互，我意識到我需要使我的代碼更具可讀性 - 不僅是我，還有替代我的人。除此之外，我希望在幾個月之後，當我閱讀我自己的代碼時，減少'這到底是什麼，爲什麼要這樣做'（是的，我在這裏誠實，我確實有什麼是我想的時刻我自己，雖然我試圖避免這種情況）

幾個星期前，我進入了Joose，到目前爲止，它一直很好，但我想知道其他人做了什麼使他們的塊代碼變得有意義段，並由下一位程序員讀取。

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

因此，如果您不瞭解上述情況，您是否使用面向對象的操作。如果你不使用什麼？

來源

2009-08-28 Dhana

對於真的 JS重載的應用程序，你應該嘗試模仿Java。

有儘可能少的JS在你的HTML越好（最好 - 剛剛調用了自舉功能）
打破代碼爲邏輯單元，讓他們都在不同的文件中
使用腳本來連接/文件再壓縮成一個單一的包，你將作爲您的應用程序的一部分
使用JS的命名空間，以避免弄亂全局命名空間：

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

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

來源

2009-08-28 03:13:18 levik

我忘了命名空間。這是一個很好的迴應。您也可以嘗試使用私有和受保護的變量，而不是所有事情都必須公開。 – 2009-08-28 18:27:48

@JamesBlack在JS中並不總是實用。通過原型定義的方法無法訪問專用變量，因爲它們必須在構造函數中定義爲局部變量，然後通過在此處定義的方法通過閉包來訪問。 – Asaf 2012-05-19 15:42:02

我最近一直在做大量的閱讀和研究，試圖找出如何處理我的JavaScript組織。這是我最喜歡的做法。 – theblang 2012-12-19 17:36:41

我使用不顯眼的JavaScript，因此，在腳本標記之外，我沒有在html中保留任何javascript。

兩者完全分開。

當DOM樹完成時，JavaScript函數將啓動，該函數將通過html並添加javascript事件以及其他需要更改的內容。

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

因此，舉例來說，如果我有UI功能的話，我可以給他們打電話：myapp_ui_functions.js

我嘗試在文件名把應用程序的名稱，除非有一些JavaScript是常見的幾個項目，比如strings.js。

來源

2009-08-28 01:41:28

這是正確的，我只想補充一點，用jQuery或Prototype更容易實現。 – David 2009-08-28 01:43:23

不錯，我喜歡讓Javascript文件類似於HTML頁面的想法（我也是這樣做的大型應用程序）。我喜歡不顯眼的代碼。它讓我熱血沸騰地看到HTML標籤上的「onclick」事件。 – Dhana 2009-08-28 01:45:03

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

我也決定使用ContentPlaceHolder作爲正好在關閉正文標記之前的腳本的MasterPage方法。標準的jQuery/jQuery用戶界面加載，其他常見的JS在MasterPage中的腳本佔位符之前。我在MasterPage的頂部有一小部分JS，它定義了一個數組，用於存放部分視圖需要在頁面加載時運行的任何函數。這些函數從MasterPage中的基本document.ready（）函數運行。

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

來源

2009-08-28 01:44:02 tvanfosson

我喜歡jQuery插件的想法，但是說你的應用程序中有很多事件發生，你如何分解事件處理部分？你願意分享的任何代碼？我喜歡看另一個人的代碼，看看我能做些什麼來改善自己。 – Dhana 2009-08-28 01:49:50

你可以在我的博客上找到我的幾個插件：http://farm-fresh-code.blogspot.com。 – tvanfosson 2009-08-28 01:57:30

另外，如果你想要去OO重，檢查出mochikit：http://www.mochikit.com/

來源

2009-08-28 01:47:17 David

David，現在，我結婚了jQuery，因爲我將它介紹給我當前的Web開發團隊和我未來5天。但是，我一定會檢查出來。 – Dhana 2009-08-28 01:54:25

是的，不，這是一個很好的婚姻:) jQuery是驚人的。 – David 2009-08-28 02:43:59

我有（通常）一個文件，其中包含了一堆的功能，就是這樣。這包括在每個使用Javascript的頁面中。在自己的網頁，我會像調用功能：

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

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

我也使用不顯眼的Javascript，這對我來說意味着jQuery（還有其他的圖書館是不顯眼的）。

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

如果我有大量的Javascript或該網站被有效地分割成多個區域，那麼我可能會分裂的Javascript，但情況並非常見。

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

來源

2009-08-28 01:48:03 cletus

我做了一個depandency系統，允許我調用load（'level'）並且Javascript會請求'javascript.php？jquery; jqueryui; level'。 PHP將請求的所有文件附加到一個響應中（並且將最優化地縮小和緩存它）。這意味着我可以拆分我的Javascript，並且幾乎總是比加載一個大文件更有效率（因爲我不加載我不需要的東西）。 – strager 2009-08-28 01:59:48

不過，我確實喜歡你創建單獨函數的想法......做某些事情...嘿，現在聽起來很明顯，但是當我寫代碼的時候它並沒有！ xD – strager 2009-08-28 02:00:38

@strager，重申您的第二條評論。是的，是lambda的一個缺陷。 – 2009-08-28 03:18:05

我發現使用面向對象方法開發你的JavaScript是要走的路，如果你希望它是乾淨的，可讀的，甚至有點安全。我張貼以下問題

Cleanest format for writing javascript objects

，並獲得關於如何寫我的javascript代碼以及一些精彩的迴應。如果您遵循這些基本原則，您可以輕鬆地使用幾乎任何庫，例如yui，jquery和prototype。

來源

2009-08-28 01:56:18 Zoidberg

你如何組織你的Javascript代碼？

回答

相關問題