高力：19楼现有前端架构.ppt

1、19楼前端架构浅析,红 茶,2011 / 09 / 22,关于我 About me - 红茶（高力 19lou 前端设计师） 产品设计 - 6个月 前端开发 - 18个月,博客: 折腾: ,内容概述 Content summary - 为何规范 基础架构 有待完善 FAQ,为何规范 Why standard - 话说当年 没有 前瞻 性目录架构 没有 规范 的文件命名 没有 模块 的复用 所有的原则就是 - 看心情,为何规范 Why standard - 呐，做前端呢，最重要的就是开心， 前期没有架构这种事，大家都不想的 ,为何规范 Why standard - 话说这样的环境下， 我们依旧快

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

3、CSS,City,按照产品线各自分布,杭州,宁波,城市站个性化需求准备,common.css,font Link Color ,基础架构 - common.css -,quick,.layout,.iblock,.clearall,reset,mod,common.css,font Link Color ,基础架构 - 模块化 -,mod,. page-mod,. tips-mod,. win-mod,reset,quick,基础架构 - 模块化 -,基础架构 - 模块化 -,.win-mod,.win-ft,.win-bd,基础架构 - 模块结构 -,.win-hd,.win-mod,.wi

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

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

6、-,swfupload,01.js ?v=804,02.js ?v=804,01.css ?v=804,02.css ?v=804,添加版本管理,组件管理器 开始搭建我们的JS目录架构,基础架构 - JS 目录 -,组件管理器,jQuery,基础架构 - JS 目录 -,组件管理器,jQuery,Forum (common),Home,City,基础架构 - JS 目录 -,组件管理器,jQuery,Forum (common),Home,City,Editor,SWFUpload,基础架构 - JS 目录 -,组件管理器,jQuery,

7、Core,BBcode,browser,execCommand,range,基础架构 - 编辑器 -,Plugin,smiley,media,link,组件管理器,jQuery,App,Dev 完善中,App.win,App.tab,App.drag,App.popo,App.fixed,App.punch,App.ratePK,Dev.xxx,基础架构 - JS 命名空间 -,基础架构 - 标准接口文档 - 组件需要不断的 更新增强 以满足产品需求， 这时候便需要一份 标准接口文档， 方便前端同学维护的同时， 也便于后端同学使用修改 ,基础架构 - 标准接口文档 -,调用方式,参数含义,数据结构,基础架构 - 标准文档 - 所有的规范最好形成文档 ,基础架构 - PSD归档 -,基础架构 - PSD归档 - 防止合成图片导出质量过低 防止分支合并时的图片冲突,有待完善 Promote - 页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 ,有待完善 Promote - /js/forum/App.showWin.js?v=804,有待完善 Pro