處理 javascript 和 css 文件的最佳實踐是什么

Question

您如何管理 ASP.NET 項目中的所有.js和.css文件？ 尤其是當他們彼此之間有很多依賴關系時？

我將所有腳本合二為一。 但它變得很重要，其中 90% 沒有在特定頁面上使用。 我想要的是管理所有這些腳本的工具或指南，簡單的依賴項管理，有助於在頁面上僅包含此頁面所需的那些 JS 和 CSS。

當您使用大量控件時，還使用了 ScriptManager 螺母，它非常方便......也許我以錯誤的方式使用它。

Answer 1

在我們的項目中，我們將腳本和 CSS 標記為 class 的資源，然后在頁面生命周期中注冊它們，通常在 PreRender() 中。

例如：

// Css
[assembly: WebResource("Assembly.Class.MyClass.css", "text/css")]
// Javascript
[assembly: WebResource("Assembly.Class.MyClass.js", "text/javascript")]
namespace OurNamespace
{
   public class MyClass...

然后，我們將每個腳本和 css 文件的屬性設置為嵌入式資源。

這種方法使您可以將腳本分開並針對各個 UI 組件。 您可以將相同的資源注冊到多個類，然后 ScriptManager 將負責確保正確的資源顯示在頁面上。

We then wrote a class at the HTTP handler level that handles compressing all the CSS resources into one file before it's streamed out, to make sure we didn't hit the 32 CSS file limit for IE6. 它還從我們的腳本中去除空格、注釋等，以優化 javascript output。

Answer 2

這就是我通常的做法：

CSS：最初有 5 個文件。 reset.css (from YUI), structure.css, general.css (borders, backgrounds, z-index etc), typography.css and base.css which imports the 4 other css files.

Javascript：我所做的是采用 ASP.NET 思想背后的代碼並將其應用於我的 JS 文件的命名。 示例：home.aspx 的頁面特定 JS 文件稱為 home.aspx.js。 然后，我將擁有基於插件或功能的單獨 JS 文件，可能還有一個包含所有全局變量的 common.js。

這可能不是每個人的一杯茶，但我希望能給你一些想法！

Answer 3

我更喜歡根據它們的 function 划分我的 JS 文件 - 例如，我可以為所有基於 AJAX 的交互創建一個 JS 文件，一個用於所有驗證，一個用於整個 Z2567A6DZZ840 通用的所有函數的通用 JS 庫。 擁有一個將整個 JS 腳本組合成一個文件的文件肯定會減慢應用程序的速度，因為每個頁面都會加載整個文件，即使只有一小部分可能是相關的。

對於 CSS 文件，我更喜歡使用單個通用樣式表，其中包含可用於整個應用程序的通用 styles。 我還可以為具有非常特定布局結構的頁面創建單獨的 CSS 文件。

我不知道有任何工具可以自動處理這種依賴關系，但是當您根據 function 划分文件時，在大多數情況下這變得不必要。

Answer 4

我按功能划分 JS 文件。

幾乎無處不在的最常用功能 go 到一個文件，

其他類和方法 go 到自己的文件中。

對於 CSS，我有一個用於整個站點的通用文件。

如果我的部分在視覺上與其他部分不同，我將 CSS 文件分隔到每個部分。 另外，我有一個選項卡式div控件，它有一個單獨的 CSS 文件。 我不混合文件。

對於組件來說，嵌入資源看起來不錯，但有時只部署 JS 文件來修復 bug 也不錯。