JS.IntelliSense_VS2008(Orcas) So Cool

JS.IntelliSense_VS2008(Orcas) So Cool

2007年10月13日 星期六 上午 10:23

[JS.IntelliSense]VS2008(Orcas) So Cool

我很早以前就想找一个能够像VS中C#一样可以有很强的IntelliSense开发工具来写脚本JS，但是到现在还没有能够真正找到一理想的工具。很早以前听说VS2008能够给我带来一点震撼，但是又有人说那只是对ASP.NET AJAX有IntelliSense，又有点失落感。今天看到ScottGu的一篇博客发现VS2008能够提供几乎和C#一样的IntelliSense，让我激动万分，也由于很久没有写博客了顺便把自己的一些体验和大家分享一番。

     由于我不是MSDN杂志的订阅者，而我很讨厌VPC虚拟机(内存有点不够用，呵呵)，所以还没能用上Visual Studio 2008 code name "Orcas" Beta1版，用于体验的还是March CTP的，或许在后面的版本中将会有所不同。当我们在<script></script>标记中随便敲入一个字符时，就会给我们像C#一样的体验，这样不但能提高开发效率，也能大大降低我们的错误。还有一个快捷键能够将默认的IntelliSense给显示出来，此快捷键为ctr+j,有机会可以试试。

     从上图所看到的是VS2008中对普通函数的支持，同时他也对我们在HTML标记中定义的id属性值的支持，就犹如服务端控件的ID属性值一样。在ASP.NET AJAX的支持更是强大，它能按命名空间，类等来提示，也就是说和C#中的IntelliSense有的一拼，从下面的两张图中可以看出他的伟大，命名空间，类，属性，方法，枚举等无一放过。


     我想只是这样的提示，当我们有很多方法或属性时还是不知道当时设计的时候是怎样个想法或者说那么多的方法我怎么知道他是用来做什么的呢？不用着急，待我慢慢道来，微软早就考虑到这一点，JS也支持XML注释，当然当我们发布时编译器会把我们注释文档给过滤了，不然脚本太大可是会降低我们应用程序的性能。JS的注释和C#差不多，都用"///"来注释，用"<summary></summary>"来表示摘要，用"<param name=""></param>"来表示参数等，这里就不多说了，唯独不同的是注释的位置。在C#中我们把注释写在方法或类等的上方，而JS是写在方法或类等的下方，这可能回和C#区别开而不会让程序出现错误提示(只是猜想没有根据，呵呵)。根据我的观察，当我们注释时就会激活TypeLibBuilder.exe来收集这些注释，并保存在内存(猜的)中就像字典一样，当我们应用时来收集并显示出来。

     在VS2005的HTML或ASPX等页面中的<script></script>标签中写代码时就会提示一些基本的JS关键字和一些对象方法，在VS2008中得到更好的支持。当然我们制作一个程序时会有很多个JS文件，引用多个JS文件而各个JS文件中又会相互调用，怎样在JS文件中对另一个JS文件中方法等的IntelliSense呢？让我们一起来享受一下。

     为了能够在对另一个JS文件实现IntelliSense当然要引入某个文件的信息，这样才能够对另一个文件的方法等进行提示。我们只是应用另一个文件的一些普通方法，可以用如下代码引用：

     ///<reference path="JScript1.js">

     当我们用ASP.NET AJAX等时，我们就会涉及到"程序集"(这个概念我也不是很清楚，等以后会慢慢揭开这个模糊的概念的，我们先不要管他)。当我们要对某一个程序及进行相关操作时，将path改成name，可以加入程序集assembly以表示引用当前程序集的某个文件。如果将assembly省略则表示对System.Web.Extensions进行引用，代码如下：

  

///<reference name="MicrosoftAjax.debug.js">

     OK，写到这里也差不多了，或许还有很多新的体验等着我们去享受，从上面的一些例子中我们就可以看出VS2008对JS的支持有多强。有了这个东东，我想在不久的将来js牛人会越来越多，AJAX的脚本开发将会更简单更高效，让我们等待VS2008，拥抱那美好的明天，呵呵！

