【華磊隨筆】善於使用工具（1）-使用IE8開發人員工具和FireBug分析Jquery FlexiGrid的實現原理

做者: 華磊 發表於 2010-08-20 22:27 原文連接 閱讀: 706 評論: 6

【華磊隨筆】善於使用工具（1）-使用IE8開發人員工具和FireBug分析Jquery FlexiGrid的實現原理

 

"工欲善其事,必先利其器"

當今Web開發，如何有效的提高用戶操做體驗已經愈來愈重要，以如今的技術而言，Javascript 操做dom和style是最有效的手段；Web開發不像Windows開發同樣，每每要涉及到不少不一樣的技術和方向；同時，因爲機制的緣由和技術的分散，快速有效方便的調試Javascript很大程度上會直接影響到咱們實際的開發效率。

    筆者自1999年就開始涉獵Web開發，最先時抱着本HTML參考手冊，開着記事本就開始寫網頁了，所謂的調試就是不停的增長alert來跟蹤程序的執行狀態；實話說，10餘年了，因爲技術自己的特色，Web腳本的調試方法並無像其餘語言同樣有着明顯的進步；我仍是常常看到一些開發人員用alert進行代碼的跟蹤，不得不認爲是這個領域的悲劇現象。

    但就最近兩年，由Mozilla、Google、Apple幾大巨頭又從新點燃了瀏覽器戰場的硝煙，同時，也因爲競爭，使得主流的瀏覽器產品也進入了快速發展的黃金時期；瀏覽器的功能不斷升級，調試手段的不斷改進，執行效率的不斷提高，同時也提供了更多好的工具和方法來進行更快更方面的Web腳本調試；其中的較好的首推 IE8開發人員工具和FireBug。

    筆者並不想一個功能一個功能的介紹，只想分享最近工做的一些心得和體會，更但願經過解決問題的過程和方法給你們帶來一些思考。

主場景：分析Jquery FlexiGrid的機制和原理，將其用在本身的項目中。

筆者最近須要實現一個新的asp.net Grid控件替換現用的控件，開始的時候根據實際的需求對javascript grid方案進行了解和研究，主要針對功能、代碼結構、產生的Dom結構、異步交互的機制等方面進行對比分析，最終選擇了Jquery FlexiGrid，功能和代碼結構的分析沒什麼好說的，針對異步交互和Dom結構則用到了一些工具幫助快速的進行分析。

場景一：使用FireBug分析FlexiGrid的異步交互機制

Firebug是FireFox中很是好的一個插件，用來分析dom模型、網絡傳輸、調試js、研究樣式等很是使用；本場景下使用Friebug對FlexiGrid的異步交互進行分析。

首先在FireFox中安裝Firebug，直接使用ff訪問http://getfirebug.com/ ,直接點擊根據提示安裝。

重啓FF後在Firefox中開啓（點擊狀態欄右下的圖標），像下面這個樣子：

咱們用到的是網絡面板，用來跟蹤頁面的網絡交互狀況；切換到網絡面板，開啓網絡跟蹤

在FF中打開FlexiGrid的演示項目（本文中直接使用http://flexigrid.info/站點），在firebug網絡面板中開始顯示跟蹤網絡交互的結果。

嗯，很是實用，咱們能清晰的跟蹤到打開該頁面的全部網絡交互，並可以清晰的看到每一條請求的url，狀態碼，域名，大小，時間線，同時還能看到彙總的狀況；個人網絡的確很慢。大部分數據來自緩存，打開http://flexigrid.info/仍是用了4.8秒，其中，藍色時間線（Timeline）標誌着DomContentOnload（jquery $(document).read,概念你們不陌生吧）的截止點，紅色時間線標誌Onload截止點，最後一條請求的終點嘛，則是全部Request的終止點。下圖清晰地對time line進行了說明和解釋。

