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

高力:19楼现有前端架构

on

  • 13,974 views

 

Statistics

Views

Total Views
13,974
Views on SlideShare
2,905
Embed Views
11,069

Actions

Likes
13
Downloads
144
Comments
1

7 Embeds 11,069

http://www.d2forum.org 10949
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • cool
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    高力:19楼现有前端架构 高力:19楼现有前端架构 Presentation Transcript

    • 19楼前端架构浅析
      红 茶
      2011 / 09 / 22
    • 关于我 About me
      -------------------------------------------------
      红茶(高力 @ 19lou 前端设计师)
      产品设计- 6个月
      前端开发 - 18个月
      博客:http://cssbox.net
      折腾:http://gaoli.github.com
    • 内容概述 Content summary
      -------------------------------------------------
      为何规范
      基础架构
      有待完善
      FAQ
    • 为何规范 Why standard
      -------------------------------------------------
      话说当年 …
      没有 前瞻性目录架构…
      没有 规范 的文件命名…
      没有 模块的复用…
      所有的原则就是 - 看心情
    • 为何规范 Why standard
      -------------------------------------------------
      呐,做前端呢,最重要的就是开心,
      前期没有架构这种事,大家都不想的 …
    • 为何规范 Why standard
      -------------------------------------------------
      话说这样的环境下,
      我们依旧快速的迭代开发,原因有二:
      没有很多城市站
      没有很多产品经理
    • 为何规范 Why standard
      -------------------------------------------------
      当需要 10位 攻城师协同合作,
      同时维护杭州站与另外的 30个城市站时,
      这种老方式就开始 hold 不住 了…
    • 为何规范 Why standard
      -------------------------------------------------
      代码沉余过多且无法复用
      命名、编码风格各不相同
      无法应对疯涨的产品线与快速迭代…
      是时候整整规范了 …
    • 基础架构 - 宏观目录
      -------------------------------------------------
      除了存放CSS文件外,
      还存放CSS直接引用的 img 文件 …
      CSS
      JS
      19lou
      存放各产品线通用图片,例如:
      表情图片,等级图标,帖子类型图标 …
      Img
    • 基础架构 - CSS目录
      -------------------------------------------------
      Forum
      Home
      按照产品线各自分布
      CSS

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

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

      quick
      reset
      mod
      .layout
      .iblock
      .clearall

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

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

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

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


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

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

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

      Editor
      SWFUpload

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


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

      jQuery
    • 基础架构 - 标准接口文档
      -------------------------------------------------
      组件需要不断的 更新增强 以满足产品需求,
      这时候便需要一份 标准接口文档,
      方便前端同学维护的同时,
      也便于后端同学使用修改 …
    • 基础架构 - 标准接口文档
      -------------------------------------------------
      调用方式
      参数含义
      数据结构
    • 基础架构 - 标准文档
      -------------------------------------------------
      所有的规范最好形成文档…
    • 基础架构 - PSD归档
      -------------------------------------------------
    • 基础架构 - PSD归档
      -------------------------------------------------
      防止合成图片导出质量过低
      防止分支合并时的图片冲突
    • 有待完善 Promote
      -------------------------------------------------
      页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …
    • 有待完善 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
    • 有待完善 Promote
      -------------------------------------------------
      升级 jQuery 版本 , 关注代码 执行效率(选择器、事件绑定 …)
    • 有待完善 Promote
      -------------------------------------------------
      可用性
      渐进增强
      前后端分离

    • 最后引用玉伯老师的一句话:
      架构无所谓好坏,重要的是合不合适!
    • FAQ & Thanks!