css和javascript的分工与协作

        最近ajax在国内开始流行，很多程序员赶上了这个潮流，不幸的是，在这个大浪中，太多人拘泥于j2ee或者php等的经验，对服务器端做的事情转到客户端的javascript有热情，对css分离内容与表现不太有热情，一般的也就是知道该这么做，在论坛上可以看到很多程序员用ajax也只是在旧的table布局下套用了一点ajax的元素。这样没有充分发挥基于web标准开发的威力，只能算是旧瓶勾兑新酒。另外一种极端的做法是，单一页面网页程序，所有的元素都通过javascript生成。这样做可以避免一些无谓的css bug,最终的程序在装载阶段就比较缓慢，用到中间也容易变慢，内存泄漏，或者装载的组件过多，做得不太好的容易出现浏览器假死，尤其在网速慢或者网速不稳定的客户端上。
       我一直都很反感一些javascript框架做一些布局的类库。web页面制作，表现，内容，行为三层的分离是最基本的原则，用javascript做布局是越界，该css做的事情由javascript做了，中间平白无故多了一层，浪费。目前而言，这些布局除了在模仿可缩放，可调整尺寸的地方有些必要以外，其他都不太值得使用。很多人对css避而远之，可能是因为在布局问题上受到的挫折太多。从前的解决办法是用一些hack手法，或者针对不同的浏览器多写几套css文件。现在css已经有很多试验性的例子，从menu,tab,tree等的生成，到grid布局的一些尝试，如google和yahoo都有这方面的css解决方案供参考。很多问题也能从http://www.positioniseverything.net/上找到解决办法，cssplayer这样的网站也能帮助我们找到很多借鉴的例子，从原则上说，无论是程序员还是美工，用css做一个拽一点的网站都不存在很大的障碍。当然，这个过程中肯定会遇到一些诡异的，一时无法解决的问题，但是网页有很多方法美化，总有绕过去的办法。用grid布局可能容易背上多div,多class症的罪名，不过比起table布局，多div症还是有可取之处。div所花的标签还是要少很多，内容和表现还是能够很好的分离，唯一的缺点是布局的无意义标签多了那么一点点，这一点点比起那些bug来说，还是少很多了。从开发效率上来讲，我认为是非常值得，缺点可能是如果刚开始就用这种手法，习惯之后就成了依赖，忘了css本身的魅力。
       ajax和css紧密相连的一个重要原因在于，css可以帮助web页面减肥，减小dom树。很多ajax程序都是对dom树操纵来操纵去，尽管ext这样的框架对dom中的element获取做了优化，一次存取后，第二次他就记住了，Ajax在短小精悍的dom树比臃肿的dom树中速度要快很多。举个最近工作中遇到的例子，刚开始试用ajax做一个较复杂的页面，类似联众游戏的房间页面。房间的桌子列表，房间的人员列表，聊天室这三个是ext类库生成的，外面有些装饰元素，以前是table布局，有10来张小碎图。就外面一点点修饰页面，table套table，套的不厌其烦。估计大家这种页面都见多了。html页面程序不到4k，因为毕竟原来的页面程序员还是懂一点css，把很多table的修饰拿到外面的css文件中了。在本地一测试，平均装载时间稳定在8秒左右。当然，ext还用的debug模式，稍微优化了一下，平均6秒左右。我看不惯表格套表格的多余，动手整了整外面的修饰，简化为那么5个div，所有的碎图都变成背景图，把4个切碎的图合并成一个，页面之内再也没有<img>标签了(一个链接按钮)除外。html文件简化到900字节左右，从文件大小来看，毫无疑问，不值。但页面装载速度降为2s左右。当然，这个页面的装载速度还有提升的空间，我认为可以接受的速度是局域网1秒左右。从firebug的显示来看，html文件的网络传输速度没有差别，局域网内基本看不出来，但是在页面装载的时候，ajax程序开始获取后台数据，生成element组件的时候，速度差距就出来了。动态生成几十个element，累加起来就不少了。
       做web开发，需要稍微复杂一点的控件的时候就开始犯难了。html本身提供的元素有限，复杂的没有，如spinner这种东西基本只能用javascript结合css做，可以找到一些现成的，当然一些javascript框架提供了一些不错的组件。目前我还用得比较少，略微看了些，感觉不太爽的地方是很多javascript鼓励一种不好的习惯，在元素中直接声明style，而不是分配类名。其实这些元素一般都附带一些基本的css文件，但是这些js框架对css文件的说明不太够，很多时候，改动组件的外观应该比较方便，最好不必在javascript中改，直接修改css比较省事，也符合分工的原则。其实，这也是jsf让人诟病的地方。在所见即所得上，现有的js在一些特定的工具上还能实现，jsf在netbeans上也做的不错，可惜的是缺乏一个整合的工具，让整个web页面能够在良好的分工协作中所见即所得，这是非常影响效率的一个问题。在复杂控件上，能够零散的找到一些框架使用，但是在修改这些控件的外观上，缺乏良好的对css的支持。这是目前比较头疼的问题。国内有不少单一页面的ajax应用，好些看上去就知道用了某个js框架，但是基本没怎么改css，美术效果很不咋地。
       web2.0程序开发，还在摸索中，目前还没有看到很好的解决css和javascript分工协作的问题，只能寄希望于开发人员自身对此的认识了。