WEB前端

WEB标准化交流第一期聚会合照

作为前端开发中的一员，一直希望能够将同行聚在一起，大家聊一聊，相互学习，共同进步，共同推进WEB标准！但是苦无机会。10，31日，10月的最后一天，终于迎来了前端开发的第一次聚会。首先非常感谢身边网[http://shop.360side.com/]给我们提供了交流的场地，也很荣幸的请来了克军，阿当与建斌，作为我们这次技术交流会的主要嘉宾，让他们来和我们一起共同拨开云雾。在此非常感谢他们。此次交流会的主题是：WEB重构中文件的组织。通过此次交流会，我的收获还是颇多的，在此我还是来谈谈我对此次交流会的收获吧：

作为我们日常工作中的WEB重构，主要分为：html,css,js.但是会涉及到的东西就比较多了，有切图，还有可能会嵌套模板程序等工作。故而在此事交流会，建斌提到了作为一名前端开发人员，需要成为一名多面手，一专多长的概念。就是你的前端开发必须要精通，也就是所谓的专，而对于其他的你也必须得了解，甚至会，比如交互设计，视觉设计，后端的程序语言，等等。刚才提到了我们在工作中主要做的就是切图，书写html,css及js.那么我们的文件的组织当然也就是这些东西啦，但是对于html来说的话，他是随着一个设计稿，或者说随着一个页面走的，所以在此，我们就不多说了，主要谈的是：css，js,还有就是背景图片。

根据我的收获我就来谈谈css，js 及背景图片的文件组织吧：

CSS：听完大家的交流以后，我觉得CSS从产品来分，还是比较合理的，首先确定整站的公用样式，比如全局样式，当然就包括html,div,p,ul,li等标签的margin，padding的清零，链接的颜色，整站的基本字体大小，头部，尾部，及一些可以公用的样式，可以作为一个公用的样式文件，对于这个公用样式的话，需要你与交互设计师，视觉设计师一起沟通交流，来确定，如果前期不能确定的话，那么在后期在来进行确定公用样式的话，是非常费力气的。作为 一个好的产品应该是这样的。也许有些人会觉得这个成本是否太高，是不是不太现实，的确有一部分公司的设计稿是一张一张的出的，而且设计师是随心所欲，只要觉得怎么好看就怎么来，根据感觉不出来，是一套整体的风格，如果出现这种情况 ，就得看你的沟通能力了，曾经彪叔有说过，WEB重构就是一场战斗，如果你有看过地下党的片子就清楚，他们里面虽然也有流血牺牲，但是他们很多时间为了避免牺牲，采用的方式就是沟通。所以沟通的技巧也是非常重要的。

有了公用样式以后，那么如果你的站比较庞大的话，那么还会分为频道样式与当前页样式，这样其实频道样式也算是频道的公用样式吧，前面的公用样式是指整站的公用样式，频道样式是指频道的公用样式，那当前页样式呢？就是本页专属的样式，与其他页面没有任何共同点的样式。哈哈，也许有又人觉得这样是不是很复杂呢？而且有三个样式表了，是不是对http请求数的增加呢，很多人应该看过关于前端性能优化相关的书籍或者文章，因为里面提到了http请求数，不过这不用担心，因为现在是开发阶段，还没有到发布的时候，还有就是因为当前页样式是本页专属的，克军的建议是可以直接写在本页的<style />中，还有就是解决http请求数方法很多，我们还会考虑到此页面的访问量，还有就是用户的第一次着陆情况来决定，在发布的时候是采用合并公用样式与频道样式呢，还是分开，在着陆页最多的页面采用空余时间加载这两个公用样式来解决http请求数的问题。

这就是我觉得css的文件组织，个人觉得这种方案还是很不错的，不过当然你得花心思了，嘿嘿，有人会说，项目紧张怎么办？时间来不及怎么办？这些的确都属于事实，有些人还会用生活质量作为借口，来说要把工作之外的时候用来休息，不能用来优化，如果这样的话，那我建议你换一家公司吧，能够有时间真正做一个合格前端开发的公司，这句话不知道又会得罪多少人了。

谈完了CSS，我们来看看JS：如果真正在要讲JS的话，就相对于比较复杂了，最终给出了一个可能一些大公司的操作方式，大部分公司还没有开始使用的方式：按需加载，主要提到的是YUI的load功能，这个我也正在学习中，如果你有兴趣，就和我们一起来学习吧。

嘿嘿，JS讲得比较简单，以后我们会专门增加JS的讨论，饭一口一口吃，路一步一步走，不要想一口吃个大胖子。

现在我们来讲讲图片，其实在我们的工作中主要分为两类图片：修饰图片（背景）与内容图片，由于内容图片主要是内容部门做的事情，我们涉及的比较少，我们主要涉及到的还是背景图片，但是在说内容图片之前，我还是建议大家给自己的公司建议，内容图片尽量压缩到最优化。什么是是最优化，就是在不影响图片质量的情况下的最小化。

对于背景图片，当然就会谈到背景图片的格式，因为格式可以影响到图片的大小及质量。还有就是背景图片的个数，他会影响到http请求数，所以我们需要对背景进行整合，就这就是国外所称的：CSS Spirits。

关于背景图片的格式，建议使用png8,这是我最热衷的，不过有时候因为设计师做出一些半透明的效果，故而只有使用png24,这个你可以和你的设计师商梁，因为现在ie6还占据了很大的市场，如果使用png24的半透明，就必须使用滤镜，不然在IE6下没法交差，不过还有一种办法就是单独针对IE6用一种有别于其他浏览器的背景图片，不过这样个人觉得没有什么必要，使用滤镜的风险还是挺大的，不仅仅降低页面的效果，甚至有可能让用户在访问你的页面的时候浏览器掉挂，所以本人暂时不建议使用 png-24。当然克军也提到了如果有动画效果的背景，就得选择使用gif格式。至于什么jpg这类的图片，在我的工作中，几乎很少使用，因为超过256色的背景图片还是非常之少的，不过有这种情况，就是整个页面的头部有一个大背景，但是 如果设计师把控得好，也可以使用png-8的。

关于背景整合的问题，其实也提到了，是将整站背景完全整合在一起呢？还是如何整合呢？方案是还是按CSS规则进行，就是全部公用的整合在一张上，频道公用的整合，单独使用的整合。当然还有一些会被频繁更换的背景，这时候就得小了，也可以整合，这你就得考虑清楚，将他们放在整合的背景中的什么位置，便于你更换。克军还提到了关于背景图片的使用，使用dataURI的方式，这种方式听说不会产生http请求数，这个我还得找时间学习学习。

这些基本就是整个交流会的主要内容，当然在这个过程我们引入了SEO，换肤，还有一些CMS相关的内容。如果谁对此有兴趣，可以单独和我们来聊，在此就不在多说了。

这是我们WEB前端开发交流线下第一次活动，在活动的准备上还是不够充分，比如没有提醒大家带上水，还有忘记了自我介绍的环节，不过也好，轮到自己的时候，在自我介绍，可以节约时间嘛，嘿嘿，不过下一期我们将有所改进，在错误中找到自己，嘿嘿，非常感谢来参加此次交流活动的同行们，谢谢你们。

有了你们的支持与参于，我相信前端开发会强大起来的。

参加此次活动的朋友们的分享：

克军：http://hikejun.com/blog/?p=466&cpage=1

建斌：http://www.greengnn.org/index.php/2009/11/01/club.html

期待其他同学的文章，由于本人水平有限，文章内容有不全之处，希望其他同学提醒，补充。

感觉崔凯[http://uicss.cn/]同学为我们照相，非常感谢。有了同学们的共同努力，让我们顺利的，并且成功的完成了第一期交流会，期待第二期的交流会。

顺便说一句：这是我们WEB标准化交流会的第一期，我们计划每月的最后一个周六举行，我们必须以WEB标准作为主题，以轻松的方式进行技术交流。

鉴于WEB标准化的范畴，后期我们可能将主题变为前端开发交流会。