单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2011/9/23,#,19,楼前端架构浅析,红 茶,2011/09/22,关于我,About me,-,红茶,（高力,19lou,前端设计师）,产品设计,-6,个月,前端开发,-18,个月,博客,:,http:/,折腾,:,http:/,内容概述,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,.,page-mod,.,tips-mod,.,win-mod,reset,quick,基础架构,-,模块化,-,基础架构,-,模块化,-,.win-mod,.win-ft,.win-bd,基础架构,-,模块结构,-,.win-hd,.win-mod,.win-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,基础架构,-,组件管理,-,JS,组件的管理需要规范,那么就需要有一个,组件管理器,用来实现,文件异步加载,与,依赖关系管理,基础架构,-,组件管理,-,豆瓣,Do,-,轻量级开发框架,http:/