Combinação de scripts de cliente em um script composto
Em um aplicativo ASP.NET AJAX, o comportamento do cliente de controles é definido usando arquivos JavaScript.Normalmente, um único arquivo JavaScript define o comportamento do cliente para um único controle.Se uma página da Web contiver vários controles, o navegador deve baixar vários arquivos JavaScript.O time de baixar de um único arquivo é mínimo.No entanto, quando uma página da Web contém muitos controles, o time necessário para fazer o baixar de vários arquivos pode afetar o desempenho observado da página.
Uma solução é agrupar vários arquivos JavaScript em um único arquivo, conhecido sistema autônomo um script composto.Isso reduz o número de solicitações do navegador.O resultado é tempos de baixar mais rápidos do usuário e menos carga no servidor Web.
ASP.NET AJAX permite que você agrupar vários arquivos JavaScript em um único script composto usando referências de script compostas no ScriptManager controle ou ScriptManagerProxy controle. Se scripts envolvem dependências, sistema autônomo sistema autônomo scripts que chamam funções em outros scripts, você deve gerenciar sistema autônomo scripts para que eles são registrados na ordem apropriada.
Se o navegador oferecer suporte para compactação de scripts, um script composto será compactado automaticamente antes de ser enviado ao navegador.A única exceção é o Microsoft Internet Explorer 6.0 para a qual ASP.NET sempre enviará scripts descompactados.
Criar um script composto
Em um aplicativo ASP.NET AJAX, você pode criar um script composto automaticamente usando o ScriptManager controle. Para agrupar scripts, adicione o CompositeScript elemento e lista o script faz referência na ordem em que deseja eles incluído no script composto.
O exemplo a seguir mostra como agrupar os scripts de cliente usando um ComposteScript elemento de ScriptManager controle. Quando o usuário clica em um dos botões, será chamada uma função no script de composição e o correspondente span elemento é atualizado.
<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>
Para simplificar este exemplo, os scripts a seguir são quase idênticos.Cada script encontra o span elemento e grava uma mensagem curta.
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)";
}
Fontes para scripts compostos
Um script composto pode conter referências de script baseadas em um caminho local ou que consultar um assembly.Referências de script com base no caminho local são identificadas com o Path atributo das ScriptReference elemento. Referências de assembly são identificadas com o Name atributo. Não é possível usar uma referência de script local que faz referência a um script que não esteja no servidor (ou seja, que referencia um caminho de rede).
Um script composto não pode conter outros scripts compostos.Não é necessário conter todos os scripts que são usados na página da Web.No entanto, ele pode conter scripts de estrutura ASP.NET AJAX, sistema autônomo, por exemplo, MicrosoftAjax.js.
O exemplo a seguir mostra um script composto que combina vários scripts com base em assembly extensor, um script com base em caminho local e um script de estrutura.
<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>
No exemplo anterior, a ScriptManager controle baixa um script composto, que contém os seguintes scripts individuais na ordem apresentada:
MicrosoftAjax.js
Custom.Extender.1.js
Custom2.js
Custom.Extender.2.js
Custom.Extender.3.js
The ScriptPath atributo das ScriptManager controle se aplica para os scripts individuais que são colocados no agrupar, mas não para o script composto resultante. O caminho do script para o script composto é definido usando o Path o atributo na CompositeScript elemento.
Atribuindo um nome de arquivo a um script composto
Pode, opcionalmente, atribua um nome de arquivo para um script composto Adicionando o Path atributo para o CompositeScript elemento, sistema autônomo mostrado no exemplo a seguir:
<asp:CompositeScript Path="~/Scripts/MyCompositeScript.js">
.gif "Observação") Observação: |
|---|
Não use uma vírgula (,) (,) ou um caractere de pipe (|) no nome do script. |
Modificando dinamicamente referências de script
Combinação de script ocorre após o ResolveScriptReference evento que foi gerado. Isso significa que você pode escrever um manipulador de eventos para modificar as referências de script.No entanto, não é possível modificar a ordem em que os scripts são registrados.
Compartilhamento compostos scripts entre páginas
Para compartilhar um script de composição entre várias páginas e evitar vários downloads, você pode adicionar o script composto a uma página mestra.Da mesma forma, você pode usar temas para definir uma combinação de script.
Combinando localizado scripts
Se o EnableScriptLocalization propriedade é conjunto para true (que é o padrão), a estrutura combina as versões localizadas dos scripts se eles estiverem disponível. sistema autônomo scripts localizados são combinados na mesma ordem e usando o mesmo modelo sistema autônomo sistema autônomo versões originais.
Usando scripts compostos com o controle UpdatePanel
Você pode criar um script composto que inclui scripts de controles ou componentes personalizados em um UpdatePanel controle. Durante o postback assíncrono de um UpdatePanel controle, um controle pode tentar registrar um script que foi baixado anteriormente sistema autônomo parte do script de composição. Nesse caso, a estrutura remove a referência de script única e o substitui com uma referência para o script composto baixado anteriormente.
O exemplo a seguir mostra uma referência de script compostas que ofereça suporte a um componente personalizado definido em um UpdatePanel controle.
<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>