19楼前端架构浅析

2,476 views

Published on

1 Comment
7 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,476
On SlideShare
0
From Embeds
0
Number of Embeds
816
Actions
Shares
0
Downloads
47
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

19楼前端架构浅析

  1. 1. 19楼前端架构浅析<br />红 茶<br />2011 / 09 / 22<br />
  2. 2. 关于我 About me<br />-------------------------------------------------<br />红茶(高力 @ 19lou 前端设计师)<br />产品设计- 6个月<br />前端开发 - 18个月<br />博客:http://cssbox.net<br />折腾:http://gaoli.github.com<br />
  3. 3. 内容概述 Content summary<br />-------------------------------------------------<br />为何规范<br />基础架构<br />有待完善<br />FAQ<br />
  4. 4. 为何规范 Why standard<br />-------------------------------------------------<br />呐,做前端呢,最重要的就是开心,<br />没有前端架构这种事,大家都不想的 …<br />
  5. 5. 为何规范 Why standard<br />-------------------------------------------------<br />话说那时… <br />没有规范的 目录结构 与 文件命名 …<br />更没有所谓 模块复用 … 各种没有 …<br />
  6. 6. 为何规范 Why standard<br />-------------------------------------------------<br />依旧快速迭代开发,原因有两点:<br />产品经理稀缺 (产品线单一 )<br />页面交互简单 (AJAX 还只限于后端使用)<br />
  7. 7. 为何规范 Why standard<br />-------------------------------------------------<br />当产品经理与产品线开始疯涨,<br />设计师开始要求AJAX局部刷新,<br />后端工程师申明只提供数据,<br />其奔放前卫的思想已超出 hold范围 …<br />
  8. 8. 为何规范 Why standard<br />-------------------------------------------------<br />我们做了一项艰难的决定,<br />满足他们吧 …<br />
  9. 9. 为何规范 Why standard<br />-------------------------------------------------<br />代码沉余过多且无法复用<br />命名、编码风格各不相同<br />无法应对疯涨的产品线与快速迭代…<br />是时候整整规范提高效率 …<br />
  10. 10. 基础架构 - 宏观目录<br />-------------------------------------------------<br />除了存放CSS文件外,<br />还存放CSS直接引用的 img 文件 …<br />CSS<br />JS<br />19lou<br />存放各产品线通用图片,例如:<br />表情图片,等级图标,帖子类型图标 …<br />Img<br />
  11. 11. 基础架构 - CSS目录<br />-------------------------------------------------<br />Forum<br />Home<br />按照产品线各自分布<br />CSS<br />…<br />杭州<br />City<br />城市站个性化需求准备<br />宁波<br />…<br />
  12. 12. 基础架构 - common.css<br />-------------------------------------------------<br />common.css<br />font<br />Link<br />Color<br />…<br /> quick<br />reset<br />mod<br />.layout<br />.iblock<br />.clearall<br />…<br />
  13. 13. 基础架构 - 模块化<br />-------------------------------------------------<br />common.css<br />font<br />Link<br />Color<br />…<br /> mod<br />reset<br />quick<br />. page-mod<br />. tips-mod<br />. win-mod<br />…<br />
  14. 14. 基础架构 - 模块化<br />-------------------------------------------------<br />
  15. 15. 基础架构 - 模块化<br />-------------------------------------------------<br />
  16. 16. 基础架构 - 模块结构<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br />.win-bd<br />.win-ft<br />
  17. 17. 基础架构 - 模块嵌套<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br /> .win-bd<br />. form-mod<br />.page-mod<br />…<br />.win-ft<br />
  18. 18. 基础架构 - 模块个性化<br />-------------------------------------------------<br />设计师永远是感性的,<br />需要预留足够的空间… 加个ID ?<br />
  19. 19. 基础架构 - 换肤模式<br />-------------------------------------------------<br />
  20. 20. 基础架构 - 换肤模式<br />-------------------------------------------------<br />images<br />Default<br />Style.css<br />Gray<br />Home<br />images<br />替换换肤所需图片<br />Pink<br />Style.css<br />只替换文字、边框、背景颜色<br />
  21. 21. 基础架构 - 换肤模式<br />-------------------------------------------------<br />Pink / Style.css<br /> color<br />other<br /> link<br />.color1<br />.link1<br />.color2<br />.link2<br />.color3<br />.link3<br />…<br />…<br />
  22. 22. 基础架构 - 组件管理<br />-------------------------------------------------<br />JS组件的管理需要规范<br />那么就需要有一个 组件管理器 用来实现<br />文件异步加载 与 依赖关系管理<br />
  23. 23. 基础架构 - 组件管理<br />-------------------------------------------------<br />豆瓣Do -轻量级开发框架<br />http://kejun.github.com/Do/<br />现在有更多的选择:sea.js 、In.js<br />
  24. 24. 基础架构 - 组件管理<br />-------------------------------------------------<br />两点小修改,使其更符合实际应用:<br />组件调用要足够 智能便捷<br />快速迭代需避免 顽固缓存<br />
  25. 25. 基础架构 - 组件管理<br />-------------------------------------------------<br />组件配置<br /> 版本号<br /> 版本号<br />管理器<br />jQuery<br />
  26. 26. 基础架构 - 组件管理<br />-------------------------------------------------<br />file: "/swfupload/"<br />01.js<br />01.css<br />02.js<br />02.css<br />组件配置<br />swfupload<br />showWin<br />tab<br />…<br />
  27. 27. 基础架构 - 组件管理<br />-------------------------------------------------<br />01.js ?v=0.5.4.0804<br />02.js ?v=0.5.4.0804<br />添加版本管理<br />swfupload<br />01.css ?v=0.5.4.0804<br />02.css ?v=0.5.4.0804<br />
  28. 28. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />开始搭建我们的JS目录架构…<br />
  29. 29. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />jQuery<br />
  30. 30. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />jQuery<br />
  31. 31. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />Editor<br />SWFUpload<br />…<br />jQuery<br />
  32. 32. 基础架构 - 编辑器<br />-------------------------------------------------<br />组件管理器<br />Core<br />BBcode<br />Plugin<br />browser<br />smiley<br />execCommand<br />media<br />range<br />link<br />…<br />…<br />jQuery<br />
  33. 33. 基础架构 - JS 命名空间<br />-------------------------------------------------<br />组件管理器<br /> App<br />Dev<br />完善中…<br />App.win<br />App.fixed<br />Dev.xxx<br />App.tab<br />App.punch<br />App.drag<br />App.ratePK<br />App.popo<br />…<br />jQuery<br />
  34. 34. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />组件需要不断的 更新增强 以满足产品需求,<br />这时候便需要一份 标准接口文档,<br />方便前端同学维护的同时,<br />也便于后端同学使用修改 …<br />
  35. 35. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />调用方式<br />参数含义<br />数据结构<br />
  36. 36. 基础架构 - 标准文档<br />-------------------------------------------------<br />所有的规范最好形成文档…<br />
  37. 37. 基础架构 - PSD归档<br />-------------------------------------------------<br />防止合成图片导出质量过低<br />防止分支合并时的图片冲突<br />
  38. 38. 有待完善 Promote<br />-------------------------------------------------<br />页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …<br />
  39. 39. 有待完善 Promote<br />-------------------------------------------------<br />http://www.19lou.com/js/forum/jquery.js?v=0.5.4.0804<br />http://www.19lou.com/js/forum/App.showWin.js?v=0.5.4.0804<br />http://www.19lou.com/??/js/forum/jquery.js, /js/forum/App.showWin.js?v=0.5.4.0804<br />
  40. 40. 有待完善 Promote<br />-------------------------------------------------<br />升级 jQuery 版本 , 关注代码 执行效率(选择器、事件绑定 …)<br />
  41. 41. 有待完善 Promote<br />-------------------------------------------------<br />可用性<br />渐进增强<br />前后端分离<br />…<br />
  42. 42. 引用玉伯老师的一句话:<br />架构无所谓好坏,重要的是合不合适!<br />
  43. 43. 更加实用简便的换肤方案?<br />基础类库(jQuery)或组件升级时应该注意些什么 ?<br />
  44. 44. FAQ & Thanks!<br />

×