1. 前端架构实践与思考
QQ.com front-end infrastructure practice
tomiezhang@tencent.com
http://daimaren.cn

2. 张耀辉
tomie/大王
2006.智联招聘
2007.腾讯网

3. 我来自这里...

4. 前端架构？

5. •架构,把握问题的关键，平衡设计。
•前端架构就像一个舞台，舞台布置好
  了，男女老少都可以在上面表演。

6. 从自己的产品出发

8. and more...

9. 产品页面B
专题页面1 产品页面A
首页改版2 首页改版1
产品页面C
xx页面调整
专题页面2
.....

10. •庞大的综合型门户！
•项目周期短，连贯性差！
•面对各种类型的页面！
•门户站点特有的裹脚布！

11. •需要大量的“码农”
•重复而意义不大的工作
•个人成就感的直线下落
•陷入代码维护的泥潭
•创新、成长沦为空谈

12. 肿么办?!

14. FEDS
Font-end Document System

15. 代码规范
文档体系库 脚本规范
移动设备规范
....
FEDS
Hound
辅助工具 koala
....

16. HTML/css 设计

18. <div class=”layout”>
<div class=”chief”></div><!--主要-->
</div>
单列结构
<div class=”layout”>
<div class=”chief”></div><!--主要-->
<div class=”extra”></div><!--扩展-->
</div>
2列结构
<div class=”layout”>
<div class=”chief”>
<div class=”main”></div>
<div class=”sub”></div>
</div>
<div class=”extra”></div><!--扩展-->
</div>
3列结构

19. <div class=”mod” id=””>
<div class=”hd”></div>
<div class=”bd”></div>
<div class=”ft”></div>
</div>
基本模块

20. 标准头图 公共导航 头条 文字列表
标准页卡 公共页尾 段落 图片列表
公共广告 视频列表
微博组件 图文混排
评论组件 排行榜列表

21. base.css
@media screen and (max-device-width:320px){
body{-webkit-text-size-adjust:none}
}
@media screen and (max-device-width:480px){
body{-webkit-text-size-adjust:none}
}
@media only screen and (max-device-pixel-ratio:2){
body{-webkit-text-size-adjust:none}
}
@media only screen and (max-device-width:768px) and (max-device-width:1024px){
body{-webkit-text-size-adjust:none}
}

22. base.css
.layout{width:960px;margin:0 auto;}
.Q-g12 .chief,.Q-g12 .extra{width:475px}
.Q-g14 .chief {width:570px}
.Q-g16 .chief{width:640px}
.Q-g16 .main{width:380px}
.Q-g16 .sub{width:250px}
.Q-g17a .chief,.Q-g17b .chief{width:700px}
.....

23. Javascript

24. •轻量的工具集
•适合门户网站特质的
•容易扩展的
•模块化可组合的
•易操作的

25. core dom event css
array prtotype extend ...
focus tab scroll
loader

26. <script src=”focus.js”></script>
<script>
var fos = new focus();
fos.time = 5;
fos.txtColor = “#ff0000”;
fos.init();
</script>
从零散嵌入向集约管理转变
Qfast([‘koala’,‘focus’],function(){
var fos = new focus();
fos.set({time:5,txtColor:”#ff0000”}).init();
})

27. hound（猎犬）

35. koala（考拉）

37. 流程优化与团队建设

38. 产品／编辑 设计 前端

39. 产品／编辑 TAPD
设计
TAPD
前端
TAPD
TAPD
cms后台工程师
测试工程师

40. •引入公司通用的tapd需求管理系统
•引入公司通用的bugtrace系统
•引入公司通用的性能监测系统（首屏概念、实时流
量监控）
•引入公司通用的code平台（svn/codereview）
•非产品级页面走快速流程
•产品级页面必须走标准流程（需求、测试、灰度）

41. 专题页面1
专题页面2
专题页面3
跨平台
前端研究
产品A
技术平台
产品B
产品C

42. 思考

43. •体系仍旧不是很强壮（检查、自动化）
•最终目的是人的解放（工作、时间、创新）
•在有限的条件下做到最大化，并坚持使之制度化
•相信团队的智慧
•没有最好的架构，只有最合适的（动态调整）

44. Q&A?