摘要:VS 2008中的jQuery Intellisense
【原文位址】jQuery Intellisense in VS 2008
【原文發表日期】 Friday, November 21, 2008 2:07 AM
上個月,我在部落格裡宣佈了微軟將對jQuery提供支援。在過去的幾個星期裡,我們與jQuery開發團隊合作,在Studio 2008 和 Visual Web Developer 2008 Express版本(免費的)中增加了很好的jQuery intellisense支援。現在這個支援可以下載使用了。
在VS 2008中啟用jQuery Intellisense的步驟
要在VS中啟用jQuery的intellisense完成,你要遵循三個步驟:
第一步: 安裝VS 2008 SP1
VS 2008 SP1 在Visual Studio中加了更豐富的JavaScript intellisense支援,對很大部分的JavaScript庫加了程式碼完成支援。
你可以在這裡下載VS 2008 SP1 和 Visual Web Developer 2008 Express SP1。
第二步: 安裝VS 2008 Patch KB958502以支援"-vsdoc.js"Intellisense檔案
2個星期前,我們發佈了一個修補檔,你可以將其運用到VS 2008 SP1 和 VWD 2008 Express SP1版本上,該修補檔會導致Visual Studio在一個JavaScript程式庫被引用時,搜尋是否存在一個可選的"-vsdoc.js"檔案,如果存在的話,就用它來驅動JavaScript intellisense引擎。
這些加了註解的"-vsdoc.js"檔案可以包含對JavaScript方法提供了輔助檔案的XML註解,以及對無法自動推斷出的動態JavaScript簽名的另外的程式碼intellisense提示。你可以在這裡瞭解該補丁的詳情。你可以在這裡免費下載該補丁。
第三步: 下載jQuery-vsdoc.js檔案
我們與jQuery開發團隊合作編寫了一個jQuery-vsdoc.js檔案,該檔案對串連的jQuery selector方法的JavaScript intellisense提供了幫助註解和支援。你可以在jQuery.com網站的官方下載網頁上下載jQuery和jQuery-vsdoc檔案:
把jquery-vsdoc.js保存到你專案中jquery.js檔案所在的同一個目錄中(同時確認它的命名前置詞與jquery檔案名匹配):
然後你可以像這樣,透過一個html <script/>元素來引用標準的jquery檔案:
或者也可以使用<asp:scriptmanager/> 控制項來引用它,或者在一個單獨的.js檔案的頂部加 /// <reference/> 註解來引用它:
在完成之後,VS就會在你引用的腳本檔案所在的同一個目錄中尋找一個-vsdoc.js檔案,如果找到的話,就會用它來做幫助和intellisense。
例如,我們可以使用jQuery來做一個基於JSON的get請求,得到該方法的intellisense(掛在$.之後):
以及 $.getJSON()方法參數的幫助/intellisense:
如果你在方法叫用中嵌套回呼函數的話,intellisense依舊會工作。例如,我們也許想對從伺服器傳回的每個JSON對像進行迭代:
對每個項,我們可以執行另一個嵌套的回呼函數:
我們可以使用each回呼函數動態地往列表中附加一個新圖片(圖片的src屬性將指向傳回的JSON媒體圖片的URL):
然後在每個動態生成的圖片上,我們可以連接一個點擊事件處理函數,在點擊時,會透過動畫效果來消失:
注意jQuery intellisense在我們程式碼的每一個層次都很乾淨地做了提示。
JavaScript Intellisense 技巧和訣竅
Web工具開發團隊的Jeff King本星期早先時候撰寫了一個很棒的文章,對有關VS 2008中JavaScript intellisense工作原理的若干常見的問題做了回答,我高度推薦閱讀該文。
他談到的一個訣竅(我要在這裡做示範)是在你想要在用戶控制項/部分(.ascx檔案)中使用JavaScript intellisense時可以使用的一個技術。經常地,你不想要在這些檔案中包括對JavaScript庫的<script src=""/> 引用,這些引用往往是存在於使用了用戶控制項的母版頁或內容網頁之上的。當然,問題是,你這麼做的話,在預設情形下VS是無法知道用戶控制項中用到了這個腳本,因此不會為你提供intellisense 。
啟用intellisense的一個方法是,在你的用戶控制項中加<script src=""/>元素,但在其周圍加一個伺服端的<% if %> 塊,在運行時其值總是為false:
在運行時,ASP.NET不會顯示這個腳本標籤(因為是包含在一個總是為false的if塊中的),但是,VS卻會運算這個<script/>標籤,在用戶控制項中為它提供intellisense。在像用戶控制項這樣的場景下,這是個非常有用的技術。Jeff在他的FAQ文章和原先的jQuery intellisense文章裡還有更多細節。Rick Strahl在這裡也有一篇很好的文章,是關於使用jQuery intellisense的。
更多信息
想進一步瞭解jQuery的話,我建議觀看Stephen Walther在PDC大會上做的《ASP.NET和jQuery》講座。點擊這裡下載他的程式碼範例程式和 powerpoint講義。
Rick Strahl也有一篇非常棒的《Introduction to jQuery》文章,討論如何在 ASP.NET使用jQuery。Karl Seguin 在這裡和這裡有2篇非常好的jQuery基礎課程文章,對如何使用jQuery的一些基本知識提供了比較簡短的的概述。
我也高度推薦《 jQuery in Action》一書。
希望本文對你有所幫助,
Scott