Web技术，各安其位

学Web也有几个年头了，零零散散的做了几个。但深知还没有品评论足的资格，于是抱着和大家讨论的心态，谈谈对Web技术的一些看法。

 

Web技术是一个很宽泛的概念，涉及(X)HTML、CSS、Javascript、XML、ASP.NET、PHP、JSP和Web Service等众多技术。没有系统的学习，很难掌握Web技术。万维网是开放的，几乎每一个人都可以通过万维网来向世界传递自己的声音。在博客技术盛行之前，很多个人都希望架设自己的主页。直到现在，拥有可以完全自定义的个人网站依旧是很多人的梦想。或许是这种开放性超出了限度，而很多人认为可以轻松的使用FrontPage、Dreamweaver这类“所见即所得”软件构建自己的站点，再加上“腥风血雨”的“浏览器大战”，这个Web世界够乱的了。Web的先行者们已经为平息这种混乱努力了很多年，Web世界似乎也看到了和平的曙光。我冒昧的将前人的成果总结为一句话：Web技术，各安其位。

 

HTML + CSS -- 你是结构，我是表现

 

“<table>仅仅就是表格”。大概很多讲Web标准的文章上，都会有类似的描述。这又要说说历史了，很多人曾经把table当作一种布局的方式，把网页中的各种元素像搭积木一样堆砌在table的格子中。惭愧的是，我八年前做第一个网页的时候，也是使用table布局，而且让我更为苦恼的是，我根本不能将表格单元进行合理的对齐。多少年之后，CSS大展其才，div+css成了网页布局的代名词。可是遗憾的是，div被过度的使用了。曾听说过有人用div做一个表格，这真是太搞笑了。

 

html和css的争执，几乎就是table和div的比拼。其实这应该不是一个很复杂的问题：table是表格，是用来显示数据的；div是块，是为了实现元素隔离的。避免div滥用的方法就是，使用最精准的html语义元素，在已有的html元素块不能满足css布局需要时，才使用div。

 

用最精准的语义元素结构化网页，向CSS提供最合乎语义的接口，以实现最简洁的CSS代码。

 

JavaScript -- 我只是客户端脚本

 

在这个Ajax泛滥的时代，JavaScript很显然被神化了。各种JavaScript库也抢占web设计的前沿阵地，我承认，JavaScript库的确让我们轻松的跨平台，无障碍的成为一个制造出绚丽动态效果的设计师。但在web世界，方便总是和滥用并行，大量的无用JavaScript脚本充斥着Web页面。页面中JavaScript的每一次运行，都是对浏览器的严酷考验。用户不但要忍受JavaScript解析器的频繁升级，还要提防浏览网页时冷不丁蹦出的意外惊喜。用户试图关掉JavaScript，可是又害怕错过那些使用JavaScript显示的重要内容。我们的用户真的很无奈了。

 

我们不能再寄希望于JavaScript的正常工作了，或许某一天我们的用户会抱怨“没有开启JavaScript的浏览器怎么什么也看不到啦”。我想，在静态网页能够正常显示全部信息的基础上，使用JavaScript来展示Web世界的绚丽多彩，这才是JavaScript的生存之道。

 

JSP -- 其实我也只是表现

 

查看众多jsp源文件，java代码堂而皇之的披着<% %>的外壳肆意抢夺html的版面。我很难理解为什么要让jsp承受这么大的负担，我们绝对应该给JSP减负。在我看来，jsp更应该是一个表现接口，只负责把用户传递给Servlet，然后再传递给前台页面。我强烈赞同“最大化静态”的思想，即一个页面应该使用最大化数量的静态元素，使用最小化数量的动态元素。

 

我这里只提到JSP页面，因为JSP相比其它动态网页语言，在代码分离上做的更好。JSTL很好的把逻辑实现尽量多的放在服务器上，而在JSP页面上展现出与html一致的xml标签式风格。而Tag库，不但让JSP有机会接触更灵活的事务逻辑，而且不损坏JSP的有序页面。JSP的这些种种特性，都试图将JSP完全实现为一种动态表现的、能与后台复杂事务逻辑通信的动态网页语言。这大概也是我从ASP.NET辗转反侧迁移到JSP的原因吧。

 

EJB、Servlet -- 其实我们可以更加逻辑

 

大概是大家给了JSP太多的期待，Servlet并没有显示出来其更为强大的威力。如果把逻辑代码全部分离到Servlet中，既可以预编译java代码，提升逻辑处理的性能，又可以统一管理运算逻辑。

 

这里并没有什么好说的，我们只是忽略了它们的价值。

 

Web技术 -- 我们并不是简单的拼凑

 

上面几乎单独讲述了所有的Web技术，这也就是本文所要强烈提议的“Web技术，各安其位”。但是这种各安其位，并不是要割裂各种Web技术之间的关系。我们要把握各种Web技术的核心作用，扬长避短，让各种Web技术发挥出自身最擅长的功能，实现信息、美感、体验、性能等方面的平衡。

 

举个简单的例子吧，任务是实现表格中的“斑马线效果”。“斑马线效果”是为了使用户更容易的阅读多行多列表格数据，在满足信息显示的前提下，实现这种效果是很有必要的。首先用标准语义的table元素定义thead、tbody、tr等子元素，thead和tbody分离使得“斑马线效果”更容易定义适用范围。接下来根据整个页面的JavaScript用量选择JavaScript DOM方法或JavaScript库方法，来实现tbody中tr的隔行选择。实现隔行选择后，再用CSS定义“斑马效果”。呵呵，我们漏了一个问题，那就是table的数据从何而来。这个时候，JSP可以很好的将Servlet上疯狂运算得出的数据，有规则的传递给table的tr和td了。

 

就只举上面这个简单的例子吧，我想它已经能够说明“各安其位”的意思了。各种Web技术做好自己的事情，才能将自己控制部分的最好状态供其他技术使用，层层把关，处处优秀，这就是我们这些做Web的，所期待的事情吧，完美的平衡。