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 ------------------------------------------------- 依旧快速迭代开发，原因有两点： 产品经理稀缺 （产品线单一 ） 页面交互简单 （AJAX 还只限于后端使用）

7. 为何规范 Why standard ------------------------------------------------- 当产品经理与产品线开始疯涨， 设计师开始要求AJAX局部刷新， 后端工程师申明只提供数据， 其奔放前卫的思想已超出 hold范围 …

8. 为何规范 Why standard ------------------------------------------------- 我们做了一项艰难的决定， 满足他们吧 …

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27. 基础架构 - 组件管理 ------------------------------------------------- 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

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

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

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

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

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

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

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

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

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

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. 更加实用简便的换肤方案？ 基础类库（jQuery）或组件升级时应该注意些什么 ？

44. FAQ & Thanks!