杨皓新浪博客前端架构分享.ppt

新浪博客前端架构,新浪博客RIA开发团队 杨皓Blog：http:/：Random.Hao.Y,2010年10月30日,代码框架代码的加载与执行开发流程架构实例,代码框架,sina包,lib包,product,Javascript框架概览,基础库,通用组件,产品需求,sina包结构,是基础库，最底层的代码,为上层提供服务,不涉及产品需求,sina包,功能颗粒度小,隔离了细节，提供抽象的接口,lib包结构,lib包,提供通用的可复用功能组件交互效果,各产品之间的公共功能托盘登录suggest,一般的配置信息,product,博客,相册,个人中心,活动站,product,各产品代码独立,方便管理、维护、扩展通过打包发布,调用lib和sina包的模块,针对产品需求编码,以Job的形式注册代码通过不同的页面id加载代码,代码的加载与执行,Job1,Pageid,页面1,页面2,页面3,Job2,Job3,Job4,Job5,Job6,Pageid,Pageid,代码按Job加载,Job,Job通过pageid组织,一个大的功能可拆分成多个Job,可把复杂的问题相对简单化,一个Job可以被多个页面使用,相同的功能可复用,Job代码,$registJob(“jobTest,function()alert(“I am a job test,hahaha”);,$registJob(“jobTestToo,function()alert(“I am 还是 a job test,lalala”);,pageid引导页代码,function main()var job=new Jobs();job.add(jobTest);job.add(jobTestToo);job.start();,Boot.js,页面节点装载完成后执行入口function,_addDOMLoadEvent(main);,开发流程,调试模式,上线模式,开发模式,未压缩合并的代码,支持调试工具,合并压缩的代码,线上文件名为页面id.js,开发顺序,1.从SVN中取出代码,不同的产品在不同的svn目录（博客、相册、个人中心、活动站）,2.开始本地开发和调试,1)XAMPP搭建本地开发环境,2)ftp到专门的开发机,3.提交到SVN,合并代码解决因多人开发造成的代码冲突,4.打包测试,5.上线,专门的打包工具（合并、压缩、生成页面id.js）打包的shell命令：sh p 产品名 t svnTag地址 o在svn中生成一个新的上线tag,专门的上线系统上线,开发顺序,开发流程图,架构实例,SinaDialog UML,Q&A,