将客户端脚本合并到复合脚本中

2014-10-22

更新：2007 年 11 月

在 ASP.NET AJAX 应用程序中，控件的客户端行为是使用 JavaScript 文件定义的。通常情况下，单个 JavaScript 文件只定义单个控件的客户端行为。如果网页包含多个控件，则浏览器必须下载多个 JavaScript 文件。下载单个文件花费的时间是很短的。但是，在网页包含很多控件的情况下，下载多个文件所需的时间可能会影响用户体验到的网页性能。

一个解决办法是将多个 JavaScript 文件合并到单个文件中，称为“复合脚本”。这样可以减少浏览器请求的数量。其结果是加快用户的下载速度，减轻 Web 服务器的负载。

ASP.NET AJAX 允许您通过在 ScriptManager 控件或 ScriptManagerProxy 控件中使用复合脚本引用，将多个 JavaScript 文件合并到单个复合脚本中。如果脚本包含依赖项，例如有些脚本调用了其他脚本中的函数，则必须管理这些脚本，确保它们按照适当顺序注册。

如果浏览器支持脚本压缩，复合脚本将在发送到浏览器之前自动压缩。唯一的例外是 Microsoft Internet Explorer 6.0，ASP.NET 发送到该浏览器的脚本始终是没有压缩的。

创建复合脚本

在 ASP.NET AJAX 应用程序中，可以使用 ScriptManager 控件自动创建复合脚本。若要合并脚本，请按照您要将脚本包括在复合脚本中的顺序，添加 CompositeScript 元素并列出脚本引用。

下面的示例演示如何在 ScriptManager 控件中使用 ComposteScript 元素来合并客户端脚本。用户单击某一个按钮时，将调用复合脚本的一个函数，并更新相应的 span 元素。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Combining Scripts</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <CompositeScript>
            <Scripts>
                <asp:ScriptReference Path="~/Scripts/Script1.js" />
                <asp:ScriptReference Path="~/Scripts/Script2.js" />
                <asp:ScriptReference Path="~/Scripts/Script3.js" />
            </Scripts>
        </CompositeScript>
    </asp:ScriptManager>
    <h2>Combining Scripts</h2>
    <p>This example shows how to combine multiple client scripts into
    a single composite script.</p>
    <div>
        <input id="Button1" type="button" value="Button 1" onclick="buttonClick1()" />
        <span id="Span1"></span><br /><br />
        <input id="Button2" type="button" value="Button 2" onclick="buttonClick2()" />
        <span id="Span2"></span><br /><br />
        <input id="Button3" type="button" value="Button 3" onclick="buttonClick3()" />
        <span id="Span3"></span>
    </div>
    </form>
</body>
</html>

为了使此示例尽量简单，下面的脚本几乎是相同的。每个脚本查找 span 元素并写入一条短消息。

function buttonClick1()
{
    var text = Sys.UI.DomElement.getElementById("Span1");
    text.innerHTML = "You clicked Button 1. (Script1)";
}

function buttonClick2()
{
    var text = Sys.UI.DomElement.getElementById("Span2");
    text.innerHTML = "You clicked Button 2. (Script2)";
}

function buttonClick3()
{
    var text = Sys.UI.DomElement.getElementById("Span3");
    text.innerHTML = "You clicked Button 3. (Script3)";
}

复合脚本的源

复合脚本可能包含脚本引用，这些引用是基于本地路径的，或者引用了某个程序集。基于本地路径的脚本引用是使用 ScriptReference 元素的 Path 属性标识。基于程序集的引用是使用 Name 属性标识。不能使用引用了不在服务器上的脚本（也就是说引用了网络路径）的本地脚本引用。

复合脚本不能包含其他复合脚本。它不必包含在网页上使用的所有脚本。但是，它可以包含 ASP.NET AJAX 框架脚本，例如 MicrosoftAjax.js。

下面的示例演示一个复合脚本，该脚本合并了一个框架脚本、一个基于本地路径的脚本，以及多个基于程序集的扩展程序脚本。

<asp:ScriptManager id="SM1" runat="server">
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

在上一个示例中，ScriptManager 控件下载了一个复合脚本，该脚本按以下所示顺序包含各个脚本：

MicrosoftAjax.js
Custom.Extender.1.js
Custom2.js
Custom.Extender.2.js
Custom.Extender.3.js

ScriptManager 控件的 ScriptPath 属性适用于组中包括的各个脚本，但不适用于生成的复合脚本。复合脚本的脚本路径是使用 CompositeScript 元素中的 Path 属性定义的。

为复合脚本指定文件名

可以选择通过向 CompositeScript 元素添加 Path 属性，为复合脚本指定文件名，如下例中所示：

<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">

说明：
脚本名称中不要使用逗号 (,) 或竖线 (\|)。

动态修改脚本引用

脚本合并在引发 ResolveScriptReference 事件之后发生。这意味着您可以编写事件处理程序来修改脚本引用。但不能修改脚本注册的顺序。

在多个页之间共享复合脚本

若要在多个页之间共享复合脚本，并且避免多次下载，可以将复合脚本添加到母版页中。同样，也可以使用主题来定义脚本合并。

合并本地化脚本

如果 EnableScriptLocalization 属性设置为 true（默认值），则在脚本的本地化版本可用时，框架会将它们合并。本地化脚本按照与原始版本相同的顺序合并，并使用相同的模型。

将 UpdatePanel 控件用于复合脚本

可以创建一个复合脚本，其中包括来自 UpdatePanel 控件中的控件或自定义组件的脚本。在 UpdatePanel 控件的异步回发过程中，某个控件可能试图注册一个以前作为复合脚本的一部分下载的脚本。在这种情况下，框架将移除单个脚本引用，并使用对以前下载的复合脚本的引用来取代它。

下面的示例演示一个复合脚本引用，该引用支持在 UpdatePanel 控件中定义的自定义组件。

<asp:ScriptManager id="SM1" runat="server">
  <Scripts>
    <asp:CompositeScript>
      <Scripts>
        <asp:ScriptReference Name="MicrosoftAjax.js"/>
        <asp:ScriptReference Name="Custom.Extender.1.js" 
             Assembly="Custom" />
        <asp:ScriptReference Path="~/Scripts/Custom2.js" />
        <asp:ScriptReference Name="Custom.Extender.2.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.3.js" 
             Assembly="Custom" />
        <asp:ScriptReference Name="Custom.Extender.4.js" 
             Assembly="Custom" />
      </Scripts>
    </asp:CompositeScript>
  </Scripts>
</asp: ScriptManager>

<asp:UpdatePanel runat="server"...>
  <ContentTemplate>
    ...
    <cc:custom4 runat="server" id="cc4"... />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

请参见

概念

添加 AJAX 和客户端功能

通过