淘宝网前端应用与发展-中国云计算.pdf

淘宝网前端应用与发展 小马 关于我 { Name: “赵泽欣”, Nickname: “小马”, Jobtitle: “前端架构师” Company: “淘宝网” City: “杭州” Twitter: “zhaozexin” } 内容提要 • 淘宝前端发展史 • 每年的问题与挑战 • 实践经验与心得 • 前端发展展望 T @ 2003 T @ 2004 T @ 2005 T @ 2006 淘宝网前端 @ 2006 前端员工人数 50 40 30 20 10 0 0 2006 2007 2008 2009 2010 T @ 2007 淘宝网前端 @ 2007 前端员工人数 50 40 30 20 10 5 0 0 2006 2007 2008 2009 2010 问题与挑战 @ 2007 • 团队合作成本高，编码规范缺失 • 网站应用交互更复杂 • 脚本管理混乱，复用性低 UED开发流程 Mock-up Demo PRD Prototype [视觉设计 [前端工程 [产品经理] [交互设计师] 师] 师] 与交互/视觉的合作 • Axture • 制定标注规范 • 淘斯基 标注示例 与开发/测试的协作 • 共用的基础脚本库 • HTML/CSS 命名约定 选择一个脚本类库 • Prototype • jQuery • YUI • Dojo • Ext Prototype jQuery Dojo YUI Ext Why YUI ？ • 适合淘宝的多人协作开发环境 • 功能齐全，可高效开发 • 稳定 可靠 TBra 基于YUI的电子商务网站常用组件库 与开发/测试的协作 • 共用的脚本库 • 代码约定（HTML/CSS/JavaScript命名 规范） 与开发/测试的协作 合作中最常遇到的问题： 1. HTML 嵌套错误 2. 分不清哪些标签不要改劢，是前端丏用 的？ 3. 分不清哪些脚本应该由开发来写，哪些由 前端来写？ 与开发/测试的协作 问题: HTML 嵌套错误 解决方法： 增加特定格式的注释 教会开发人员使用Firebug HTML Validator 与开发/测试的协作 • 问题：分不清哪些标签不要改劢，是前端 丏用的 ？ 解决方法：@TODO 格式化 特殊的Hook 命名约定，开发人员保留拥有特殊id/class命名的标签 div id=“fp:slide” class=“tb-slide”……/div span class=“ww:token”a class=“ww-online”…/a/d