《Ext JS权威指南》节选：在Visual Studio中实现Ext JS智能提示

Visual Studio（下面简称VS） 2008和2010都有从JS库文件获取智能提示的功能，不过直接使用ExtJS的库文件的话，虽然也有提示，但是不全，应该说是大部分没有，主要原因是VS脚本提示功能是根据原生JavaScript对象的结构读取，而ExtJS的对象定义与原生JavaScript对象完全不同，因而很难取得其属性和方法。因而，要完整支持ExtJS的智能提示，就必须将ExtJS对象的属性和方法提炼出来，然后组织成一个VS能读懂的JavaScript对象结构，这样就能实现智能提示了。

要将ExtJS对象的属性和方法提取出来不难，从图1中DOM树中的Ext对象结构，可以看到，只要遍历一次Ext对象就可以取得所有对象的属性和方法。不过，实际上，不是那么容易，原因是在ExtJS的对象中，有些是实例，有些是函数形式的对象，对于实例，其属性和方法直接在对象内，而对于函数形式的对象，其属性和方法却是在原型内，因而要区别对待。

还有一个重要问题，就是命名空间的问题，如Ext.menu.Item、Ext.data.Store或Ext.layout.container.VBox这些3或4级的类名。采用递归遍历，存在的问题是，判断该对象是JavaScript对象还是ExtJS方式定义的对象存在难度，因而，最好的方式是使用附录中的类名列表，通过它去遍历对象。这样就简单很多了。在列表中，如果对象是实例，使用Ext的isObject方法，其值会是true，否则，该对象就是函数式对象，需要实例化才能使用，因而属性和方法在原型内，不过这里要注意可能存在静态方法，因而为了避免遗漏，还得遍历对象本身的属性和方法。

Ext对象本身需要另外加进去，主要原因是它不同于其他对象那样可直接通过对象本身或原型提取属性和方法，需要把在类列表中的类排除出去，这个可通过对象或函数是否存在“$className”属性解决。

还有对象的别名问题，这个直接从ClassManager对象的maps对象中的alternateToName属性中取得，将别名直接指向对象VS就认识了。

最后的问题是如何将对象输出到页面，这个使用encode方法就可以自动转了。

命名空间的问题，可通过ns方法解决，它会自动根据类名创建对象，只要别和Ext对象发生冲突就行了。

目标明确后，现在可以开始工作，创建一个名称为VS-Ext.html的文件，然后加入以下代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>第1章在Visual Studio中实现智能提示</title>
<link rel="stylesheet" type="text/css" href="../Ext4/resources/css/ext-all.css"/>
<script type="text/javascript" src="../Ext4/bootstrap.js"></script>
<script type="text/javascript" src="class.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//建立命名管道
Ext.ns("VS.Ext");
var processPrototype=function(s,d){
//处理静态方法
for(var c in s){
if(s.hasOwnProperty(c)){
d[c]="";
}
}
//处理原型
for(var c in s.prototype){
d[c]="";
}
}
//处理实例
var processInst=function(s,d){
var i=0;
for(var c in s){
d[c]="";
}
}
//处理Ext对象
for(var c in Ext){
if(Ext.hasOwnProperty(c)){
var p=Ext[c];
if(Ext.isObject(p)){
if(!p["$className"]){
if( ["buildSettings","versions","lastRegisteredVersion"].indexOf(c)>=0 ){
VS.Ext[c]=p;
}
}
}else if(Ext.isFunction(p)){
if(!p["$className"]){
VS.Ext[c]="";
}
}else{
VS.Ext[c]="";
}
}
}
//枚举对象
Ext.Array.each(classList,function(classname){
Ext.ns("VS."+classname);
var d=classname.split("."),
sobj=Ext[d[1]],
dobj=VS.Ext[d[1]];
if(d.length >= 3){
sobjsobj=sobj[d[2]],
dobjdobj=dobj[d[2]];
}
if(d.length == 4){
sobjsobj=sobj[d[3]];
dobjdobj=dobj[d[3]];
}
if(sobj && dobj){
if(Ext.isObject(sobj)){
processInst(sobj,dobj);
}else{
if(sobj.prototype){
processPrototype(sobj,dobj);
}
}
}
})
var html="Ext="+Ext.encode(VS.Ext)+"<br/>";
//处理别名
for(var c in Ext.ClassManager.maps.alternateToName){
html+=c+"="+Ext.ClassManager.maps.alternateToName[c]+"</br>";
}
Ext.getBody().dom.innerHTML=html;
})
</script>
</body>
</html>

