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 类。

posted @ 2013-09-13 21:01  麦克默菲  阅读(300)  评论(0编辑  收藏  举报