.NET Magazine國際中文電子雜誌
作 者：許薰尹
審 稿：張智凱
文章編號：N111211902
出刊日期：2011/12/28
本文將延續《ASP.NET 4.5新功能(2)》一文的內容，繼續探討ASP.NET 4.5版本以及Visual Studio 11提供的新功能，讓你在開發網頁應用程式時，能夠透過新功能來簡化設計的動作。本文撰寫時使用的工具是Visual Studio 11 Developer Preview，因此本文探討的內容在正式版上市時可能不適用。
CSS編輯工具-註解
在設計網頁應用程式時，要達到某些特定的效果，各瀏覽器使用的CSS語法並不太相同，若不好好撰寫CSS語法，可能在ie瀏覽器上能夠正常的顯示，但在其他瀏覽器上就會不正常，反之亦然，因此要寫好一個能在各家瀏覽器上都可以正常顯示和執行的網頁都需要花蠻多心思，並針對不同的瀏覽器特性來撰寫特殊的CSS語法。為了簡化這個問題，讓CSS更容易撰寫，Visual Studio 11 包含CSS3程式碼片段(Code Snippet)功能，協助設計人員撰寫CSS語法，來提高跨瀏覽器之間的相容性。
使用Visual Studio 11來編輯CSS檔案時，可以利用「Text Editor」工具列的「註解選取行 (Comment out the selected lines)」以及「取消註解選取行 (Uncomment out the selected lines)」按鈕註解或取消註解CSS設定，參考圖1所示。
圖 1：註解或取消註解CSS設定。
CSS編輯工具-展開、收合功能
CSS編輯工具也具備了展開(Expand)、收合(Collapse)CSS語法設定的功能，讓程式碼更容易管理與檢視，參考圖2所示。
圖 2：展開、收合功能。
Visual Studio 11可以根據繼承關係來縮排CSS語法。預設Visual Studio 11工具的選單「Tools」->「Options」->「Text Editor」->「CSS」->「Formatting」->勾選Indentation項目中的「Hierarchical Indentation」選項，參考圖3所示。
圖 3：「Hierarchical Indentation」選項啟用縮排CSS語法設定。
若CSS有父子關聯性的設定，啟用這個選項之後，CSS設定就可以有縮排的效果，在閱讀CSS樣式時更是井井有序，一目了然，參考圖4所示。
圖 4：縮排CSS語法。
CSS編輯工具-IntelliSense清單篩選功能
在Visual Studio 2010時，撰寫CSS語法時，雖然提供智慧型感知功能(IntelliSense)，但IntelliSense清單不會進行篩選，只會顯示屬性所在位置，例如以下範例，在輸入了「font-si」字串之後，還會看到empty-cells、float、height…等等非「font-si」字串開頭的屬性，參考圖5所示：
圖 5：Visual Studio 2010 IntelliSense清單無篩選功能。
在Visual Studio 11中，只要按下鍵盤空間棒(Space鍵)，就會有IntelliSense效果列出可用的屬性設定，也只會將符合篩選條件的屬性資料列出，參考圖6所示：
圖 6：Visual Studio 11 IntelliSense清單具備篩選功能。
CSS編輯工具-「Color Picker」視窗
在Visual Studio 11中設定CSS顏色(Color)時，會出現一個「Color Picker」視窗，以視覺化的方式，隨選您喜好的顏色。若「Color Picker」視窗未出現，可以將游標停留在設定顏色的屬性項目上後，按鍵盤「Space」鍵，然後利用滑鼠點選顏色，或是按下鍵盤的向下鍵將游標先移動到「Color Picker」視窗，再按左、右鍵挑選顏色，參考圖7所示。
圖 7：「Color Picker」視窗。
你也可以直接按下鍵盤「+」按鈕，此時便會顯示出調色盤，這樣就更容易挑選顏色了。此外你還可以拉動視窗下方的捲軸來設定透明度(Opacity) ，參考圖8所示。
圖 8：設定透明度(Opacity)。
更好的是，你以可以按下調色盤下方的「Pick」按鈕，游標會變成滴管形狀，然後移動游標到視窗中，或作業系統其它視窗中項目的上方，調色盤也會馬上自動顯示游標下方項目的顏色讓你選取，參考圖9所示。
圖 9：使用「Pick」按鈕，游標會變成滴管形狀來選顏色。
CSS編輯工具-跨瀏覽器CSS程式碼片段功能
不同瀏覽器的CSS語法不盡相同，因此若要設計一個網頁，適用在多種不一樣的瀏覽器上，又要要求版面、樣式一致，在CSS的定義上就要多下苦工，需要為不同的瀏覽器來撰寫不同的CSS設定語法。
以下例來說，若在Visual Studio 11設定CSS的透明度(Opacity)時，在編輯工具輸入「op」字串後，再按下鍵盤「Tab」鍵兩次，就會產生適用多種瀏覽器的Opacity屬性設定語法，參考圖10所示：
圖 10：設定Opacity。
例如此範例產生了底下filter開始的三行：
div
{
background-color:#666;
width: 100px;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
由於IE瀏覽器要設透明度時，要使用「filter: alpha(opacity=50);」這行語法；而Firefox瀏覽器要設透明度時，要使用「opacity: 0.5;」這行語法，利用程式碼片段功能，就可以產生出給不同瀏覽器使用的相同功能的屬性設定語法。您不用擔心IE瀏覽器看不懂「opacity: 0.5;」這行屬性設定的問題，因為瀏覽器會自動忽略看不懂的屬性設定值，相同的道理Firefox瀏覽器也是一樣。-moz開頭的設定便是給Mozilla相容的瀏覽器看的。-WebKit開頭的設定便是給WebKit系列瀏覽器，像MAC OS上的Safari瀏覽器看的，參考圖11所示。
圖 11：跨瀏覽器CSS程式碼片段功能。
JavaScript編輯工具
在Visual Studio 11中微軟重新打造JavaScript編輯工具，新的 JavaScript編輯工具整合了許多撰寫Visual Basic或C#程式時可以使用的功能，像是「Go To Definition (移至定義) 」視窗、程式自動縮排功能、IntelliSense清單…等等，讓程式設計師更容易找尋到程式碼，並更便於管理。
例如當你在撰寫JavaScript程式中的function時，游標停留在function開頭的「{」號，或結尾的「}」時，JavaScript編輯工具就會自動將對應的括號反白顯示，參考圖12所示。
圖 12：自動將對應的括號反白顯示。
若輸入程式碼，也會自動進行縮排，例如以下範例，在Visual Studio 11工具中撰寫一個HTML網頁，在JavaScript程式區塊中撰寫DrawData函式中的第一行程式，按下鍵盤「Enter」鍵時，工具就會自動排版程式碼，參考圖13所示：
圖 13：自動排版程式碼。
自動縮排程式的功能，讓程式更容易閱讀，參考圖14所示：
圖 14：自動排版程式碼。
JavaScript編輯工具支援ECMAScript5標準
Visual Studio 2010的JavaScript編輯工具，提供驗證的機制，檢查Java Script程式碼是否有符合ECMAScript3標準的規範。而下一版的Visual Studio 11，則能遵循ECMAScript5標準，如此就能夠幫助程式設計師寫出更嚴謹，並符合新標準的程式碼。
ECMAScript5標準中新增一個Strict Mode功能，可以讓你的程式碼執行在更嚴謹的環境中，能夠避免瀏覽器執行到不安全的程式碼，或丟出例外。
例如有段Java Script程式碼如下， SayHi函數中宣告一個物件，有兩個屬性名稱重複了，若沒有使用Strict Mode功能，Visual Studio 11的JavaScript編輯工具不會顯示任何問題。
function SayHi ( ) {
var obj = { Prop1: 1, Prop1: 2 } ;
}
若啟用了Strict Mode，例如修改程式碼，在SayHi函數第一行加上"use strict"，啟用strict模式：
function SayHi ( )
{
"use strict" ;
var obj = { Prop1 : 1, Prop1 : 2 } ;
}
則當你宣告的物件屬性名稱重複時，Visual Studio 11的JavaScript編輯工具會自動進行語法的驗證，而「Error List」視窗便會顯示警告訊息，如下圖15所示：
圖 15：JavaScript編輯工具會自動進行語法的驗證。
ECMAScript5 - JSON支援
ECMAScript5標準也提供JSON處理能力，可以將JSON字串還原序列化為JavaScript物件，也提供方法可以將JavaScript物件序列化為JSON字串。
參考以下例子，利用JSON.parse方法將「{"EmployeeID":"1" , "EmployeeName":"Mary"}」字串直接轉換成JavaScript物件，然後就可以利用屬性的語法，讀出EmployeeID與EmployeeName的值：
var obj = JSON.parse( '{ "EmployeeID" : "1" , "EmployeeName" : "Mary" }' );
alert( obj.EmployeeID + "," + obj.EmployeeName );
在Firefox 8.0執行時，會顯示一個訊息，參考圖16所示：
圖 16：將JSON字串直接轉換成JavaScript物件執行結果。
延續上個例子的情境，當你修改JavaScript物件的EmployeeID屬性為「001」；EmployeeName屬性為「Carry」後，利用JSON.stringify方法將物件序列化為JSON字串：
obj.EmployeeID = "001";
obj.EmployeeName = "Carry";
alert(JSON.stringify(obj));
在Firefox 8.0執行時，會顯示以下訊息，參考圖17所示：
圖 17：將JavaScript物件直接轉換成JSON字串執行結果。
ECMAScript5 – 字串處理
因為JavaScript編輯工具已經支援ECMAScript5標準，因此你可以使用內建的方法來進行字串操作，例如去除字串前、後空白；轉換大寫、小寫，或進行字串截取的動作，參考以下範例所示：
var str = " Mary ";
document.writeln( "[" + str + "]" ); //印出：[ Mary ]
str = str.trim( );
document.write( "[" );
document.write( str );
document.writeln( "]" ); //印出：[Mary]
document.writeln( str.toUpperCase() ); //印出：MARY
document.writeln( str.toLowerCase() ); //印出：mary
document.writeln( str.trim().substr(1, 1) ); //印出：a
JavaScript編輯工具 - XML註解功能
在JavaScript編輯工具撰寫程式時，可以像C#以及Visual Basic程式語言一樣，利用XML註解來加上程式的說明，例如下圖所示，在撰寫JavaScript方法時，可以在程式編輯工具，按滑鼠右鍵，選取「Insert Snippet」-「XML Comments」，然後選取想要使用的程式碼片斷：
圖 18：XML註解功能。
本例選取了「summary」項目，Visual Studio 11便自動產生以下XML註解片段，您可以自行加入描述資訊：
function Greeting(name) {
/// <summary>Description</summary>
}
本範例修改如下，新增summary項目，描述Greeting函數用來「顯示歡迎訊息」；param項目則是用來說明Greeting函數有一個傳入參數，名稱為「name」；型別為「string」。
function Greeting(name) {
/// <summary>顯示歡迎訊息</summary>
/// <param name="name" type="String">名稱</param>
/// <returns type="String" />
return "Hello, " + name;
}
若JavaScript程式中使用到此帶有XML註解的方法時，Visual Studio 11便會自動顯示XML註解中的說明，參考下圖19所示：
圖 19：自動顯示XML註解中的說明。
訂閱