Your SlideShare is downloading. ×
0
19楼前端架构浅析<br />红  茶<br />2011 / 09 / 22<br />
关于我  About me<br />-------------------------------------------------<br />红茶(高力 @ 19lou 前端设计师)<br />产品设计- 6个月<br />前端开发 - ...
内容概述  Content summary<br />-------------------------------------------------<br />为何规范<br />基础架构<br />有待完善<br />FAQ<br />
为何规范  Why standard<br />-------------------------------------------------<br />话说当年 …<br />没有 前瞻性目录架构…<br />没有 规范 的文件命名…<b...
为何规范  Why standard<br />-------------------------------------------------<br />呐,做前端呢,最重要的就是开心,<br />前期没有架构这种事,大家都不想的 …<br />
为何规范  Why standard<br />-------------------------------------------------<br />话说这样的环境下,<br />我们依旧快速的迭代开发,原因有二:<br />没有很多城...
为何规范  Why standard<br />-------------------------------------------------<br />当需要 10位 攻城师协同合作,<br />同时维护杭州站与另外的 30个城市站时,<...
为何规范  Why standard<br />-------------------------------------------------<br />代码沉余过多且无法复用<br />命名、编码风格各不相同<br />无法应对疯涨的产品...
基础架构  - 宏观目录<br />-------------------------------------------------<br />除了存放CSS文件外,<br />还存放CSS直接引用的 img 文件 …<br />CSS<br...
基础架构  - CSS目录<br />-------------------------------------------------<br />Forum<br />Home<br />按照产品线各自分布<br />CSS<br />…<b...
基础架构  - common.css<br />-------------------------------------------------<br />common.css<br />font<br />Link<br />Color<b...
基础架构  - 模块化<br />-------------------------------------------------<br />common.css<br />font<br />Link<br />Color<br />…<b...
基础架构  - 模块化<br />-------------------------------------------------<br />
基础架构  - 模块化<br />-------------------------------------------------<br />
基础架构  - 模块结构<br />-------------------------------------------------<br />     .win-mod<br />.win-hd<br />.win-bd<br />.win...
基础架构  - 模块嵌套<br />-------------------------------------------------<br />     .win-mod<br />.win-hd<br />          .win-bd...
基础架构  - 模块个性化<br />-------------------------------------------------<br />设计师永远是感性的,<br />需要预留足够的空间… 加个ID ?<br />
基础架构  - 换肤模式<br />-------------------------------------------------<br />images<br />Default<br />Style.css<br />Gray<br /...
基础架构  - 换肤模式<br />-------------------------------------------------<br />
基础架构  - 换肤模式<br />-------------------------------------------------<br />Style.css<br />   color<br />other<br />    link<...
基础架构  - 组件管理<br />-------------------------------------------------<br />JS组件的管理需要规范<br />那么就需要有一个 组件管理器 用来实现<br />文件异步加载 ...
基础架构  - 组件管理<br />-------------------------------------------------<br />豆瓣Do -轻量级开发框架<br />http://kejun.github.com/Do/<br...
基础架构  - 组件管理<br />-------------------------------------------------<br />两点小修改,使其更符合实际应用:<br />组件调用要足够 智能便捷<br />快速迭代需避免 顽...
基础架构  - 组件管理<br />-------------------------------------------------<br />组件配置<br /> 版本号<br /> 版本号<br />管理器<br />jQuery<br />
基础架构  - 组件管理<br />-------------------------------------------------<br />file:  "/swfupload/"<br />01.js<br />01.css<br />...
基础架构  - 组件管理<br />-------------------------------------------------<br />01.js ?v=0.5.4.0804<br />02.js ?v=0.5.4.0804<br /...
基础架构  - JS 目录<br />-------------------------------------------------<br />组件管理器<br />开始搭建我们的JS目录架构…<br />
基础架构  - JS 目录<br />-------------------------------------------------<br />组件管理器<br />jQuery<br />
基础架构  - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />Ci...
基础架构  - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />Ci...
基础架构  - 编辑器<br />-------------------------------------------------<br />组件管理器<br />Core<br />BBcode<br />Plugin<br />brows...
基础架构  - JS 命名空间<br />-------------------------------------------------<br />组件管理器<br />      App<br />Dev<br />完善中…<br />A...
基础架构 - 标准接口文档<br />-------------------------------------------------<br />组件需要不断的 更新增强 以满足产品需求,<br />这时候便需要一份 标准接口文档,<br /...
基础架构 - 标准接口文档<br />-------------------------------------------------<br />调用方式<br />参数含义<br />数据结构<br />
基础架构 - 标准文档<br />-------------------------------------------------<br />所有的规范最好形成文档…<br />
基础架构 - PSD归档<br />-------------------------------------------------<br />
基础架构 - PSD归档<br />-------------------------------------------------<br />防止合成图片导出质量过低<br />防止分支合并时的图片冲突<br />
有待完善  Promote<br />-------------------------------------------------<br />页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …<br />
有待完善  Promote<br />-------------------------------------------------<br />http://www.19lou.com/js/forum/jquery.js?v=0.5.4....
有待完善  Promote<br />-------------------------------------------------<br />升级 jQuery 版本 , 关注代码 执行效率(选择器、事件绑定 …)<br />
有待完善  Promote<br />-------------------------------------------------<br />可用性<br />渐进增强<br />前后端分离<br />…<br />
最后引用玉伯老师的一句话:<br />架构无所谓好坏,重要的是合不合适!<br />
FAQ & Thanks!<br />
Upcoming SlideShare
Loading in...5
×

