本博客文章为转载,请勿用于商业目的!
本博客文章为转载,请勿用于商业目的!
上个月,我在博客里宣布了微软将对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
翻译:Scott Guthrie 博客中文版

 


 

Visual Studio 2008Javascript提供了良好的智能感知提示,随着jQuery的流行和Microsoft将把jQuery shipVisual Studio中,jQuery.com发布了对Visual Studio 2008的智能感知提示文档。你可以在http://docs.jquery.com/Downloading_jQuery#Download_jQuery下载,或者直接在http://code.jquery.com/jquery-1.2.6-vsdoc.js得到。

 

 jQueryjs文件和vsdoc.js文件添加到页面的script引用即可。有一点需要注意的是,因为vsdoc.js是一个可执行的脚本,但这个vsdoc文件事不需要render的,所以需要用一个server sideif语句,这样可以禁止执行js文件,但同样将这些代码加载。

<script type="text/javascript" src="scripts/jquery-1.2.6.js"></script>

<% if (false)

   { %>

<script type="text/javascript" src="scripts/jquery-1.2.6-vsdoc.js"></script>

<% } %>

 现在,加入Script 块,敲入jQuery代码时就可以利用itellisense功能了:



 

Jeff King, Program Manager for Visual Studio Web Tools blogged VS2008 SP1 Hotfix to Support "-vsdoc.js" IntelliSense Doc Files on Friday. The HotFix (VS2008 SP1 only) allows Visual Studio to find "-vsdoc.js" files that have commenting for IntelliSense in the same folder as a script file linked to from your document. In this post I am going to show you how to get IntelliSense working once the HotFix is installed in both a normal aspx page as well as an ASP.NET MasterPage.

FolderTree 

So if you just link to the jquery-1.2.6.js file like below, Visual Studio will find the jquery-1.2.6-vsdoc.js file that is in the same folder and use it for IntelliSense.

Markup from head of Standard aspx page:

<head runat="server">
<title>jQuery IntelliSense</title>
    
     <script src="_assets/js/jquery-1.2.6.js" type="text/javascript"></script>
</script>        
</head>

What if you want IntelliSense and you link to the jQuery file from an ASP.NET MasterPage though? Well, the best I can figure you still have to hack things a little as Visual Studio will not provide IntelliSense in your child pages in this situation. Follow the code below for a workaround.

Markup from MasterPage:

<head runat="server">
    <title></title>
    
    <script src='<%# ResolveUrl("~/_assets/js/jquery-1.2.6.min.js") %>' type="text/javascript"></script>    
    
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

     Notice that I am using databinding when resolving the path of the jQuery file. See this post for an explanation. Also notice I am linking to the minified file.

Markup from child aspx page:

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

     <% if(false) { %>
            <script src="_assets/js/jquery-1.2.6.js" type="text/javascript"></script>
     <% } %>

</asp:Content>

image

By using the script tag hack, Visual Studio will find the file to use for IntelliSense, however when the page is rendered the script evaluates to false and the jQuery file from the MasterPage is not overridden. This method works well unless of course you need to debug the jQuery file. In that case, just switch the file linked to in the MasterPage to the non minified version. This method is nice though because you don't end up forgetting to switch to the minified file when you deploy.

Please let me know in the comments if you find or know of a better way.

posted on 2010-12-14 15:12  刘季  阅读(238)  评论(0)    收藏  举报