新浪博客前端架构分享.pdf

新浪博客前端架构 新浪博客RIA开发团队 杨皓 2010年10月30 日 代码框架 代码的加载与执行 开发流程 架构实例 代码框架 Javascript框架概览 product product 产品需求 lib包 lib包 通用组件 sina包 sina包 基础库 sina包结构 sina包 是基础库，最底层的代码 不涉及产品需求 功能颗粒度小 为上层提供服务 隔离了细节，提供抽象的接口 lib包结构 lib包 提供通用的可复用功能 组件 交互效果 各产品之间的公共功能 托盘 登录 suggest 一般的配置信息 product 博客 相册 个人中心 活动站 product 调用lib和sina包的模块 针对产品需求编码 以Job的形式注册代码 通过不同的页面id加载代码 各产品代码独立 方便管理、维护、扩展 通过打包发布 代码的加载与执行 代码按Job加载 页面 页面 页面 1 2 3 Pageid Pageid Pageid Job1 Job2 Job3 Job4 Job5 Job6 Job1 Job2 Job3 Job4 Job5 Job6 Job Job通过pageid组织 一个大的功能可拆分成多个Job 可把复杂的问题相对简单化 一个Job可以被多个页面使用 相同的功能可复用 Job代码 $registJob(“jobTest, function () { alert(“I am a job test,ha~ha~ha~”); } $registJob(“jobTestToo, function () { alert(“I am 还是 a job test,la~la~la~”); } pageid引导页代码 function