• Like
19楼前端架构浅析
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

19楼前端架构浅析

  • 2,113 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • cool
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,113
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
40
Comments
1
Likes
6

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楼前端架构浅析
    红 茶
    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!