首頁 > 開發者 > Visual Studio
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){sobj=sobj[d[2]],dobj=dobj[d[2]];}if(d.length == 4){sobj=sobj[d[3]];dobj=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檔案，筆者測試過，效果是一樣的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
