VS 2010 和 .NET 4.0 系列之《VS 2010中JavaScript Intellisense的改進》篇

  • 23155
  • 0
  • 2011-07-02

摘要:VS 2010 和 .NET 4.0 系列之《VS 2010中JavaScript Intellisense的改進》篇

【原文位址】 JavaScript Intellisense Improvements with VS 2010
【原文發表日期】 Thursday, April 08, 2010 11:56 PM

這是我針對即將發佈的VS 2010 和 .NET 4所撰寫的 文章系列的第二十篇。

今天的部落格文章討論VS 2010 和免費的 Visual Web Developer 2010 Express版本中一些JavaScript intellisense方面很棒的改進。你會發現在VS 2010中對大型指令碼檔案和大型指令碼程式庫,JavaScript Intellisense載入快多了,而且它現在跟早期的Visual Studio版本相比,對更多的高級場景提供了陳述句完成支援。

除了寫部落格外,我現在還使用Twitter發短文和共享連結。請通過twitter.com/scottgu跟隨我。

增強的JavaScript Intellisense

為像JavaScript這樣的動態語言提供Intellisense比一個像VB或C#這樣的靜態型別的語言更為麻煩,要正確地推斷變數,方法等的形狀和結構,虛擬執行(pseudo-executing)實際程式碼本身幾乎是不可能的,因為JavaScript作為語言足夠靈活,可以在運行時動態地修改和變換(morph)這些東西。

VS 2010中的JavaScript程式碼編輯器現在擁有足夠的智慧在你鍵入字元的同時,進行這類的假執行(pseudo-code execution),那就是它的Intellisense完成保持正確和完整的原理。下面是一個簡單的示範,展示其在最終版中的豐富性和彈性。

第一個場景: 基本型別推斷

當你在JavaScript中宣告一個變數時,你不需要宣告它的型別,變數的型別是基於賦予的值而定的。因為VS 2010在編輯器中假執行程式碼(pseudo-executes the code),它能夠動態地推斷出變數的型別,基於賦給一個變數的值提供合適的程式碼intellisense。例如,注意下面,VS 2010 提供了對應於字串的語句完成提示(因為我們將一個字串賦給了「foo」變數):

image

如果我們後來把一個數字賦給了 「foo」 變數,語句完成提示(在指派完成之後)自動改成提供針對數字的intellisense:

image

第二個場景:操作瀏覽器物件Intellisense

在JavaScript中操作網頁的DOM,以及操作客戶端的瀏覽器物件,是經常性的事。

以前的Visual Studio版本會針對標準的瀏覽器對像提供JavaScript語句完成提示,但對更高級的場景(象建立動態變數和方法)沒有提供什麼幫助。VS 2010 在編輯器中的的程式碼假執行(pseudo-execution of code)現在允許我們對更大範圍的場景提供豐富的 intellisense。

例如,在下面,我們使用瀏覽器的 window 物件建立了一個名為「bar」的全域變數。注意我們後來試著使用該變數時,在VS 2010中是如何得到intellisense的(提供了針對字串的正確型別推斷):

image

當我們賦給「bar」變數一個數字 (而不是字串) 時, VS 2010 intellisense引擎正確地推斷出它的型別,把語句恰當地改成針對數字的提示了:

image

第三個場景: 炫耀一下

因為 VS 2010 在編輯器中虛擬碼執行程式碼,它能夠處理一堆你扔給它的場景(既可以是實用的,也可以是古怪的),還能夠提供準確的型別推斷和intellisense。

例如, 在下面,我們使用了一個for迴圈和瀏覽器的window對像動態建立和命名多個動態變數,bar1, bar2, bar3…bar。注意編輯器的intellisense引擎是如何識別和為它們提供語句完成提示的:

image

因為透過瀏覽器的window對像添加的變數同時也是全域變數,它們現在還同時出現在全域變數intellisense下拉框中了:

image

更棒的是,型別推斷依然是完全支援的。所以,如果我們將一個字串賦給一個動態命名的變數,我們會得到字串的型別推斷。如果我們賦了一個數字,我們將得到數字的型別推斷。

為好玩起見(也算炫耀吧!),我們可以調整我們的for迴圈,給偶數序的變數(bar2, bar4, bar6等)賦一個字串,給奇數序的變數(bar1, bar3, bar5等)賦一個數字:

image

注意在上面我們的「bar2」變數得到了針對字串的語句完成提示。

注意下面,對「bar1」 ,我們得到了針對數字的語句完成提示:

image

這可不僅僅是一個很酷的聚會遊戲(party trick)。。。

雖然上面的例子有點人為性質,但在運行時動態建立變數,方法和事件處理器的做法在許多Javascript程式庫中是常見的東西。許多流行的指令碼程式庫使用這些技術將指令碼程式庫的下載大小保持盡量的小。VS 2010對使用這些技術的指令碼程式庫的分析和虛擬碼執行確保你在對它們程式設計時即可(out of the box)就能得到更好的程式碼 Intellisense。

結語

 

Visual Studio 2010 (與免費的 Visual Web Developer 2010 Express) 現在提供非常豐富的 JavaScript Intellisense 支援,這些支援能夠與現時相當受歡迎的 JavaScript 程式庫一併使用,並且能夠在您撰寫 ASP.NET 應用程式時期,使用 JavaScript 與啟用 AJAX-enabed 場景時提供支援。

希望對您有幫助。

Scott