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

Like this? Share it with your network

Share
  • 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
14,241
On Slideshare
3,172
From Embeds
11,069
Number of Embeds
7

Actions

Shares
Downloads
144
Comments
1
Likes
13

Embeds 11,069

http://www.d2forum.org 10,949
http://cache.baidu.com 58
http://com.powereasy.net 50
http://www.itfeed.cn 4
http://www.chengxuyuans.com 3
http://translate.googleusercontent.com 3
http://xianguo.com 2

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
    -------------------------------------------------
    话说这样的环境下,
    我们依旧快速的迭代开发,原因有二:
    没有很多城市站
    没有很多产品经理
  • 7. 为何规范 Why standard
    -------------------------------------------------
    当需要 10位 攻城师协同合作,
    同时维护杭州站与另外的 30个城市站时,
    这种老方式就开始 hold 不住 了…
  • 8. 为何规范 Why standard
    -------------------------------------------------
    代码沉余过多且无法复用
    命名、编码风格各不相同
    无法应对疯涨的产品线与快速迭代…
    是时候整整规范了 …
  • 9. 基础架构 - 宏观目录
    -------------------------------------------------
    除了存放CSS文件外,
    还存放CSS直接引用的 img 文件 …
    CSS
    JS
    19lou
    存放各产品线通用图片,例如:
    表情图片,等级图标,帖子类型图标 …
    Img
  • 10. 基础架构 - CSS目录
    -------------------------------------------------
    Forum
    Home
    按照产品线各自分布
    CSS

    杭州
    City
    城市站个性化需求准备
    宁波

  • 11. 基础架构 - common.css
    -------------------------------------------------
    common.css
    font
    Link
    Color

    quick
    reset
    mod
    .layout
    .iblock
    .clearall

  • 12. 基础架构 - 模块化
    -------------------------------------------------
    common.css
    font
    Link
    Color

    mod
    reset
    quick
    . page-mod
    . tips-mod
    . win-mod

  • 13. 基础架构 - 模块化
    -------------------------------------------------
  • 14. 基础架构 - 模块化
    -------------------------------------------------
  • 15. 基础架构 - 模块结构
    -------------------------------------------------
    .win-mod
    .win-hd
    .win-bd
    .win-ft
  • 16. 基础架构 - 模块嵌套
    -------------------------------------------------
    .win-mod
    .win-hd
    .win-bd
    . form-mod
    .page-mod

    .win-ft
  • 17. 基础架构 - 模块个性化
    -------------------------------------------------
    设计师永远是感性的,
    需要预留足够的空间… 加个ID ?
  • 18. 基础架构 - 换肤模式
    -------------------------------------------------
    images
    Default
    Style.css
    Gray
    Home
    images
    替换换肤所需图片
    Pink
    Style.css
    只替换文字、边框、背景颜色
  • 19. 基础架构 - 换肤模式
    -------------------------------------------------
  • 20. 基础架构 - 换肤模式
    -------------------------------------------------
    Style.css
    color
    other
    link
    .color1
    .link1
    .color2
    .link2
    .color3
    .link3


  • 21. 基础架构 - 组件管理
    -------------------------------------------------
    JS组件的管理需要规范
    那么就需要有一个 组件管理器 用来实现
    文件异步加载 与 依赖关系管理
  • 22. 基础架构 - 组件管理
    -------------------------------------------------
    豆瓣Do -轻量级开发框架
    http://kejun.github.com/Do/
    现在有更多的选择:sea.js 、In.js
  • 23. 基础架构 - 组件管理
    -------------------------------------------------
    两点小修改,使其更符合实际应用:
    组件调用要足够 智能便捷
    快速迭代需避免 顽固缓存
  • 24. 基础架构 - 组件管理
    -------------------------------------------------
    组件配置
    版本号
    版本号
    管理器
    jQuery
  • 25. 基础架构 - 组件管理
    -------------------------------------------------
    file: "/swfupload/"
    01.js
    01.css
    02.js
    02.css
    组件配置
    swfupload
    showWin
    tab

  • 26. 基础架构 - 组件管理
    -------------------------------------------------
    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
  • 27. 基础架构 - JS 目录
    -------------------------------------------------
    组件管理器
    开始搭建我们的JS目录架构…
  • 28. 基础架构 - JS 目录
    -------------------------------------------------
    组件管理器
    jQuery
  • 29. 基础架构 - JS 目录
    -------------------------------------------------
    组件管理器
    Forum
    (common)
    Home
    City

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

    Editor
    SWFUpload

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


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

    jQuery
  • 33. 基础架构 - 标准接口文档
    -------------------------------------------------
    组件需要不断的 更新增强 以满足产品需求,
    这时候便需要一份 标准接口文档,
    方便前端同学维护的同时,
    也便于后端同学使用修改 …
  • 34. 基础架构 - 标准接口文档
    -------------------------------------------------
    调用方式
    参数含义
    数据结构
  • 35. 基础架构 - 标准文档
    -------------------------------------------------
    所有的规范最好形成文档…
  • 36. 基础架构 - PSD归档
    -------------------------------------------------
  • 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. FAQ & Thanks!