組織Javascript代碼的最佳方法

Question

你們如何組織你的JavaScript代碼？我知道將代碼存儲在一個外部.js文件中是一種很好的做法，這對於在多個頁面中運行的代碼來說很好，但是如果您有20個頁面，並且只有其中一個使用特定代碼功能。你是否爲該頁面創建了一個新的外部文件或者創建了內聯代碼？

Answer 1

我做兩件事情：

1. 我把我所有的網站的JavaScript中的一個或多個文件;
2. 我在每個使用任何Javascript的頁面上都包含該文件或文件;
3. 這些文件被有效地緩存，使得它們只被下載一次（直到它們改變）;和
4. 頁面從這些外部文件調用它們需要的功能。

如果您的網站是一個頁面，然後把它內聯。

如果您的網站是20頁，並且它們都使用一點Javascript，則將其全部放在一個文件中，將其包含在每個頁面中，並在每個文件中使用inlien Javascript調用函數。

我寫這個和更多在Supercharging Javascript in PHP。當然這是PHP特有的，但是這些原則是普遍的。

基本上每個額外的HTTP請求都是一個問題。所以如果你有20個頁面，每個頁面都有不同的Javascript文件，那麼這是一個問題，即使這些文件很小。最好將所有的Javascript結合在一個文件中，只需下載一次（使用有效的緩存）並使用你需要的。

給你舉個例子。外部JS文件包含：

function delete_user(evt) { ...} 
function suspend_user(evt) { ... } 
function unsuspend_user(evt) { ... } 

你的一個網頁包含：

$(function() { 
    $("#delete").click(delete_user); 
    $("#suspend").click(suspend_user); 
    $("#unsuspend").click(unsuspend_user); 
}); 

這樣你會得到一個包含所有網站的JavaScript，但它都沒有實際使用外部JS。使用來自頁面中的內聯代碼。這樣，沒有更大的JS文件的開銷。

無論你做什麼，都不要在Javascript文件中放入所有初始化。我曾經犯過這個錯誤，並將一個巨大的$（function（）{...}函數放入外部文件中，理由是如果相關ID不在頁面中，則不會發生任何事情。代碼爲頁面加載時間增加近半秒（而網站並非即大）

Answer 2

對於只有一個功能，最好是內聯編碼。 我不會在內部包含一個100KB的Util腳本文件來調用Trim函數。

如果文件已經被緩存了，那麼如果你在一個只調用一個函數的頁面中引用這個文件就不會有問題。

Answer 3

瀏覽器一旦擁有它就不應該重新下載javascript文件，所以我會把它放到單個Javascript文件中。這節省了另一個連接/請求到網絡服務器，它保持代碼在一個地方，而不是在HTML/JSP/PHP/etc文件中有script標籤和代碼。也就是說，它更易於維護，並且獲得代碼的開銷很小（除非它是一個1000行怪物，但完全是另一個問題），即使它沒有被使用。

並非我在某些文件中沒有script塊，對於非常非常特殊的情況。最後，它歸結於你滿意的事情 - 但是整個項目的一致性是最重要的，所以不要在一個地方有一個腳本，然後在其他地方做一些不同的事情。

Answer 4

我會說把它放在一個外部文件中。有可能你需要爲它增加新的功能，但是從SEO的角度來看，將它保存在外部文件中更可取。

Answer 5

這取決於您可能有一堆網頁，其中一個頁面可能只使用一個函數而其他頁面可能會使用其他一些不同的功能，我首先將功能稱爲Utility功能，然後編寫一個Utility.js。同樣適用於其他功能，並將它們放在它們各自的js文件中。

Answer 6

總是把JavaScript外部HTML文件。JavaScript問題在頁面中存在的地方是它通常存在於全局名稱空間中，這很容易導致名稱空間衝突，導致代碼崩潰。

所以，總是把JavaScript放在一個外部文件中。

這樣說你應該以面向對象的方式組織你的代碼。嘗試將代表單個執行點的整個應用程序捕獲到單個命名函數。總是使用每個函數的單個var命令編寫代碼，該函數應該放在函數的頂部，以便您的代碼更易於閱讀。確保所有變量和函數都使用var命令聲明，否則它們將進入全局名稱空間，這可能會失敗。將巨型函數的執行部分放到更小的子函數中，因爲這樣可以在調試或編寫增強時指向特定的命名塊時更易於維護代碼。

此外，請始終通過JSLint運行您的代碼以驗證語法的準確性。

Answer 7

如果我有選擇，我把JS函數放在外部文件中，但不是全部放在一個文件中。緩存或沒有緩存，我按其功能對文件進行分組，並將它們組織爲類似於Java包。如果我有一個實用程序功能，請說一些類似於trim()的通用功能，該功能會轉到最上面的JS文件，並且所有頁面都可以使用它。如果我有一些特定於某個部分的網站（未在其他部分使用）的東西，就像一個子包一樣，只是針對特定的部分......等等。

當然，你必須使用常識，所以你不要過頭，並讓我們說每個JS文件的功能。如果你有細粒度的JS文件，當你的網站發展，你會發現自己的功能從子包到上層包或其他方式。我認爲在大多數情況下，一個父級實用程序JS和一個JS每個站點功能應該足夠了。

Answer 8

如果你只有少量的代碼，我不認爲這是值得努力去分割它。

根據你有多少JS，考慮一個構建過程，可以將單獨的JavaScript文件連接成一個縮小的單一下載。

YUI是令人難以置信的模塊化。他們有一套「核心」套件，然後您可以使用您實際使用的小部件來補充這些套件。例如，我沒有興趣使用他們的文件上傳器小部件，所以不要包含JS。

緩存未來日期的JS。如果需要進行更改，請在SRC屬性的末尾附加版本標記，即my-code.js？v = 91

使用命名空間可以避免污染全局範圍。同樣，YUI在這方面非常有組織 - 參見YAHOO.namespace（）函數。