Поделиться через

Объединение клиентских сценариев в составной сценарий

  • Статья

Обновлен: Ноябрь 2007

В AJAX-приложении ASP.NET клиентское поведение элементов управления определяется с помощью файлов JavaScript. Как правило, один файл JavaScript определяет клиентское поведение одного элемента управления. Если веб-страница содержит несколько элементов управления, обозревателю приходится загружать несколько файлов JavaScript. Время, затрачиваемое на загрузку одного файла, минимально. Однако если веб-страница содержит много элементов управления, время, необходимое на загрузку множества файлов, может отрицательно влиять на субъективную производительность страницы.

Решением этой проблемы является объединение нескольких файлов JavaScript в единый файл, называемый составным сценарием. Это позволяет уменьшить количество запросов браузера. Результат — ускорение загрузки для пользователя и уменьшение нагрузки на веб-сервер.

AJAX в ASP.NET позволяет объединить несколько файлов JavaScript в единый составной сценарий путем использования ссылок на составной сценарий в элементе управления ScriptManager или элементе управления ScriptManagerProxy. Если в сценариях имеются зависимости, такие как сценарии, вызывающие функции в других сценариях, необходимо управлять сценариями так, чтобы они регистрировались в соответствующем порядке.

Если обозреватель поддерживает сжатие сценариев, составной сценарий будет автоматически сжиматься перед отправкой обозревателю. Единственное исключение — Microsoft Internet Explorer 6.0, которому ASP.NET всегда отправляет сценарии без сжатия.

Создание составного сценария

В AJAX-приложении ASP.NET создать составной сценарий можно автоматически путем использования элемента управления ScriptManager. Чтобы объединить сценарии, добавьте элемент CompositeScript и перечислите ссылки на сценарии в том порядке, в котором они должны быть включены в составной сценарий.

В следующем примере показано объединение клиентских сценариев путем использования элемента ComposteScript в элементе управления ScriptManager. Когда пользователь нажимает одну из кнопок, вызывается функция в составном сценарии и соответствующий элемент 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)";
}

Источники составных сценариев

Составной сценарий может содержать ссылки на сценарии, основанные на локальном пути или на соответствующей ссылке в сборке. Для идентификации ссылок на сценарии с локальном путем используется атрибут Path элемента ScriptReference. Для идентификации ссылок на сценарии в сборках используется атрибут 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

Атрибут ScriptPath элемента управления ScriptManager применяется к отдельным сценариям, входящим в группу, однако не к образованному в результате составному сценарию. Путь к сценарию для составного сценария определяется путем использования атрибута Path в элементе CompositeScript.

Присвоение составному сценарию имени файла

При необходимости составному сценарию можно присвоить имя файла, добавив для этого атрибута Path в элемент CompositeScript, как показано в следующем примере.

<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">
Cc488552.alert_note(ru-ru,VS.90).gifПримечание.

В имени сценария нельзя использовать запятую (,) или знак вертикальной черты (|).

Динамическое изменение ссылок на сценарии

Объединение сценариев происходит после создания события 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