Kombinieren von Clientskripts in einem zusammengesetzten Skript

Artikel
10/22/2014

Aktualisiert: November 2007

In einer ASP.NET AJAX-Anwendung wird das Clientverhalten von Steuerelementen durch JavaScript-Dateien definiert. In der Regel definiert jeweils eine JavaScript-Datei das Clientverhalten für ein bestimmtes Steuerelement. Wenn eine Webseite mehrere Steuerelemente enthält, muss der Browser mehrere JavaScript-Dateien herunterladen. Die zum Herunterladen einer einzelnen Datei benötigte Zeit ist minimal. Wenn eine Webseite jedoch eine große Anzahl von Steuerelementen enthält, kann durch die Zeit, die zum Herunterladen mehrerer Dateien benötigt wird, die Leistung der Seite beeinträchtigt werden.

Um dies zu vermeiden, können Sie mehrere JavaScript-Dateien in einer Datei zusammenfassen, in einem sogenannten zusammengesetzten Skript. Dies verringert die Anzahl der Browseranforderungen. Die Downloadzeiten für den Benutzer und die Auslastung des Webservers werden dabei reduziert.

ASP.NET AJAX ermöglicht Ihnen, mithilfe von zusammengesetzten Skriptverweisen im ScriptManager-Steuerelement oder im ScriptManagerProxy-Steuerelement mehrere JavaScript-Dateien in einem zusammengesetzten Skript zu kombinieren. Bei Skripts mit Abhängigkeiten, z. B. Skripts, die Funktionen in anderen Skripts aufrufen, müssen Sie die Skripts verwalten und sicherstellen, dass diese in der korrekten Reihenfolge registriert sind.

Wenn der Browser Skriptkomprimierung unterstützt, wird ein zusammengesetztes Skript automatisch komprimiert, bevor es an den Browser gesendet wird. Die einzige Ausnahme hiervon ist Microsoft Internet Explorer 6.0, an den ASP.NET Skripts immer unkomprimiert sendet.

Erstellen eines zusammengesetzten Skripts

In einer ASP.NET AJAX-Anwendung können Sie mit dem ScriptManager-Steuerelement automatisch ein zusammengesetztes Skript erstellen. Fügen Sie zum Kombinieren von Skripts das CompositeScript-Element hinzu, und führen Sie die Skriptverweise in der Reihenfolge auf, in der diese dem zusammengesetzten Skript hinzugefügt werden sollen.

Im folgenden Beispiel wird veranschaulicht, wie Sie Clientskripts mit dem ComposteScript-Element im ScriptManager-Steuerelement kombinieren. Wenn ein Benutzer auf eine der Schaltflächen klickt, wird eine Funktion in dem zusammengesetzten Skript aufgerufen und das zugehörige span-Element aktualisiert.

<html xmlns="http://www.w3.org/1999/xhtml">
<head >
    <title>Combining Scripts</title>
</head>
<body>
    <form id="form1" >
    <asp:ScriptManager ID="ScriptManager1" >
        <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>

Um dieses Beispiel zu vereinfachen, sind die folgenden Skripts nahezu identisch. Jedes Skript sucht das span-Element und schreibt eine kurze Meldung.

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)";
}

Quellen für zusammengesetzte Skripts

Ein zusammengesetztes Skript kann Skriptverweise enthalten, die auf einem lokalen Pfad basieren oder auf eine Assembly verweisen. Skriptverweise, die auf einem lokalen Pfad basieren, werden mit dem Path-Attribut des ScriptReference-Elements identifiziert. Assemblybasierte Verweise werden mit dem Name-Attribut identifiziert. Sie können keinen lokalen Skriptverweis verwenden, in dem ein Skript referenziert wird, das nicht auf dem Server verfügbar ist (d. h., wenn der Verweis ein Netzwerkpfad ist).

Ein zusammengesetztes Skript darf keine anderen zusammengesetzten Skripts enthalten. Es muss nicht alle Skripts enthalten, die auf der Webseite verwendet werden. Es kann jedoch ASP.NET AJAX-Frameworkskripts enthalten, z. B. MicrosoftAjax.js.

Das folgende Beispiel zeigt ein zusammengesetztes Skript, in dem ein Frameworkskript, ein auf einem lokalen Pfad basierendes Skript und mehrere assemblybasierte Extenderskripts kombiniert sind.

<asp:ScriptManager id="SM1" >
  <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>

Im vorherigen Beispiel wurde durch das ScriptManager-Steuerelement ein zusammengesetztes Skript mit den folgenden Einzelskripts in der angezeigten Reihenfolge heruntergeladen:

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

Das ScriptPath-Attribut des ScriptManager-Steuerelements wird auf die einzelnen, in der Gruppe eingeschlossenen Skripts, nicht jedoch auf das resultierende zusammengesetzte Skript angewendet. Der Skriptpfad für das zusammengesetzte Skript wird mit dem Path-Attribut im CompositeScript-Element definiert.

Zuweisen eines Dateinamens zu einem zusammengesetzten Skript

Sie können einem zusammengesetzten Skript optional einen Dateinamen zuweisen, indem Sie das Path-Attribut dem CompositeScript-Element hinzufügen, wie im folgenden Beispiel dargestellt:

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

Hinweis:
Verwenden Sie kein Komma (,) oder Pipezeichen (\|) in dem Skriptnamen.

Dynamisches Ändern von Skriptverweisen

Die Skripts werden kombiniert, nachdem das ResolveScriptReference-Ereignis ausgelöst wurde. Dies bedeutet, dass Sie einen Ereignishandler schreiben können, um die Skriptverweise zu ändern. Sie können jedoch nicht die Reihenfolge ändern, in der die Skripts registriert sind.

Freigeben zusammengesetzter Skripts für mehrere Seiten

Um ein zusammengesetztes Skript für mehrere Seiten freizugeben und mehrere Downloads zu vermeiden, können Sie das zusammengesetzte Skript einer Masterseite hinzufügen. Sie können auf ähnliche Weise mit Designs eine Skriptkombination definieren.

Kombinieren von lokalisierten Skripts

Wenn die EnableScriptLocalization-Eigenschaft auf true (Standardeinstellung) festgelegt ist, kombiniert das Framework die lokalisierte Version der Skripts, sofern diese verfügbar ist. Die lokalisierten Skripts werden in der gleichen Reihenfolge und unter Verwendung des gleichen Modells wie die Originalversionen kombiniert.

Verwenden von zusammengesetzten Skripts mit dem UpdatePanel-Steuerelement

Sie können ein zusammengesetztes Skript erstellen, das Skripts aus Steuerelementen oder benutzerdefinierten Komponenten in einem UpdatePanel-Steuerelement enthält. Während eines asynchronen Postbacks eines UpdatePanel-Steuerelements kann es vorkommen, dass ein Steuerelement versucht, ein Skript zu registrieren, das bereits zuvor als Teil eines zusammengesetzten Skripts heruntergeladen wurde. In diesem Fall entfernt das Framework den einzelnen Skriptverweis und ersetzt diesen durch einen Verweis auf das zuvor heruntergeladene zusammengesetzte Skript.

Das folgende Beispiel zeigt einen zusammengesetzten Skriptverweis, der eine benutzerdefinierte Komponente unterstützt, die in einem UpdatePanel-Steuerelement definiert ist.

<asp:ScriptManager id="SM1" >
  <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 ...>
  <ContentTemplate>
    ...
    <cc:custom4  id="cc4"... />
    ...
  </ContentTemplate>
</asp:UpdatePanel>

Siehe auch

Konzepte

Hinzufügen von AJAX- und Clientfunktionen

Freigeben über