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