前言

    今天參加高雄場次的微軟研討會，第一場由曹祖聖主講 VS2008 對 Javascript 的支援，內容提到一些不錯和有待改進的部份整理成本篇文章，由於目前 VS2008 還處於 Beta2 版本，所以未來可能還會進行修改或強化。

Javascript Intellisense

    VS2008 採用型別推測(type inference)方式來支援 Javascript 的 Intellisense，透過此一方式可以讓開發人員更容易找到變數/物件的成員，這個方法的缺點是如果無法正常推測初結果，則必須手動輸入，且此一方式需要花額外時間進行推測，所以，Intenllisense 需要一段時間才能夠呈現。除此之外，VS2008 也支援 HTML 中部引入外部的 js 檔，即使外部檔案位在其他網站，也仍然能夠使用(但是需要花一些時間)。如下圖：

圖1、Javascript Intellisense[1]

如果 HTML 中引入多個 js 檔案，為了 js 檔可以顯示其他 js 的 intellisense，必須在 js 檔的最開頭加上下面的相依宣告：

/// <reference
///   path="~/scripts/mylib.js"
///   assembly="System.Web"
///   name="ScriptResourceName.js"
/// />

其中 path 屬性用來定義引用的 js 檔案路徑，如果你使用 .NET 的組件，可透過 assembly 和 name 屬性指定 .NET 組件。如果忽略 assembly 屬性，預設為 System.Web.Extensions。

    為了讓 Intellisense 支援說明，必須在定義的函數、物件或欄位中定義 XML 說明註解(註：註解說明位置和 C# 不同)。如：

function getWelcomeMessage(name){
  /// <summary>
  /// 這個函數是用來根據使用者姓名，自動產生歡迎文字
  /// </summary>
  /// <param name="name">使用者姓名</name>
  /// <return>string</return>

  return "歡迎 " + name;
}

執行結果：

圖2、函數說明提示[1]

圖3、參數說明提示[1]

以下是常用的 XML 註解：
函數參數

<param
    name="參數名稱"
    mayBeNull="true|false"
    optional="true|false"
    type="參數型別"
    parameterArray="true|false"
    integer="true|false"
    domElement="true|false"

    elementType="陣列元素型別"
    elementInteger="true|false"
    elementDomElement="true|false"
    elementMayBeNull="true|false">

    參數說明文字
</param>

在定義數值說明時，可以使用 type, integer, domElement 和 mayBeNull。由於 JavaScript 沒有 integer 型別，只有 number 型別，所以可以將 type 設成 Number，integer 設成 true，來表示整數型別。可省略參數用 optional ="true"。參數如果可以重覆出現可將 parameterArray 設為 "true"。

陣列說明

="_x0000_s1026">

因為 JavaScript 並沒有類似 int[] 這樣的陣列宣告，因此在定義說明時，可以使用 elementType, elementInteger, elementDomElement 和 elementMayBeNull 來定義陣列的說明。

函數回傳值
<returns
    type="傳回值型別"
    integer="true|false"
    domElement="true|false"
    mayBeNull="true|false"

    elementType="陣列元素型別"
    elementInteger="true|false"
    elementDomElement="true|false"
    elementMayBeNull="true|false">
    傳回值說明文字
</returns>
元素和函數參數相同不贅述。

屬性
<value
    type="數值型別"
    integer="true|false"
    domElement="true|false"
    mayBeNull="true|false"

    elementType="陣列元素型別"
    elementInteger="true|false"
    elementDomElement="true|false"
    elementMayBeNull="true|false"
    locid="descriptionID">

    屬性說明文字
</value>
元素和函數參數相同不贅述。

欄位
<field
    name="欄位名稱"
    type="欄位型別"
    integer="true|false"
    domElement="true|false"
    mayBeNull="true|false"

    elementType="陣列元素型別"
    elementInteger="true|false"
    elementDomElement="true|false"
    elementMayBeNull="true|false"
    locid="descriptionID">欄位說明文字
</field>
元素和函數參數相同不贅述。

AJAX, ASP.NET, Web Service 對 Javascript Intellisense 支援

雖然 ASP.NET 也可直接印入 js 檔，但官方建議透過 ScriptManager 引用，引入之後即可獲得相同支援。如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/MyLib.js" />
    <asp:ScriptReference Path="~/jQuery.js" />
  </Scripts>
</asp:ScriptManager>

如果想在引入 Web Services 中的 js，首先，在 Web Service 中必須加入 System.Web.Script.Services.ScriptService Attribute，如下：

[System.Web.Script.Services.ScriptServie()]
[WebService(Namespace="http://tempuri.org")]
public class WebService: System.Web.Services.WebService{
  [WebMethod()]
  public String Hello(){
    return "Hello World";
  }
}

接著在 ASP.NET 的 ScriptManager 中加入 Services 即可獲得支援，如下：

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services>
    <asp:ScriptReference Path="~/MyLib.asmx" />  
  </Services>
</asp:ScriptManager>

在 AJAX 上，AJAX Client Behavior, AJAX Client Control 和 AJAX Client Library 使用上也支援 Javascript Intenllisense。

圖4、AJAX 的支援[1]

Javascript 偵錯

VS2008 要對 IE 進行偵錯，必須在 IE 上關閉"停用程式碼除錯"選項(VS2005 或 Visual Script Debugger 相同)。如未關閉可能出現如下提示訊息：

圖5、除錯關閉提示[1]

關閉方式如下圖所示：

圖6、關閉除錯停用選項[1]

語法錯誤提示

當你透過 Visual Studio 編輯 Javascript 時，會即時檢查語法的正確性，如果你用 VS2005 編輯 C# 就會相當熟悉這個通能，他會在語法錯誤之處會標示提醒符號，如下圖：

圖7、語法檢查[1]

中斷點

可在程式中設定中斷點，如同 C# 程式一般，像是條件式中斷、hit count 中斷等，也可在中斷時，透過 Call Stack, 區域視窗, 即時監看視窗, Visualizer 等檢查相關的參數狀態，如下圖：

圖8、中斷點[1]

圖9、各種除錯視窗[1]

圖10、Visualizer [1]

偵測外部網頁

    這個功能我覺得是這個主題中相當重要的一部分，這個主要用來偵錯已經在運作中的網頁 Javascript 功能，雖然 VS2005 也有類似的功能，但不像 VS2008 這麼強大，他可將指定的網址相關檔案下載下來，並在 VS 中呈現目前的內容，並且會依據實際情況變更。所以，如果你要研究某個網站的 Javascript 如何撰寫，只要透過這個方式將網頁資料透過 VS 偵測，並利用剛剛說的中斷點和其他除錯視窗，就是一個強大的 Hack 工具。唯一美中不足的是無法動態修改程式碼。希望未來能夠提供此功能。

    由於沒有 VS2008 可抓圖展示，就以投影片的內容整理如下：

啟動外部偵錯
1. 使用 IE 瀏覽網頁
2. 使用 Visual Studio 2008 將 IE 的行程 (iexplorer.exe) 附加到偵錯模式下

圖11、VS 附加到指定 IE 行程 [1]

3. VS 會下載相關檔案到 Script Document

圖12、Script document [1]

4. 開啓檔案
4. 設定中斷點
5. 進行偵錯

圖13、Script document [1]

常見問題

1. 是否支援物件的 Intellisense?
是

2. 是否支援物件的程式碼註解格式？
是

3. 是否支援 Reference To 到函數或物件的功能？
否，尚未支援

4. VS2008 的 Javascript 註解格式是否可以產生文件？
目前尚未支援

5. 是否可關閉 Intellisense 功能？
否，沒有提供選項設定。

6. 可偵錯 Silverlight 嗎？
是

7. 現有的 javaDoc 註解格式是否支援 Intellisense 或提供轉換工具？
否，可透過 Open Source 尋找看看

8. 可支援 Firefox 上的偵錯嗎？
否