1. 19楼前端架构浅析 红 茶 2011 / 09 / 22

2. 关于我 About me ------------------------------------------------- 红茶（高力 @ 19lou 前端设计师） 产品设计- 6个月 前端开发 - 18个月 博客:http://cssbox.net 折腾:http://gaoli.github.com

3. 内容概述 Content summary ------------------------------------------------- 为何规范 基础架构 有待完善 FAQ

4. 为何规范 Why standard ------------------------------------------------- 话说当年 … 没有 前瞻性目录架构… 没有 规范 的文件命名… 没有 模块的复用… 所有的原则就是 - 看心情

5. 为何规范 Why standard ------------------------------------------------- 呐，做前端呢，最重要的就是开心， 前期没有架构这种事，大家都不想的 …

6. 为何规范 Why standard ------------------------------------------------- 话说这样的环境下， 我们依旧快速的迭代开发，原因有二： 没有很多城市站 没有很多产品经理

7. 为何规范 Why standard ------------------------------------------------- 当需要 10位 攻城师协同合作， 同时维护杭州站与另外的 30个城市站时， 这种老方式就开始 hold 不住 了…

8. 为何规范 Why standard ------------------------------------------------- 代码沉余过多且无法复用 命名、编码风格各不相同 无法应对疯涨的产品线与快速迭代… 是时候整整规范了 …

9. 基础架构 - 宏观目录 ------------------------------------------------- 除了存放CSS文件外， 还存放CSS直接引用的 img 文件 … CSS JS 19lou 存放各产品线通用图片，例如： 表情图片，等级图标，帖子类型图标 … Img

10. 基础架构 - CSS目录 ------------------------------------------------- Forum Home 按照产品线各自分布 CSS … 杭州 City 城市站个性化需求准备 宁波 …

11. 基础架构 - common.css ------------------------------------------------- common.css font Link Color … quick reset mod .layout .iblock .clearall …

12. 基础架构 - 模块化 ------------------------------------------------- common.css font Link Color … mod reset quick . page-mod . tips-mod . win-mod …

13. 基础架构 - 模块化 -------------------------------------------------

14. 基础架构 - 模块化 -------------------------------------------------

15. 基础架构 - 模块结构 ------------------------------------------------- .win-mod .win-hd .win-bd .win-ft

16. 基础架构 - 模块嵌套 ------------------------------------------------- .win-mod .win-hd .win-bd . form-mod .page-mod … .win-ft

17. 基础架构 - 模块个性化 ------------------------------------------------- 设计师永远是感性的， 需要预留足够的空间… 加个ID ?

18. 基础架构 - 换肤模式 ------------------------------------------------- images Default Style.css Gray Home images 替换换肤所需图片 Pink Style.css 只替换文字、边框、背景颜色

19. 基础架构 - 换肤模式 -------------------------------------------------

20. 基础架构 - 换肤模式 ------------------------------------------------- Style.css color other link .color1 .link1 .color2 .link2 .color3 .link3 … …

21. 基础架构 - 组件管理 ------------------------------------------------- JS组件的管理需要规范 那么就需要有一个 组件管理器 用来实现 文件异步加载 与 依赖关系管理

22. 基础架构 - 组件管理 ------------------------------------------------- 豆瓣Do -轻量级开发框架 http://kejun.github.com/Do/ 现在有更多的选择：sea.js 、In.js

23. 基础架构 - 组件管理 ------------------------------------------------- 两点小修改，使其更符合实际应用： 组件调用要足够 智能便捷 快速迭代需避免 顽固缓存

24. 基础架构 - 组件管理 ------------------------------------------------- 组件配置 版本号 版本号 管理器 jQuery

25. 基础架构 - 组件管理 ------------------------------------------------- file: "/swfupload/" 01.js 01.css 02.js 02.css 组件配置 swfupload showWin tab …

26. 基础架构 - 组件管理 ------------------------------------------------- 01.js ?v=0.5.4.0804 02.js ?v=0.5.4.0804 添加版本管理 swfupload 01.css ?v=0.5.4.0804 02.css ?v=0.5.4.0804

27. 基础架构 - JS 目录 ------------------------------------------------- 组件管理器 开始搭建我们的JS目录架构…

28. 基础架构 - JS 目录 ------------------------------------------------- 组件管理器 jQuery

29. 基础架构 - JS 目录 ------------------------------------------------- 组件管理器 Forum (common) Home City … jQuery

30. 基础架构 - JS 目录 ------------------------------------------------- 组件管理器 Forum (common) Home City … Editor SWFUpload … jQuery

31. 基础架构 - 编辑器 ------------------------------------------------- 组件管理器 Core BBcode Plugin browser smiley execCommand media range link … … jQuery

32. 基础架构 - JS 命名空间 ------------------------------------------------- 组件管理器 App Dev 完善中… App.win App.fixed Dev.xxx App.tab App.punch App.drag App.ratePK App.popo … jQuery

33. 基础架构 - 标准接口文档 ------------------------------------------------- 组件需要不断的 更新增强 以满足产品需求， 这时候便需要一份 标准接口文档， 方便前端同学维护的同时， 也便于后端同学使用修改 …

34. 基础架构 - 标准接口文档 ------------------------------------------------- 调用方式 参数含义 数据结构

35. 基础架构 - 标准文档 ------------------------------------------------- 所有的规范最好形成文档…

36. 基础架构 - PSD归档 -------------------------------------------------

37. 基础架构 - PSD归档 ------------------------------------------------- 防止合成图片导出质量过低 防止分支合并时的图片冲突

38. 有待完善 Promote ------------------------------------------------- 页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …

39. 有待完善 Promote ------------------------------------------------- http://www.19lou.com/js/forum/jquery.js?v=0.5.4.0804 http://www.19lou.com/js/forum/App.showWin.js?v=0.5.4.0804 http://www.19lou.com/??/js/forum/jquery.js, /js/forum/App.showWin.js?v=0.5.4.0804

40. 有待完善 Promote ------------------------------------------------- 升级 jQuery 版本 , 关注代码 执行效率（选择器、事件绑定 …）

41. 有待完善 Promote ------------------------------------------------- 可用性 渐进增强 前后端分离 …

42. 最后引用玉伯老师的一句话： 架构无所谓好坏，重要的是合不合适！

43. FAQ & Thanks!