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资源不做合并处理

     

  • 相关阅读:
    HDU 4539郑厂长系列故事――排兵布阵(状压DP)
    HDU 2196Computer(树形DP)
    HDU 4284Travel(状压DP)
    HDU 1520Anniversary party(树型DP)
    HDU 3920Clear All of Them I(状压DP)
    HDU 3853LOOPS(简单概率DP)
    UVA 11983 Weird Advertisement(线段树求矩形并的面积)
    POJ 2886Who Gets the Most Candies?(线段树)
    POJ 2828Buy Tickets
    HDU 1394Minimum Inversion Number(线段树)
  • 原文地址:https://www.cnblogs.com/luluping/p/2021910.html
Copyright © 2011-2022 走看看