Your SlideShare is downloading. ×
0
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
高力:19楼现有前端架构
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

高力:19楼现有前端架构

13,875

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,875
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
145
Comments
1
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 19楼前端架构浅析<br />红 茶<br />2011 / 09 / 22<br />
  • 2. 关于我 About me<br />-------------------------------------------------<br />红茶(高力 @ 19lou 前端设计师)<br />产品设计- 6个月<br />前端开发 - 18个月<br />博客:http://cssbox.net<br />折腾:http://gaoli.github.com<br />
  • 3. 内容概述 Content summary<br />-------------------------------------------------<br />为何规范<br />基础架构<br />有待完善<br />FAQ<br />
  • 4. 为何规范 Why standard<br />-------------------------------------------------<br />话说当年 …<br />没有 前瞻性目录架构…<br />没有 规范 的文件命名…<br />没有 模块的复用…<br />所有的原则就是 - 看心情<br />
  • 5. 为何规范 Why standard<br />-------------------------------------------------<br />呐,做前端呢,最重要的就是开心,<br />前期没有架构这种事,大家都不想的 …<br />
  • 6. 为何规范 Why standard<br />-------------------------------------------------<br />话说这样的环境下,<br />我们依旧快速的迭代开发,原因有二:<br />没有很多城市站<br />没有很多产品经理<br />
  • 7. 为何规范 Why standard<br />-------------------------------------------------<br />当需要 10位 攻城师协同合作,<br />同时维护杭州站与另外的 30个城市站时,<br />这种老方式就开始 hold 不住 了…<br />
  • 8. 为何规范 Why standard<br />-------------------------------------------------<br />代码沉余过多且无法复用<br />命名、编码风格各不相同<br />无法应对疯涨的产品线与快速迭代…<br />是时候整整规范了 …<br />
  • 9. 基础架构 - 宏观目录<br />-------------------------------------------------<br />除了存放CSS文件外,<br />还存放CSS直接引用的 img 文件 …<br />CSS<br />JS<br />19lou<br />存放各产品线通用图片,例如:<br />表情图片,等级图标,帖子类型图标 …<br />Img<br />
  • 10. 基础架构 - CSS目录<br />-------------------------------------------------<br />Forum<br />Home<br />按照产品线各自分布<br />CSS<br />…<br />杭州<br />City<br />城市站个性化需求准备<br />宁波<br />…<br />
  • 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. 基础架构 - 模块化<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. 基础架构 - 模块化<br />-------------------------------------------------<br />
  • 14. 基础架构 - 模块化<br />-------------------------------------------------<br />
  • 15. 基础架构 - 模块结构<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br />.win-bd<br />.win-ft<br />
  • 16. 基础架构 - 模块嵌套<br />-------------------------------------------------<br /> .win-mod<br />.win-hd<br /> .win-bd<br />. form-mod<br />.page-mod<br />…<br />.win-ft<br />
  • 17. 基础架构 - 模块个性化<br />-------------------------------------------------<br />设计师永远是感性的,<br />需要预留足够的空间… 加个ID ?<br />
  • 18. 基础架构 - 换肤模式<br />-------------------------------------------------<br />images<br />Default<br />Style.css<br />Gray<br />Home<br />images<br />替换换肤所需图片<br />Pink<br />Style.css<br />只替换文字、边框、背景颜色<br />
  • 19. 基础架构 - 换肤模式<br />-------------------------------------------------<br />
  • 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. 基础架构 - 组件管理<br />-------------------------------------------------<br />JS组件的管理需要规范<br />那么就需要有一个 组件管理器 用来实现<br />文件异步加载 与 依赖关系管理<br />
  • 22. 基础架构 - 组件管理<br />-------------------------------------------------<br />豆瓣Do -轻量级开发框架<br />http://kejun.github.com/Do/<br />现在有更多的选择:sea.js 、In.js<br />
  • 23. 基础架构 - 组件管理<br />-------------------------------------------------<br />两点小修改,使其更符合实际应用:<br />组件调用要足够 智能便捷<br />快速迭代需避免 顽固缓存<br />
  • 24. 基础架构 - 组件管理<br />-------------------------------------------------<br />组件配置<br /> 版本号<br /> 版本号<br />管理器<br />jQuery<br />
  • 25. 基础架构 - 组件管理<br />-------------------------------------------------<br />file: &quot;/swfupload/&quot;<br />01.js<br />01.css<br />02.js<br />02.css<br />组件配置<br />swfupload<br />showWin<br />tab<br />…<br />
  • 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. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />开始搭建我们的JS目录架构…<br />
  • 28. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />jQuery<br />
  • 29. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />jQuery<br />
  • 30. 基础架构 - JS 目录<br />-------------------------------------------------<br />组件管理器<br />Forum<br />(common)<br />Home<br />City<br />…<br />Editor<br />SWFUpload<br />…<br />jQuery<br />
  • 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. 基础架构 - 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. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />组件需要不断的 更新增强 以满足产品需求,<br />这时候便需要一份 标准接口文档,<br />方便前端同学维护的同时,<br />也便于后端同学使用修改 …<br />
  • 34. 基础架构 - 标准接口文档<br />-------------------------------------------------<br />调用方式<br />参数含义<br />数据结构<br />
  • 35. 基础架构 - 标准文档<br />-------------------------------------------------<br />所有的规范最好形成文档…<br />
  • 36. 基础架构 - PSD归档<br />-------------------------------------------------<br />
  • 37. 基础架构 - PSD归档<br />-------------------------------------------------<br />防止合成图片导出质量过低<br />防止分支合并时的图片冲突<br />
  • 38. 有待完善 Promote<br />-------------------------------------------------<br />页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …<br />
  • 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. 有待完善 Promote<br />-------------------------------------------------<br />升级 jQuery 版本 , 关注代码 执行效率(选择器、事件绑定 …)<br />
  • 41. 有待完善 Promote<br />-------------------------------------------------<br />可用性<br />渐进增强<br />前后端分离<br />…<br />
  • 42. 最后引用玉伯老师的一句话:<br />架构无所谓好坏,重要的是合不合适!<br />
  • 43. FAQ &amp; Thanks!<br />

×