高力:19楼现有前端架构

13,887

Published on

1 Comment
13 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
13,887
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
146
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

Transcript of "高力: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 />没有 规范 的文件命名…<br />没有 模块的复用…<br />所有的原则就是 - 看心情<br />
  5. 5. 为何规范 Why standard<br />-------------------------------------------------<br />呐,做前端呢,最重要的就是开心,<br />前期没有架构这种事,大家都不想的 …<br />
  6. 6. 为何规范 Why standard<br />-------------------------------------------------<br />话说这样的环境下,<br />我们依旧快速的迭代开发,原因有二:<br />没有很多城市站<br />没有很多产品经理<br />
  7. 7. 为何规范 Why standard<br />-------------------------------------------------<br />当需要 10位 攻城师协同合作,<br />同时维护杭州站与另外的 30个城市站时,<br />这种老方式就开始 hold 不住 了…<br />
  8. 8. 为何规范 Why standard<br />-------------------------------------------------<br />代码沉余过多且无法复用<br />命名、编码风格各不相同<br />无法应对疯涨的产品线与快速迭代…<br />是时候整整规范了 …<br />
  9. 9. 基础架构 - 宏观目录<br />-------------------------------------------------<br />除了存放CSS文件外,<br />还存放CSS直接引用的 img 文件 …<br />CSS<br />JS<br />19lou<br />存放各产品线通用图片,例如:<br />表情图片,等级图标,帖子类型图标 …<br />Img<br />
  10. 10. 基础架构 - CSS目录<br />-------------------------------------------------<br />Forum<br />Home<br />按照产品线各自分布<br />CSS<br />…<br />杭州<br />City<br />城市站个性化需求准备<br />宁波<br />…<br />
  11. 11. 基础架构 - 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 />
  12. 12. 基础架构 - 模块化<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 />
  13. 13. 基础架构 - 模块化<br />-------------------------------------------------<br />
  14. 14. 基础架构 - 模块化<br />-------------------------------------------------<br />
  15. 15. 基础架构 - 模块结构<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br />.win-bd<br />.win-ft<br />
  16. 16. 基础架构 - 模块嵌套<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br /> .win-bd<br />. form-mod<br />.page-mod<br />…<br />.win-ft<br />
  17. 17. 基础架构 - 模块个性化<br />-------------------------------------------------<br />设计师永远是感性的,<br />需要预留足够的空间… 加个ID ?<br />
  18. 18. 基础架构 - 换肤模式<br />-------------------------------------------------<br />images<br />Default<br />Style.css<br />Gray<br />Home<br />images<br />替换换肤所需图片<br />Pink<br />Style.css<br />只替换文字、边框、背景颜色<br />
  19. 19. 基础架构 - 换肤模式<br />-------------------------------------------------<br />
  20. 20. 基础架构 - 换肤模式<br />-------------------------------------------------<br />Style.css<br /> color<br />other<br /> link<br />.color1<br />.link1<br />.color2<br />.link2<br />.color3<br />.link3<br />…<br />…<br />
  21. 21. 基础架构 - 组件管理<br />-------------------------------------------------<br />JS组件的管理需要规范<br />那么就需要有一个 组件管理器 用来实现<br />文件异步加载 与 依赖关系管理<br />
  22. 22. 基础架构 - 组件管理<br />-------------------------------------------------<br />豆瓣Do -轻量级开发框架<br />http://kejun.github.com/Do/<br />现在有更多的选择:sea.js 、In.js<br />
  23. 23. 基础架构 - 组件管理<br />-------------------------------------------------<br />两点小修改,使其更符合实际应用:<br />组件调用要足够 智能便捷<br />快速迭代需避免 顽固缓存<br />
  24. 24. 基础架构 - 组件管理<br />-------------------------------------------------<br />组件配置<br /> 版本号<br /> 版本号<br />管理器<br />jQuery<br />
  25. 25. 基础架构 - 组件管理<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 />
  26. 26. 基础架构 - 组件管理<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 />
  27. 27. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />开始搭建我们的JS目录架构…<br />
  28. 28. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />jQuery<br />
  29. 29. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />jQuery<br />
  30. 30. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />Editor<br />SWFUpload<br />…<br />jQuery<br />
  31. 31. 基础架构 - 编辑器<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 />
  32. 32. 基础架构 - 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 />
  33. 33. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />组件需要不断的 更新增强 以满足产品需求,<br />这时候便需要一份 标准接口文档,<br />方便前端同学维护的同时,<br />也便于后端同学使用修改 …<br />
  34. 34. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />调用方式<br />参数含义<br />数据结构<br />
  35. 35. 基础架构 - 标准文档<br />-------------------------------------------------<br />所有的规范最好形成文档…<br />
  36. 36. 基础架构 - PSD归档<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. FAQ & Thanks!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×