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類別主要的作用。
沒有留言:
張貼留言
感謝您的留言，如果我的文章你喜歡或對你有幫助，按個「讚」或「分享」它，我會很高興的。