"淘宝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
通过以上实践,淘宝团队展示了如何通过团队合作、技术创新和灵活布局策略,成功应对大规模电子商务网站的复杂首页开发挑战。这些经验对于现代前端工程团队仍然具有重要的参考价值。