淘宝2011新版首页开发经验分享

"淘宝2011新版首页开发实践.pdf" 这篇文档主要讲述了2011年淘宝网新版首页的开发过程和实践经验，分享了前端开发团队在协作与技术创新上的策略。文档作者是前端开发工程师拔赤，他在2008年至2011年间分别在Yahoo!和淘宝任职。 一、从单兵作战到团队开发 在这个阶段，淘宝的前端团队采取了一系列措施以提升协作效率和代码质量。他们制定了统一的CSS和JavaScript命名规则，确保团队成员使用的词汇表一致，减少了因命名冲突导致的问题。每个模块都有独立的demo.html文件用于测试，而统一的layout.html文件则用来整合各个模块。通过服务器端包含（SSI）技术，他们能够方便地调用和组合这些模块。为了模拟实际生产环境，团队搭建了本地的a.tbcdn.cn环境，利用CDN的combo服务来合并多个CSS和JS文件，减少了HTTP请求。此外，他们还采用了Kissy 1.1.6框架，并利用沙箱机制防止全局变量冲突。最后，通过一个名为build.sh的打包脚本来统一发布JavaScript和CSS文件，确保了代码的整洁和版本控制。 二、摆脱栅格系统的束缚 淘宝原有的950像素栅格系统虽然在一定程度上提供了布局的规范，但在面对多样化的页面需求时显得过于局限。团队研究了不同的栅格系统，包括990像素的方案，但发现无法找到一个通用的公式来适应所有列宽和槽宽的组合。因此，他们主张在设计和实现时不应过分依赖栅格，转而采用更为灵活的布局方式。其中，双飞翼布局是一种典型解决方案，它使用绝对定位，简化了布局逻辑，同时减少了对语义不明的额外标签的依赖，使得内容的语义表达更为清晰。 参考资料： 1. 淘宝UED团队关于栅格系统的研究文章：http://ued.taobao.com/blog/2008/10/22/grid_system_research_1/、http://ued.taobao.com/blog/2008/10/22/grid_system_research_2/、http://ued.taobao.com/blog/2008/10/22/grid_system_research_3 2. 关于YUI Combo服务的介绍：http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:tbcdn 3. 拔赤在SlideShare上的YUI Combo分享：http://www.slideshare.net/lijing00333/yui-combo?from=ss_embed 通过以上实践，淘宝团队展示了如何通过团队合作、技术创新和灵活布局策略，成功应对大规模电子商务网站的复杂首页开发挑战。这些经验对于现代前端工程团队仍然具有重要的参考价值。