JS&CSS檔案請求合并及壓縮處理研究（二）

上篇交待了一些理論方面的東西，并給出了另外一種解決方案的處理流程。本篇将根據該處理流程，開始代碼方面的編寫工作。

1，打開VS，建立ASP.NET MVC Web項目，項目類型選擇空。名稱為 Mcmurphy.Web（該項目為前台項目）

2，在解決方案中添加以下項目：

　　1）Mcmurphy.Component（主要存放需要用到的實體類及枚舉）

　　2）Mcmurphy.Extension（HtmlHelper擴充類）

　　3）Mcmurphy.Tests （單元測試）

3，在 Mcmurphy.Component 項目中添加檔案：ResourceInfo.cs，表示我們的資源檔案資訊。代碼如下：

namespace Mcmurphy.Component
{
    /// <summary>
    /// 資源資訊
    /// </summary>
    public class ResourceInfo
    {
        /// <summary>
        /// 連結位址
        /// </summary>
        public string Url { set; get; }
        /// <summary>
        /// 所屬分組
        /// </summary>
        public string Group { set; get; }
        /// <summary>
        /// 資源優先級
        /// </summary>
        public PriorityType Order { set; get; }
    }
}

加入資源優先級的概念，可以對檔案的加載先後順序進行更加精确的控制，而不是完全通過添加順序進行加載。也就是說，優先級高的檔案，即使添加順序偏後，也會優先加載并渲染。這一點在随後的示範中會有所展現。

4，接下來添加優先級枚舉。在Mcmurphy.Component項目中添加Enumeration檔案夾，用于存在用到的枚舉資訊。建立PriorityType枚舉類。添加資源檔案時，如不指定優先級，預設為Normal。

namespace Mcmurphy.Component.Enumeration
{
    /// <summary>
    /// 優先級類型
    /// </summary>
    public enum PriorityType
    {
        /// <summary>
        /// 最高優先級
        /// </summary>
        Highest = 1,
        /// <summary>
        /// 高優先級
        /// </summary>
        High = 2,
        /// <summary>
        /// 普通優先級
        /// </summary>
        Normal = 3,
        /// <summary>
        /// 低優先級
        /// </summary>
        Low = 4,
        /// <summary>
        /// 最低優先級
        /// </summary>
        Lowest = 5
    }
}

5，為标記資源類型（樣式或腳本），再定義ResourceType枚舉。代碼為：

namespace Mcmurphy.Component.Enumeration
{
    /// <summary>
    /// 資源類型
    /// </summary>
    public enum ResourceType
    {
        /// <summary>
        /// 樣式檔案
        /// </summary>
        StyleSheet = 0,
        /// <summary>
        /// 腳本檔案
        /// </summary>
        Script = 1
    }
}

6，接下來我們就可以擴充HtmlHelper對象，實作View中資源添加的邏輯了。在Mcmurphy.Extension項目中，建立檔案CombineResourceExt.cs，修改該類為靜态類，然後添加以下方法代碼：

/// <summary>
/// 添加資源檔案
/// </summary>
/// <param name="htmlHelper"></param>
/// <param name="resType">資源類型</param>
/// <param name="url">檔案路徑</param>
/// <param name="group">檔案分組名稱，預設為空</param>
/// <param name="order">檔案同組中的優先級。預設：Normal</param>
public static void AppendResFile(this HtmlHelper htmlHelper, ResourceType resType, string url, string group = "", PriorityType order = PriorityType.Normal)
{
     throw new NotImplementedException();
}

該方法擴充了HtmlHelper對象，同時指定了資源檔案的位址，分組，及優先級。熟悉MVC的朋友應該知道，現在我們在View頁面中，就可以這樣調用，以腳本檔案為例：

Html.AppendResFile(ResourceType.Script, "這裡是腳本檔案路徑");

或者手動指定優先級：

Html.AppendResFile(ResourceType.Script, "", PriorityType.High);

關于分組的概念，可以這樣了解：同屬一個分組的檔案，會合并其請求路徑，一次性向伺服器送出請求。今後我們會對其進行更加深入的說明。

為了View中更加友善的調用，我們展開Mcmurphy.Web項目，打開Views目錄下的web.config檔案，在<system.web.webPages.razor> 節點下，注冊程式集：

<pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
        <!--注冊程式集-->
        <add namespace="Mcmurphy.Component.Enumeration"/>
        <add namespace="Mcmurphy.Extension"/>
      </namespaces>
    </pages>

這樣，我們在每個View頁面中，不需要再手動 @using 上面兩個程式集，直接調用 Html.AppendResFile 方法即可。

接下來，鄙人将着重說明相關的路徑合并規則，并依據這些合并規則完善 CombineResourceExt 類。

JS&amp;CSS檔案請求合并及壓縮處理研究（二）

JS&CSS檔案請求合并及壓縮處理研究（二）