>>>

作者: 華磊 發表於 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)

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

網站導航：部落格園首頁個人主頁新聞快閃記憶體小組博問社群知識庫

轉載於:https://my.oschina.net/hualei/blog/6860