代码中，先创建新的命名空间“VS.Ext”，在其内放置对象的属性和方法。

函数processPrototype用于处理非实例的对象，第一个循环主要是遍历静态属性和方法。第二个循环用于遍历原型的属性和方法。

函数processInst用于遍历实例的属性和方法，在这里不能加hasOwnProperty方法检测属性或方法是否其拥有的，不然会找不到属性和方法，除非是在实例创建后加的属性和方法。

接着处理Ext对象，如果属性指向的是对象，还要排除grid、form等对象干扰，因而这个要自己查看一下Ext的源代码，做一下处理。

接着是枚举class.js中的类了，先通过ns方法生成类的命名空间，然后根据小数点拆分一下类名，取得源对象和目的对戏，然后根据isObject确认对象是实例还是非实例，进行相应的处理。

最后是把VS对象内的Ext对象和ClassManager对象内的别名对照表转换为文本，输出到页面。

在浏览器中打开页面，将看到一个JSON格式的输出文本，全选该文本，然后复制到一个名称为Ext.js的文件内，这样，通过该文件就可在VS内实现智能提示了。

要使用把Ext.js，首先将文件复制到项目中。然后根据编辑的文件类型采用不同的方法。

如果是单独的脚本（扩展名为js）文件，在脚本文件头部加入以下语句：

/// <reference path="[相对路径]/Ext.js" />

这里一定要注意路径，如果要编辑的脚本文件与Ext.js文件路径相同，语句为：

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

最简单直接的方法，就是在解决方案资源管理器中把Ext.js文件直接拖动到编辑的脚本文件中，会自动生成该语句。

有了该语句后，输入“Ext.”就可以看到如图2所示的智能提示了。

如果找不到ext.jsb2文件（ExtJS4好像以新方法提供，一般情况下没有该文件），也可以使用1.4.2节中生成的Ext.js文件，笔者测试过，效果是一样的。

《Ext JS权威指南》节选：在Visual Studio中实现Ext JS智能提示相关推荐

powershell 编程_如何使用PowerShell以编程方式更改Visual Studio中的默认浏览器，并可能使自己陷入困境...
powershell 编程 UPDATE: Why my own MacGyver solution was brilliant in its horrible way, the folks over ...
小弟的新书《Ext JS权威指南》终于出版了
链接:http://product.china-pub.com/3661375&weibo#ml <ext js权威指南> 前言第1章 ext js 4开发入门 / 1 1.1 ...
vscode中怎样格式化js代码_如何在Visual Studio代码（VSCode）中格式化代码
回答(30) 2 years ago 对于那些想要自定义要格式化的JavaScript文件的人,可以使用 JSfiles 属性上的任何扩展名同样适用于HTML . { "beautify.o ...
《JS权威指南学习总结--1.1语言核心》
1.1语言核心 --本节主要介绍<js权威指南>基础部分各章讲解内容和一些简单的示例本小节内容: 一.第二章讲解js注释.分号和Unicode,第三章主要讲解js变量和赋值简单示例: ...
《JS权威指南学习总结--开始简介》
本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心各章节重点 ...
在Visual Studio上开发Node.js程序
在Visual Studio上开发Node.js程序原文:在Visual Studio上开发Node.js程序 [题外话] 最近准备用Node.js做些东西,于是找找看能否有Visual Studi ...
在Visual Studio上开发Node.js程序(2)——远程调试及发布到Azure
[题外话] 上次介绍了VS上开发Node.js的插件Node.js Tools for Visual Studio(NTVS),其提供了非常方便的开发和调试功能,当然很多情况下由于平台限制等原因需要在 ...
开奖及送书|《Vue.js权威指南》
2020 06 15 今天距2021年199天这是一页河山第135次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 07:30准时推送. 微信公众号后 ...
使用visual studio code调试单个js文件
使用visual studio code调试单个js文件 1.添加配置 2.选择Node.js Launch Program生成基本配置 3.修改配置信息 4. 运行js文件进行debug调试 5. ...

《Ext JS权威指南》节选：在Visual Studio中实现Ext JS智能提示

《Ext JS权威指南》节选：在Visual Studio中实现Ext JS智能提示相关推荐

最新文章

热门文章