您的位置：首页 > Web前端 > JavaScript

vs2010中 js的intellisense(智能提示）和 Snippets（代码块)

2011-06-12 00:02 323 查看

//关于JS提示:使用referencepath
///<referencepath="Scripts/jquery-1.4.1-vsdoc.js"/>
String.prototype.trim=function(){
///<summary>清除两端空格</summary>
///<returnstype="String"/>
returnthis.replace(/(^\s*)|(\s*$)/g,"");
}

说明:summary里面为该方法的说明,returns为返回值类型说明！你也许觉得reference,summary这些单词多难敲啊!呵呵，这里就需要用到Snippets(代码块)

当你输入ref,sum的时候，智能提示就会出来，你只需要按Tab+Tab即可!注意看ref前面的小图标,只要是这种图标的你都可以按两下Tab键，就会快速出来预定义的代码片段!

接下里你新建一个sp2010.js的js文件，这个文件你需要调用common.js里面的trim函数

//关于JS提示:使用referencepath
///<referencepath="common.js"/>
///<referencepath="Scripts/jquery-1.4.1-vsdoc.js"/>

functiontestTrimStr(str){
///<summary>测试去掉字符串两端空格</summary>
///<paramname="str"type="String">需要去掉空格的参数</param>
///<returnstype="String"/>
returnstr.trim();
}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

说明:

如果你没有指明param的参数或者param参数的type为String类型，不会有智能提示图片1和图片3，但你把param参数指明的时候，就会看到提示了!

这样就用调用C#里面的方法一样(如果方法写了注释)都可以看到参数和返回值!这样的JS的调用起来才得心应手吧!

接下里新建Default.aspx页面，调用sp2010.js里面的testTrimStr()方法(当然有人肯定说，你这样太啰嗦了吧，直接调用trim()啊，这里只是演示)

<scriptsrc="Scripts/jquery-1.4.1.js"type="text/javascript"></script>
<scriptsrc="common.js"type="text/javascript"></script>
<scripttype="text/javascript"src="sp2010.js"></script>

<scripttype="text/javascript">
functiontest(name,age){
///<summary>我的测试方法</summary>
///<paramname="name"type="String">姓名</param>
///<paramname="age"type="Int">年龄</param>
///<returnstype="String"/>
returnname+""+age;
}
</script>

<scripttype="text/javascript">
$(function(){
vara="test";
alert(testTrimStr(a));
alert(test("harvey",22));
});
</script>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

调用时，参数，返回值都一目了然!

如何知道更多的代码块和自定义代码块?

在JS区域中,HTML区域中,C#后台中，快捷键Ctrl+K，Ctrl+X会出现前三幅图片，Ctrl+K，Ctrl+b出来第四幅图片，主要是管理Snippets,可以导入，导出!所有的Snippets都是按两下Tab+Tab调出

下面自定义一些Snippets，新建一个XML文件，键入如下代码,另存为sptoolbar.snippet

<?xmlversion="1.0"encoding="utf-8"?>
<CodeSnippetFormat="1.0.0"xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
<Header>
<Title>sptoolbar</Title>
<Author>Harvey</Author>
<Shortcut>sptoolbar</Shortcut>
<Description>用于Sharepoint中的ToolBar</Description>
<SnippetTypes>
<SnippetType>Expansion</SnippetType>
</SnippetTypes>
</Header>
<Snippet>
<CodeLanguage="html">
<![CDATA[
<%@RegisterTagPrefix="wssuc"TagName="ToolBar"Src="~/_controltemplates/ToolBar.ascx"%>
<%@RegisterTagPrefix="tbb"TagName="ToolBarButton"Src="~/_controltemplates/ToolBarButton.ascx"%>
<wssuc:toolbarid="UserManagerToolBar"runat="server">
<!--button显示在左边-->
<template_buttons>
<tbb:ToolBarButtonrunat="server"id="tbbAdd"Text="添加"ToolTip="添加"ImageUrl=""OnClientClick=""Click=""/>
</template_buttons>
<!--button显示在右边-->
<template_rightbuttons>
<tbb:ToolBarButtonrunat="server"id="tbbDelte"Text="删除"/>
</template_rightbuttons>
</wssuc:toolbar>
]]>
</Code>
</Snippet>
</CodeSnippet>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

上面就是一个新建Snippet的模板,你肯定觉得每次都敲这么多重复的轮子是一件很痛苦的事情!还记得上面的快捷键吗?Ctrl+K，Ctrl+X调出代码块,注意如果这里你直接输入Snippet按两下Tab+Tab是不行的，有些时候还是用Ctrl+K，Ctrl+X吧!这样你就可以直接在CDATA填你的核心就是了!如果需要更详细的Snippet的了解，可以打开系统默认的Snippet看几个，你就明白了!

Ctrl+K，Ctrl+b调出代码段管理器，导入刚才保存的sptoolbar.snippet即可!注意保存的语言选择和你自定义的snippet匹配哦，比如这个snippet在HTML页面中使用，语言就选择HTML，在C#后台中使用，就选择visualC#

测试刚才自定义的!Ctrl+K，Ctrl+X，一切OK

说明:自定义snippet调用的时候好像只能Ctrl+K，Ctrl+X才能看到，不能像系统那样，输入首字母智能提示就出来了!也许是我那里没有弄好!虽然没有智能提示，但是你也可以直接输入sptoolbar按Tab+Tab直接调用!

虽然在vs2008里面也可以这样，但是当时我也只是初步了解了解，没有具体实践过，这次看VS2010TrainingKit的时候，第一个labs就是这个，顺便自己也记录记录.

参考VS2010TrainingKit

Technorati标签:intellisense,vs2010,js

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

vs2010中 js的intellisense(智能提示） 和 Snippets（代码块)

vs2010中 js的intellisense(智能提示）和 Snippets（代码块)