高力：19楼现有前端架构
Download as PPTX, PDF13 likes1,859 views
本文分析了19楼前端架构的建设，强调了规范化的重要性和模块化结构的必要性，同时提出了组件管理及版本控制的最佳实践。通过制定标准接口文档和优化资源管理，提升了前端开发的效率与可维护性。最后，文章指出架构的优劣在于其是否适合当前的开发需求和团队协作。
高力：19楼现有前端架构
- 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 文件 …CSSJS19lou存放各产品线通用图片，例如：表情图片，等级图标，帖子类型图标 …Img
- 10. 基础架构 - CSS目录-------------------------------------------------ForumHome按照产品线各自分布CSS…杭州City城市站个性化需求准备宁波…
- 11. 基础架构 - common.css-------------------------------------------------common.cssfontLinkColor… quickresetmod.layout.iblock.clearall…
- 12. 基础架构 - 模块化-------------------------------------------------common.cssfontLinkColor… modresetquick. 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. 基础架构 - 换肤模式-------------------------------------------------imagesDefaultStyle.cssGrayHomeimages替换换肤所需图片PinkStyle.css只替换文字、边框、背景颜色
- 19. 基础架构 - 换肤模式-------------------------------------------------
- 20. 基础架构 - 换肤模式-------------------------------------------------Style.css colorother 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.js01.css02.js02.css组件配置swfuploadshowWintab…
- 26. 基础架构 - 组件管理-------------------------------------------------01.js ?v=0.5.4.080402.js ?v=0.5.4.0804添加版本管理swfupload01.css ?v=0.5.4.080402.css ?v=0.5.4.0804
- 27. 基础架构 - JS 目录-------------------------------------------------组件管理器开始搭建我们的JS目录架构…
- 28. 基础架构 - JS 目录-------------------------------------------------组件管理器jQuery
- 29. 基础架构 - JS 目录-------------------------------------------------组件管理器Forum(common)HomeCity…jQuery
- 30. 基础架构 - JS 目录-------------------------------------------------组件管理器Forum(common)HomeCity…EditorSWFUpload…jQuery
- 31. 基础架构 - 编辑器-------------------------------------------------组件管理器CoreBBcodePluginbrowsersmileyexecCommandmediarangelink……jQuery
- 32. 基础架构 - JS 命名空间-------------------------------------------------组件管理器 AppDev完善中…App.winApp.fixedDev.xxxApp.tabApp.punchApp.dragApp.ratePKApp.popo…jQuery
- 33. 基础架构 - 标准接口文档-------------------------------------------------组件需要不断的 更新增强 以满足产品需求，这时候便需要一份 标准接口文档，方便前端同学维护的同时，也便于后端同学使用修改 …
- 38. 有待完善 Promote-------------------------------------------------页面 HTTP请求数 过多, 管理器需添加 请求合并 功能 …
- 39. 有待完善 Promote-------------------------------------------------http://www.19lou.com/js/forum/jquery.js?v=0.5.4.0804http://www.19lou.com/js/forum/App.showWin.js?v=0.5.4.0804http://www.19lou.com/??/js/forum/jquery.js, /js/forum/App.showWin.js?v=0.5.4.0804
- 40. 有待完善 Promote-------------------------------------------------升级 jQuery 版本 , 关注代码 执行效率（选择器、事件绑定 …）
- 43. FAQ & Thanks!