1.0.0 to 1.1.0

Microsoft ASP.NET Web Optimization Framework 1.1.0-alpha1最快取得的方式是透過NuGet。此1.1.0版本除了修正一些Bug外，再提供三個功能，分別是「CDN fallback」、「Element template strings」、「Virtual Path Provider」。

CDN後路

fallback我不知道怎麼翻譯比較好，但原意就是在使用CDN之後，如果CDN發生問題，可以有一條後路可走，就是可以為我們載入本機的jQuery。我們先回憶前一篇的解決方法：

BundleConfig組態檔：

  'bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
  '           "~/Scripts/jquery-{version}.js"))

  bundles.UseCdn = True
  ' http://www.asp.net/ajaxlibrary/cdn.ashx#Using_jQuery_from_the_CDN_16
  ' https://developers.google.com/speed/libraries/devguide#jquery
  Dim jqCdnPath As String = "http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"
  bundles.Add(New ScriptBundle("~/bundles/jquery", jqCdnPath).Include(
              "~/Scripts/jquery-{version}.js"))

View：

  <body>
      @RenderBody()

      @Scripts.Render("~/bundles/jquery")
      <script type="text/javascript">
          if (typeof jQuery == 'undefined') {
              var e = document.createElement('script');
              e.src = '@Url.Content("~/Scripts/jquery-1.8.2.js")';
              e.type = 'text/javascript';
              document.getElementsByTagName("head")[0].appendChild(e);

          }
      </script>
      @RenderSection("scripts", required:=False)
  </body>

現在我們看看，如果升級至Web Optimization Framework 1.1.0-alpha1這個版本，有何改變：

記得先升級Web Optimization Framework套件，以下程式才能正確執行。NuGet GUI記得選擇選【包括發行前版本】然後選【更新】，指令模式為【Install-Package Microsoft.AspNet.Web.Optimization -Pre】最後的-pre要記得加。

如果你在未安裝ASP.NET and Web Tools 2012.2且非C#的專案，會出現無法安裝此Web Optimization Framework 1.1.0-alpha1訊息。目前ASP.NET and Web Tools 2012.2的功能只在能C#專案下測試。

BundleConfig組態檔：（以下為C#專案內容）

  bundles.UseCdn = true;
        BundleTable.EnableOptimizations = true;
        var jqd = new ScriptBundle("~/bundles/jquery", "badpath").Include(
                                   "~/Scripts/jquery-{version}.js");
        jqd.CdnFallbackExpression = "window.jquery";
        bundles.Add(jqd);

ScriptBundle方法原本第二個參數要傳入CDN路徑，但我們特意傳入一個不存在的路徑，這會使用在BundleTable.EnableOptimizations = true;時載入CDN的腳本失敗。最重要的是jqd.CdnFallbackExpression屬性，後這裡傳入判斷CDN腳本物件的字串，這裡我們傳入的判繼字串為"windows.jquery"，最後由Add方法加入BundleCollection之中。

現在我們就建置然後啟動網站。注意，我們不需要在View裡加任何程式碼。啟動後，查看原始碼，最後兩行是：

   <script src="badpath"></script>
   <script>(window.jquery)||document.write('<script src="/bundles/jquery"><\/script>');</script>

由最後的圖片證明，當CDN運作失敗時，我們可以即時載入伺服器端的jQuery腳本給用戶端，而不受CDN失敗的影響。

元素字串樣版

在前一篇，我們有介紹一個@Scripts.Url()方法並加入HTML5的async屬性：

   @* @Scripts.Render("~/bundles/modernizr") *@
   <script src='@Scripts.Url("~/bundles/modernizr")' async> </script>

不過此方法失去了Razor的方便性，所以在Web Optimization Framework 1.1.0-alpha1版加入一個新的方法@Scripts.RenderFormat()，用法也很簡單：

   @Scripts.RenderFormat("<script src='{0}' async></script>","~/bundles/jquery")

這個語法類似String.Format()的應用，不但可以保留Razor的方便性，又可以自訂出我們想要的任何字串格字。以下是Scripts.RenderFormat()定義的說明：

//
// 摘要:
// Renders script tags for a set of paths based on a format string.
//
// 參數:
// tagFormat:
// Format string for defining the rendered script tags. For more details on
// format strings, see http://msdn.microsoft.com/en-us/library/txafckwd.aspx
//
// paths:
// Set of virtual paths for which to generate script tags.
//
// 傳回:
// HTML string containing the script tag or tags for the bundle.
//
// 備註:
// RenderFormat generates script tags for the supplied paths using the specified
// format string. It generates multiple script tags for each item in the bundle
// when System.Web.Optimization.BundleTable.EnableOptimizations is set to false.
// When optimizations are enabled, it generates a single script tag to a version-stamped
// URL which represents the entire bundle.
public static IHtmlString RenderFormat(string tagFormat, params string[] paths);

這會產生兩個結果，產生的原始碼為：

   <script src='badpath' async></script>
   <script>(window.jquery)||document.write('<script src="/bundles/jquery"><\/script>');</script>

因為我們有設定使用CDN版本，所以src還是指向我們所設定的badpath。

第二個結果是在開發模式下，先將CDN與最佳化設定關閉：

   bundles.UseCdn = false;
            BundleTable.EnableOptimizations = false;

建置與執行，然後查看原始碼：

   <script src='/bundles/jquery?v=JzhfglzUfmVF2qo-weTo-kvXJ9AJvIRBLmu11PgpbVY1' async></script>

原本使用CDN與判斷CDN的語法都不見了，會只動調整為開發模式下的語法。

支援Virtual Path Provider

Virtual Path Provider類別算是比較進階的應用，在書本第8.3節，我有應用這個類別寫了個小東西，讀者可以自行參考。

不過，簡言之，它提供可讓 Web 應用程式從虛擬檔案系統擷取資源的方法集。例如，在ASP.NET MVC裡的View，當我下了一個”/home/index“之後，它要如何去取得”~/Views/Home/Index.vbhtml“來輸出呢？虛擬路徑去取得實體檔案就是Virtual Path Provider類別主要的作用。

KingKong Bruce記事

網頁

Web Optimization Framework 1.1.0-alpha1新功能預覽

1.0.0 to 1.1.0

CDN後路

元素字串樣版

支援Virtual Path Provider

沒有留言:

張貼留言