zoukankan      html  css  js  c++  java
  • 基于 aspnet 的自动合并输出js和css的解决方案

    这是一个基于 aspnet 的自动合并输出js和css的解决方案。


    首先感谢 LoveCherry 的文章《httpmodule和httphandler配合的又一应用——合并脚本样式》(http://www.cnblogs.com/lovecherry/archive/2010/04/01/1701997.html),我是在这篇文章的基础上进行修改的,令这个模块更为实用,我做了以下修改:
        ·简化tag的写法,统一用 <link runat="server" type="..." src="..."/>来表示资源
        ·修正js和css生成顺序问题,原代码中资源合并由于是异步的,其生成顺序是不一定的,是会出错的
        ·增加group属性,资源不一股脑的直接输出,避免字符集不一致和超大文件的产生问题
        ·增加merge属性,可控制单个资源是否需要合并输出
        ·增加压缩选项,可压缩后输出css和js文本
        ·一些类名项目名的调整和简化

    具体代码就不说明了,大家下载去看便是。以下是使用说明:

    ------------------------------------------------------------
    使用说明
    ------------------------------------------------------------
    (1)引用数据集
        ResourceMerge.dll
        如果需要启用压缩的话,还需要引用:
        Yahoo.Yui.Compressor.dll
        EcmaScript.NET.modified.dll
       
    (2)修改 web.config

        <appSettings>
          
    <add key="ResourceMergeCompress" value="true" />
        
    </appSettings>
        
    <system.web>
          
    <httpModules>
            
    <add name="ResourceMergeModule" type="ResourceMerge.ResourceMergeModule, ResourceMerge"/>
          
    </httpModules>
          
    <httpHandlers>
            
    <add path="ResourceMergeHandler.ashx" type="ResourceMerge.ResourceMergeHandler, ResourceMerge" verb="GET,HEAD"/>
          
    </httpHandlers>
        
    </system.web>

    (3)使用link标签引用资源
        css资源
            <link runat="server" type="text/css" src='content/app.css' />
            原有的<link>标签统统不用改变了,只需要加上runat="server"属性。
            事实上,若该link标签在<head runat="server">内部的话,runat="server"也可不用加了。
        js 资源
            <link runat="server" type="text/javascript" href="content/jquery-1.4.2.min.js" />
            也使用<link>标签,唯一的区别在于 type="text/javascript"
            此外,可以用 href 或 src 表示资源来源
        附加属性
            group  : 同组的js或者css是合并输出的,以避免字符集不一致或超大文件产生的问题
            merge: true 或 false,表示是否将该资源合并输出

    ------------------------------------------------------------
    示例
    ------------------------------------------------------------
    masterpage, page, ascx 中用以下标签

        <link runat="server" type="text/css" group="basic" src="content/grid.css" />
        
    <link runat="server" type="text/css" group="basic" src='content/define.css' />
        
    <link runat="server" type="text/css" src='content/app.css' />
        
    <link runat="server" type="text/javascript" group="jquery" src="content/jquery-1.4.2.min.js" />
        
    <link runat="server" type="text/javascript" group="jquery" src="content/jquery.media.js"/>
        
    <link runat="server" type="text/javascript" group="jquery" src="content/jquery.metadata.js" />
        
    <link runat="server" type="text/javascript" group="jquery" src="content/jquery.bgiframe.js" />
        
    <link runat="server" type="text/javascript" src="content/json2.js" />
        
    <link runat="server" type="text/javascript" src="content/swfobject.js' />
        ...

    以上的标签可能会生成以下代码,将资源合并输出,有效的减少了请求数目:

       <link href="/ResourceMergeHandler.ashx?type=css&amp;key=A176D36015E217C4503FA63B2176B078" rel="stylesheet" type="text/css"/>
       
    <link href="/ResourceMergeHandler.ashx?type=css&amp;key=925F680A7156EF593595248981518ADB" rel="stylesheet" type="text/css"/>
       
    <script src="/ResourceMergeHandler.ashx?type=js&amp;key=CC2081A83FC0CD8F0B6D6E26F81019FA" type="text/javascript"></script>
       
    <script src="/ResourceMergeHandler.ashx?type=js&amp;key=A6DFEB50FB9BE04E83AB2D17A1709F16" type="text/javascript"></script>

       
    ------------------------------------------------------------
    备注
    ------------------------------------------------------------
    说明
        ·同组的js或者css是合并输出的,以上代码js分两组(jquery, default),css分两组(basic, default)
        ·同组内的字符编码自己负责,不一致的话生成的js代码可能会出错
        ·生成的顺序和标签的顺序是一致的
        ·可压缩输出合并的资源

    关于标签的选择
        前一个版本是统一使用<src> 标签来描述资源的,发现在实际使用中改动过大。
        故改变思路,看能否在最小改动的前提下自动实现资源合并输出的功能。
        (1)css很容易,直接用<link>标签,完全不需变动。在module代码中可以用 HtmlGenericControl获取。
        (2)js则有点麻烦
            若加上runat="server"属性,则aspnet会认为这是服务器端脚本,页面输出直接截止了。
            若不加runat属性,aspnet会将该标签和其它文本一起解析为LiteralControl,很难拆分出来。
            故没法保留原有的script标签,最简单的考虑就是改为link标签,这样改动的代码量小些。

    另外一个问题,css文件中若使用了相对图像路径,合并css的话会导致无法找到图片的问题。暂时有以下几个解决方案:
        (1)css文件中改为使用绝对图像路径。
        (2)使用 merge="false" 属性,跳过该css资源不做合并处理

     

  • 相关阅读:
    052 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 14 Eclipse下程序调试——debug2 多断点调试程序
    051 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 13 Eclipse下程序调试——debug入门1
    050 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 12 continue语句
    049 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 11 break语句
    048 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 10 案例——阶乘的累加和
    047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用
    046 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 08 for循环的注意事项
    045 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 07 for循环应用及局部变量作用范围
    剑指OFFER----面试题04.二维数组中的查找
    剑指OFFER----面试题03. 数组中重复的数字
  • 原文地址:https://www.cnblogs.com/luluping/p/2021910.html
Copyright © 2011-2022 走看看