結合用戶端指令碼到複合指令碼

更新：2007 年 11 月

在 ASP.NET AJAX 應用程式中，控制項的用戶端行為是使用 JavaScript 檔案來定義。通常，單一 JavaScript 檔案可定義單一控制項的用戶端行為。如果 Web 網頁包含數個控制項，則瀏覽器必須下載數個 JavaScript 檔案。下載單一檔案所需的時間很少，不過，當 Web 網頁包含許多控制項時，下載多個檔案所需的時間就會影響到網頁的認知效能。

其中一個解決方式，是將多個 JavaScript 檔案結合為單一檔案，稱為「複合指令碼」(Composite Script)。這樣可以減少瀏覽器的要求數。結果可以加快使用者的下載時間，並降低 Web 伺服器的負載。

ASP.NET AJAX 可讓您將多個 JavaScript 檔案結合為單一複合指令碼，方法是在 ScriptManager 控制項或 ScriptManagerProxy 控制項中使用複合指令碼參考。如果指令碼牽涉到相依性，例如指令碼會呼叫其他指令碼中的函式，則您必須管理指令碼，讓它們以正確順序註冊。

如果瀏覽器支援指令碼壓縮，則複合指令碼會先自動經過壓縮，然侯才傳送給瀏覽器。只有 Microsoft Internet Explorer 6.0 例外，ASP.NET 一律會傳送未壓縮的指令碼給它。

建立複合指令碼

在 ASP.NET AJAX 應用程式中，您可以使用 ScriptManager 控制項自動建立複合指令碼。若要結合指令碼，請加入 CompositeScript 項目，並依照您希望指令碼納入複合指令碼的順序，列出指令碼參考。

在下列範例中，會示範如何在 ScriptManager 控制項中使用 ComposteScript 項目，結合用戶端指令碼。當使用者按一下其中一個按鈕時，就會呼叫複合指令碼的函式，並更新對應的 span 項目。

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

為了維持此範例的簡單性，下列指令碼大部分都相同。每個指令碼都會尋找 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)";
}

複合指令碼的來源

複合指令碼可以包含以本機路徑為基礎的指令碼參考，或是參考組件 (Assembly) 的指令碼參考。本機路徑型指令碼參考是以 ScriptReference 項目的 Path 屬性來識別。組件型參考則是以 Name 屬性來識別。您使用的本機指令碼參考不能參考不在伺服器上的指令碼 (也就是參考到網路路徑)。

複合指令碼本身不能包含其他複合指令碼。這個複合指令碼不一定要包含 Web 網頁中所有用到的指令碼。不過，它可以包含 ASP.NET AJAX 架構指令碼，例如 MicrosoftAjax.js。

下列範例示範的複合指令碼即結合了一個架構指令碼、一個本機路徑型指令碼，以及多個組件型擴充項 (Extender) 指令碼。

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

在前述範例中，ScriptManager 控制項會下載複合指令碼，其中包含下列個別指令碼，依照所顯示的順序排列：

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

ScriptManager 控制項的 ScriptPath 屬性會套用至群組中包含的個別指令碼，但不會套用至產生的複合指令碼。複合指令碼的指令碼路徑則使用 CompositeScript 項目中的 Path 屬性來定義。

將檔案名稱指派給複合指令碼

您可以選擇性地將檔案名稱指派給複合指令碼，方法是將 Path 屬性加入至 CompositeScript 項目，如下列範例所示：

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

注意事項：
請勿在指令碼名稱中使用逗號 (,) 或縱線字元 (\|)。

動態修改指令碼參考

引發 ResolveScriptReference 事件後，就會發生指令碼結合。這表示您可以撰寫事件處理常式來修改指令碼參考。不過，您不能修改指令碼的註冊順序。

在頁面之間共用複合指令碼

若要在多個頁面之間共用複合指令碼，以避免多次下載的情形發生，您可以將複合指令碼加入至主版頁面 (Master Page)。同樣地，您可以使用主題來定義指令碼的結合方式。

結合當地語系化指令碼

如果 EnableScriptLocalization 屬性設定為 true (預設值)，則架構會結合指令碼的當地語系化版本 (如果有的話)。當地語系化指令碼會依照相同順序，並使用與原始版本相同的模型來結合。

搭配 UpdatePanel 控制項使用複合指令碼

您建立的複合指令碼可以包含來自控制項的指令碼，或是 UpdatePanel 控制項中的自訂元件。在非同步回傳 UpdatePanel 控制項期間，某個控制項可能會嘗試註冊先前與複合指令碼一併下載的指令碼。在這種情況下，架構會移除該單一指令碼參考，並以先前下載之複合指令碼的參考來取代。

下列範例示範的複合指令碼參考支援 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>

請參閱

概念

加入 AJAX 和用戶端功能

Last updated on 2014-10-22

共用方式為