Combinaison de scripts clients en un script composite

Article
10/22/2014

Mise à jour : novembre 2007

Dans une application ASP.NET AJAX, le comportement client des contrôles est défini à l'aide de fichiers JavaScript. En général, un fichier JavaScript unique définit le comportement client d'un contrôle unique. Si une page Web contient plusieurs contrôles, le navigateur doit télécharger plusieurs fichiers JavaScript. Le temps qu'il prend pour télécharger un fichier unique est minime. Toutefois, lorsqu'une page Web contient de nombreux contrôles, le temps requis pour télécharger plusieurs fichiers peut affecter la performance perçue de la page.

La solution est de combiner plusieurs fichiers JavaScript en un fichier unique, connu sous le nom de script composite. Cela réduit le nombre de demandes de navigateur. Résultat : un téléchargement plus rapide pour l'utilisateur et moins de charge sur le serveur Web.

ASP.NET AJAX vous permet de combiner plusieurs fichiers JavaScript en un script composite unique en utilisant des références de script composites dans le contrôle ScriptManager ou le contrôle ScriptManagerProxy. Si les scripts impliquent des dépendances, telles que des scripts qui appellent des fonctions dans d'autres scripts, vous devez gérer les scripts afin qu'ils soient inscrits dans l'ordre approprié.

Si le navigateur prend en charge la compression de script, un script composite sera compressé automatiquement avant qu'être envoyé au navigateur. La seule exception est Microsoft Internet Explorer 6.0, auquel ASP.NET envoie toujours des scripts décompressés.

Création d'un script composite

Dans une application ASP.NET AJAX, vous pouvez créer automatiquement un script composite en utilisant le contrôle ScriptManager. Pour combiner des scripts, ajoutez l'élément CompositeScript et dressez la liste des références de script dans l'ordre dans lequel vous souhaitez les inclure dans le script composite.

L'exemple suivant indique comment combiner des scripts clients à l'aide d'un élément ComposteScript dans le contrôle ScriptManager. Lorsque l'utilisateur clique sur l'un des boutons, une fonction dans le script composite est appelée et l'élément span correspondant est mis à jour.

<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>

Pour que cet exemple reste simple, les scripts suivants sont presque identiques. Chaque script recherche l'élément span et écrit un court message.

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

Sources pour les scripts composites

Un script composite peut contenir des références de script basées sur un chemin local ou qui font référence à un assembly. Les références de script basées sur un chemin d'accès local sont identifiées par l'attribut Path de l'élément ScriptReference. Les références basées sur un assembly sont identifiées par l'attribut Name. Vous ne pouvez pas utiliser une référence de script locale qui fait référence à un script qui n'est pas sur le serveur (autrement dit, qui fait référence à un chemin d'accès réseau).

Un script composite ne peut pas contenir d'autres scripts composites. Il n'a pas à contenir tous les scripts utilisés sur la page Web. Toutefois, il peut contenir des scripts d'infrastructure ASP.NET AJAX, tels que MicrosoftAjax.js.

L'exemple suivant illustre un script composite qui combine un script d'infrastructure, un script basé sur un chemin d'accès local et plusieurs scripts d'extendeur basés sur un assembly.

<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>

Dans l'exemple précédent, le contrôle ScriptManager télécharge un script composite, qui contient les scripts individuels suivants dans l'ordre indiqué :

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

L'attribut ScriptPath du contrôle ScriptManager s'applique aux scripts individuels groupés, mais pas au script composite qui en résulte. Le chemin d'accès de script pour le script composite est défini en utilisant l'attribut Path dans l'élément CompositeScript.

Attribution d'un nom de fichier à un script composite

Vous pouvez, en option, attribuer un nom de fichier à un script composite en ajoutant l'attribut Path à l'élément CompositeScript, comme le montre l'exemple suivant :

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

Remarque :
N'utilisez pas de virgule (,) ou de symbole de canal (\|) dans le nom du script.

Modification dynamique des références de script

La combinaison de scripts se produit après que l'événement ResolveScriptReference a été déclenché. Cela signifie que vous pouvez écrire un gestionnaire d'événements pour modifier les références de script. Toutefois, vous ne pouvez pas modifier l'ordre dans lequel les scripts sont inscrits.

Partage de scripts composites entre des pages

Pour partager un script composite entre plusieurs pages et éviter les téléchargements multiples, vous pouvez ajouter le script composite à une page maître. De la même façon, vous pouvez utiliser des thèmes pour définir une combinaison de scripts.

Combinaison de scripts localisés

Si la propriété EnableScriptLocalization a la valeur true (laquelle est la valeur par défaut), l'infrastructure combine les versions localisées des scripts si elles sont disponibles. Les scripts localisés sont combinés dans le même ordre à l'aide du même modèle que les versions d'origine.

Utilisation de scripts composites avec le contrôle UpdatePanel

Vous pouvez créer un script composite qui inclut des scripts de contrôles ou composants personnalisés dans un contrôle UpdatePanel. Pendant la publication (postback) asynchrone d'un contrôle UpdatePanel, un contrôle peut essayer d'inscrire un script précédemment téléchargé en tant que partie du script composite. Dans ce cas, l'infrastructure supprime la référence de script unique et la remplace par une référence au script composite précédemment téléchargé.

L'exemple suivant illustre une référence de script composite qui prend en charge un composant personnalisé défini dans un contrôle UpdatePanel.

<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>

Voir aussi

Concepts

Ajout de fonctionnalités AJAX et clientes

Share via