【华磊随笔】善于使用工具（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)

编辑推荐：热点新闻：腾讯收购康盛创想

网站导航：博客园首页  我的主页  新闻  闪存  小组  博问  社区  知识库