Dorado 5 : AJAX集成开发框架的布局重构之路

一个Ajax集成开发框架的布局重构之路

一、背景介绍

随着web标准的逐步深入人心，人们也逐渐开始认识到使自己的页面符合标准的重要。web标准认为网页应该由三部分组成，即结构（Structure）、表现（Presentation）和行为（Behavior）。而用XHTML描述内容结构，用CSS作为表现语言，用DOM+ECMAScript实现页面行为也成了web标准的三个组成部分。做到符合web标准，实现结构、表现和行为的分离成为目前许多网站重构的主要工作，也成了现有web项目要实现的目标之一。本人目前从事的开发工作也面临着同样的一个问题—页面布局重构。

二、问题描述

目前公司推出的Ajax集成开发框架――Dorado在结构、表现和行为的分离处理上已经日趋完善，而长久以来存在的一个不足之处就是在所提供的布局管理器上：在JSP页面上通过自定义标签来完成布局的定义，在最终的HTML静态页面上，则会根据用户在标签上设置的属性来生成各种TABLE元素完成页面的布局。这样做虽然对用户来说可以更好的封装各种布局的实现细节，降低开发人员的工作量，但是相对于采用DIV+CSS的布局策略则在灵活性、兼容性以及性能上明显要"稍逊风骚"，因此对集成框架中提供的布局标签进行重构也成了目前要处理的工作。

三、解决方案

在开始页面重构工作之前，首先用Dorado Studio IDE新建需要进行布局重构的页面，这里我们拿典型的Header + Body (Left + Center + Right) + Footer"三段式"布局风格页面来加以说明，其布局界面图如下：

浏览器最终得到的静态HTML代码为这个样子：
<table cellspacing="0" cellpadding="8px" style="border-collapse: collapse;">
<tr>
<td colSpan="3" width="100%">top</td>
</tr>
<tr height="100%">
<td height="100%" valign="top">left</td>
<td width="100%" height="100%" valign="top">center </td>
<td height="100%" valign="top">right</td>
</tr>
<tr>
<td colSpan="3" width="100%">footer </td>
</tr>
</table>
为了达到同样的布局界面效果，我们手动新建了如下内容的HTML页面：
<div class="dorado-layout-container">
<div class=" dorado-layout-header">top</div>
<div class=" dorado-layout-body">
<div class=" dorado-layout-sidebar">left</div>
<div class=" dorado-layout-content">center</div>
<div class=" dorado-layout-sidebar">right</div>
</div>
<div class=" dorado-layout-footer">footer</div>
</div>
除了HTML页面之外我们又编写一个如下内容的CSS样式表文件：
.dorado-layout-container{
width:300px; height:200px; border:1px solid gray;
}
.dorado-layout-header{
height:40px; padding:10px; border-bottom:1px solid gray;
}
.dorado-layout-body{
clear:both; width:100%; height:100%;
}
.dorado-layout-sidebar{
float:left; width:10%;height:100%;border-right:1px solid gray;
}
.dorado-layout-content{
float:left; width:68%;height:100%;
}
.dorado-layout-footer{
height:40px; padding:10px; clear:both; width:100%;border-top:1px solid gray;
}
这样重构前的准备工作告一段落。接下就是对生成布局HTML页面的自定义标签Java类进行重构：由生成TABLE的标签类重构成生成DIV的标签类。因为根据我们编写的最终要得到DIV+CSS页面可以知道，标签类的内容将会被"减肥"不少，因为所有对结构的表现方式都"跑到"CSS中去了。
标签Java类重构完成之后，为了验证布局保持与原来一致，于是编写各种测试布局的页面，并在不同类型的浏览器下进行测试，经过一定的调整，我们便完成了一个布局重构的工作。以此类推，剩下的页面布局重构也采用这种方式来进行处理。

四、经验分享

在使用DIV+CSS进行布局重构的时候，可以说是我对网页布局观念的不断转变以及对web标准认识不断加深的过程，也是对CSS技术灵活运用逐步熟练的过程。起初对CSS的一些布局属性不是很熟，感觉使用DIV进行布局比传统采用TABLE要麻烦许多，几乎达到放弃的地步，不过值得庆幸的是目前采用DIV+CSS已经成为一种趋势，因此网上相关的资料非常的丰富，解决了我所遇到的各种问题，比如如何实现DIV高度和宽度的自适应， 如何做到CSS的布局在不同浏览器的兼容等等，这些问题都可以通过google找到相关的答案。要得到理想的布局效果，一个合适的编辑器也是我们必备的利器之一。由于本人长期使用EditPlus编辑各种文本文件，因此成了首选，不过目前最新的Web设计工具Dreamweaver8已经实现了对CSS布局的可视化，相信会成为大家的最爱。
下面是我在进行布局重构的时候认为比较重要的几个观念和要点。
1、在CSS中涉及到布局方面主要是float，overflow，clear，display，padding，margin以及position几个属性，我们必须对它们各自的作用，以及不同的属性值的意义做到"烂熟于胸"，否则布局工作将是一件非常痛苦的事情。因此本人强烈推荐苏沈小雨编著的《CSS2手册》，该文档也应该成为每个使用DIV+CSS进行布局的开发人员的"葵花宝典"。
2、对CSS盒模式的理解，下面的示意图对于我们进行合适的布局非常有帮助，特别是在进行细微的布局调整方面。

3、不论是使用DIV还是TABLE进行布局，尽量减少嵌套层次。当使用了太多的嵌套层次之后，浏览器进行解析的时候将会得到全部的内容才能做显示，而使用尽可能少的嵌套div则可以做到边接收边显示（TABLE则需要完全取得整个表格中的内容才能做显示），这样可以加快显示速度。
4、在对class和id名称进行定义的时候尽量与内容结构相关，而不是与布局、表现相关。否则在布局发生改变之后，就会造成class或者id的名字跟它自己的表现形式不符，造成理解上的困难，对于页面内容旁边的side bar区域不要定义成leftBar，而应该根据内容定义成titleBar或者hotBar之类的名字，这样在布局发生改变的时候不会到该名字的继续使用。
5、使用XHML的语义元素来定义页面中的内容结构，比如用<h1><h2>这样的元素来定义各种标题结构的内容，用<ul><li>来定义各种条目结构的内容，用<table>来定义表格结构的内容。
6、在使用DIV，SPAN块状元素进行布局重构的时候还有一点需要特别注意，当我们以前采用TABLE进行布局的时候，TABLE在布局前会拿到所有的内容，然后会根据各个部分内容以及每块的布局设置来进行"通盘"考虑，然后重新计算最终的布局结构，块状元素则比较"自私"，缺少一种"全局"观念，它仅仅关心自己的布局，至于它前后左右是如何布局则不管，而这个工作则需要设计者来决定，当然我们也可以通过一些布局技巧来提高块状元素的"全局"素养，当做到这一步的时候，采用DIV+CSS进行布局将会变成一件非常轻松的事情！