[互联网]高力：19楼现有前端架构.pptVIP

19楼前端架构浅析 红 茶 2011 / 09 / 22 关于我 About me 红茶（高力 @ 19lou 前端设计师） 产品设计 - 6个月 前端开发 - 18个月 博客: 折腾: 内容概述 Content summary 为何规范 基础架构 有待完善 FAQ 为何规范 Why standard 话说当年 … 没有 前瞻 性目录架构… 没有 规范 的文件命名… 没有 模块 的复用… 所有的原则就是 - 看心情 为何规范 Why standard 呐，做前端呢，最重要的就是开心， 前期没有架构这种事，大家都不想的 … 为何规范 Why standard 话说这样的环境下， 我们依旧快速的迭代开发，原因有二： 没有很多城市站 没有很多产品经理 为何规范 Why standard 当需要 10位 攻城师协同合作， 同时维护杭州站与另外的 30个 城市站时， 这种老方式就开始 hold 不住 了… 为何规范 Why standard 代码沉余过多且无法复用 命名、编码风格各不相同 无法应对疯涨的产品线与快速迭代… 是时候整整规范了 … 基础架构 - 宏观目录 CSS JS Img 19lou 存放各产品线通用图片，例如： 表情图片，等级图标，帖子类型图标 … 除了存放CSS文件外， 还存放CSS直接引用的 img 文件 … 基础架构 - CSS目录 Forum Home … CSS City 按照产品线各自分布 杭州 宁波 … 城市站个性化需求准备 common.css font Link Color … 基础架构 - common.css quick .layout … .iblock .clearall reset mod common.css font Link Color … 基础架构 - 模块化 mod . mod … . tips-mod . win-mod reset quick 基础架构 - 模块化 基础架构 - 模块化 .win-mod .win-ft .win-bd 基础架构 - 模块结构 .win-hd .win-mod .win-ft .win-bd 基础架构 - 模块嵌套 .win-hd … . 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 … 基础架构 - 组件管理 JS组件的管理需要规范 那么就需要有一个 组件管理器 用来实现 文件异步加载 与 依赖关系管理 基础架构 - 组件管理 豆瓣Do - 轻量级开发框架 /Do/ 现在有更多的选择：sea.js 、In.js 基础架构 - 组件管理 两点小修改，使其更符合实际应用： 组件调用要足够 智能便捷 快速迭代需避免 顽固缓存 基础架构 - 组件管理 管理器 组件配置 jQuery 版本号 版本号 基础架构 - 组件管理 组件配置 swfupload showWin tab … file: /swfupload/ 01.js 02.js 01.css 02.css 基础架构 - 组件管理 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 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.x