你如何管理你的Javascript文件？

Question

如今，除了我們自己編寫的Javascript文件外，我們每頁還有大量的Javascript庫。 你是如何管理它們的？ 你如何以有組織的方式將它們縮小？

Answer 1

組織

我的所有腳本都保存在我在網站上工作時遵循的目錄結構中。 目錄結構通常如下所示：

+--root
   |--javascript
      |--lib
         |--prototype.js
         |--scriptaculous
            |--scriptaculous.js
            |--effects.js
            |--..
      |--myOwnScript.js
      |--myOwnScript2.js

如果我在團隊中工作時使用過多的腳本，那么我通常會創建一個自定義目錄，在該目錄中我們將按關系組織腳本。 盡管如此，這種情況並不常見。

壓縮

雖然那里有很多不同的壓縮器和混淆器，但我總是回到YUI Compressor。

入選

除非網站使用某種形式的母版頁，CMS或某些內容來指示我無法控制的頁面上包含的內容，否則我只是為了小的性能而僅包含了給定頁面的腳本。 如果頁面不需要任何腳本，則該頁面上不會包含腳本。

Answer 2

首先， YUI Compressor 。

讓它們井然有序取決於你，但我見過的大多數團體剛剛提出了一個對他們的應用程序有意義的約定 。

通常最佳的方式是打包文件 ，使得您可以使用少量軟件包，這些軟件包可以包含在任何給定頁面中以實現最佳緩存。

您也可以考慮將您的javascript划分為易於在整個團隊中共享的細分。

Answer 3

Cal Henderson（Flickr成名）在一段時間內寫了“快速服務JavaScript” 。 它涵蓋資產交付，而不是組織，但它可能會回答您的一些問題。

以下是要點：

• 是的，您應該在生產中連接JavaScript文件以最小化HTTP請求的數量。
• 但是你可能不想連接成一個巨大的文件; 您可能希望將其分解為邏輯片段並將傳輸成本分攤到多個頁面。
• gzip壓縮很好，但是你不應該將gzip資源提供給IE <= 6，所以你可能還想縮小/壓縮你的JavaScript。

我將添加一些我自己的要點：

• 您應該提出一個適用於開發和生產的解決方案。 在開發模式下，它應該根據需要引入額外的JavaScript文件; 在生產中它應該提前捆綁所有東西。 從一種行為切換到另一種行為應該像設置標志一樣簡單。
• Rails 2.0通過資產緩存處理所有這些; 其他Web應用程序框架可能提供類似的解決方案
• 另一個答案表明，將第三方庫放在lib目錄中是一個好的開始。 如果有意義的話，您也可以將自己的JS文件划分為子目錄。 理想情況下，您將能夠以這樣的方式排列它們，即給定子目錄中的文件可以連接成一個文件。

Answer 4

我將為所有javascript創建一個文件夾，為第三方/共享庫提供一個子文件夾，並為站點的每個組件提供子文件夾，以保持一切有序。

例如：

/
+--/javascript/
    +-- lib/
    +-- admin/
    +-- compnent1/
    +-- compnent2/

然后在構建過程中通過minifier / obfuscator運行所有內容。

Answer 5

我最近一直在使用這個： http ： //code.google.com/apis/ajaxlibs/

然后有一個“jscripts”文件夾，我保留自定義代碼。

Answer 6

在我的上一個項目中，我們有三種JS文件，它們都在JS文件夾中。

1. 圖書館代碼 。 大多數所有頁面都使用了大量函數，因此將它們放在一個或幾個文件中。
2. 課程 。 它們有自己的文件，根據需要組織在文件夾中，但不一定如此。
3. 特設JS 。 特定於該頁面的代碼。 這些文件保存在與它們應運行的JSP頁面同名的文件中。

最大的努力是將前兩種代碼中的大部分代碼放在一起，讓自定義代碼只知道要調用什么，以及何時調用。

Answer 7

這可能與您正在尋找的方法不同，但我一直在博客引擎中使用JavaScript模板的想法。 簡而言之，您使用數據庫為頁面ID分配Javascript模板，它將動態地包含和縮小與該模板關聯的所有JavaScript文件，並在模板ID作為文件名的服務器端緩存中創建文件。 加載頁面時，它會調用模板文件，該文件首先檢查文件是否存在於緩存中，如果存在，則加載它。 如果它不存在，它會動態創建並包含它。 我還使用模板文件來gzip集合JavaScript文件。

模板的想法適用於站點范圍的JavaScript（如JavaScript庫），但它不包括特定於頁面的JavaScript。 但是，通過包含與上面相同的第二個文件，您仍然可以對頁面特定的JavaScript使用相同的方法。