針對網絡面板更專業的解釋，參見(http://www.softwareishard.com/blog/firebug/firebug-net-panel-timings/)英文，介紹的很清晰。

回到咱們的場景，咱們經過XHR查看xmlrequest的請求狀況，並仔細查看FlexiGrid的請求和響應的數據（能夠稱之爲協議）。

很好很乾淨，請求模式用了Post，連get參數都沒有（firebug會根據當前的請求展示不一樣的信息，好比若是有get參數，則會顯示get面板，上例返回了json數據，則顯示了json面板），post參數很簡單（這個場景應用也簡單，具體操做時我會針對相對複雜的例子進行分析），返回的數據格式麼，標準的json對象，包含了一個rows的數組，嗯，也很簡單。用在個人控件裏，能夠經過get參數傳遞個人額外信息，json麼，標準的格式，按樣生成一個就行了。

對比起來，FlexiGrid很好很簡單，很適合改造和應用，異步交互上知足要求。

其實：本例介紹的是使用工具來快速的分析和調試頁面腳本，實際筆者的選擇過程很是痛苦，此處再也不累述。

總結一下收穫：咱們經過firebug跟蹤頁面的網絡請求狀況，針對具體的xmlrequest咱們分析了具體的請求數據，同時，經過時間線，咱們能很清楚的分析頁面的加載速度，js執行速度和緩存的應用狀況。

 

場景二：經過分析腳本執行所產生的Dom模型（順帶看看樣式）

IE8開發人員工具和FireBug同樣是很是強大的工具，實話說，我升級到IE8的惟一理由就是開發人員工具；咱們經過這兩個工具來實際分析腳本的dom處理結果，看看乾淨程度、dom結構合理嗎。

首先是FireBug,切換到html頁，刷下網頁或者控件作點事情，關鍵是在頁面展示的是咱們須要分析的操做結果。

的確，看到了不少信息，不過一層層找着看的確很累，就很實用，選中後直接點擊頁面你想看到的地方，html面板就自動切換到對應的上下文，我是經過隨便選中了一個Grid的td，而後往上找的。

右邊面板顯示了不少東西

• 樣式中咱們能方便的找到究竟是哪些樣式（哪文件，哪行代碼）影響到當前元素，甚至能夠改改看看效果。
• 計算出的樣式則是根據上下文進行計算，給出當前元素的的大多數樣式的計算取值（但願我沒理解錯）。
• 佈局不解釋。
• Dom麼，查看當前元素的dom節點的屬性、方法的取值和跟蹤（參考vside中的快速監視）。

接下來是IE8開發人員工具，一樣咱們打開網頁執行操做後，在工具菜單打開(或者直接F12)。

和FireBug相似，提供HTML面板和，嗯大致差很少，跟蹤樣式差很少就是firebug的計算樣式，屬性至關於Dom（不過感受仍是差些）。

看起來，這兩款工具很強大，設計師們能夠跟蹤樣式來分析、設計和優化本身的樣式表，對於程序員來講，都很實用，用來分析他人的網頁和成果，很方便。

回到場景，咱們能夠看出，FlexiGrid的Dom機制主要是根據選擇的table，產生了6個div和裏面的無數表格和元素

.nBtn Div：絕對定位的浮動層，用於顯示控制Grid的列的按鈕，該層中的元素根據表頭的mouse事件動態產生，顯示

。

.nDiv Div：絕對定位的浮動層，生成一個表格，用於顯示控制Grid的列的控制面板的顯示和隱藏，顯示

。

.hDiv Div:相對位置的層，負責展現表頭，內部生成一個只有thead的表格，同時用做存儲表格的列的控制參數，基本上FlexiGrid主要經過hDiv來查詢列的配置（好比說列名，排序等），並處理大量表頭事件。

.cDrag Div:負責列寬拖放的層，響應事件來調整列寬。

.bDiv Div:包含實際表格數據的層，基本上看到的表格數據都是在這裏處理，內部產生一個只有tbody的表格，其中tr對應具體的行，tr的id爲row+id(異步返回的Json中的行id)。

其實還有2個，用於分頁器跟快速查詢，這個演示中沒有顯示出來。

OK，Dom結構還算清晰，一層一層點下去看，比較乾淨，每一個元素基本都有對應的用處。FlexiGrid再次過關。（實際狀況複雜和困惑一些）。

 

總結：IE8開發人員工具和FireBug能夠方便的跟蹤頁面的Dom結構，具體元素的樣式、dom屬性方法、佈局；兩個工具均可以動態的對Dom Css Html進行編輯，並馬上在瀏覽器中看到效果。

 

OK，經過上述的分析和理解FlexiGrid入圍，咱們最終選中它做爲咱們的控件展現部分的基礎。

 

下一次將具體到dotNetFlexGrid的開發過程，經過若干場景爲你們分享一些Javascript 的調試和優化技巧。

評論: 6　查看評論　發表評論

程序員找工做，就在博客園

最新新聞：
· 大公司是如何走上開源之路的(2010-08-23 13:30)
· Firefox 4.0 Beta 4 RC 下載(2010-08-23 13:22)
· 盛大Bambook零售價999元 9月28日正式上市(2010-08-23 13:19)
· 周鴻禕：開心網該學Zynga而不是Facebook(2010-08-23 13:12)
· 蝶變Acorn：撬動英特爾與蘋果(2010-08-23 12:57)

編輯推薦：熱點新聞：騰訊收購康盛創想

網站導航：博客園首頁  我的主頁  新聞  閃存  小組  博問  社區  知識庫