新浪博客前端架构新浪博客 RIA开发团队

皓杨Blog ： http://blog.sina.com.cn/randomail

Email ： Random.Hao.Yang@gmail.com

2010年 10月 30日

代码框架

代 的加 与 行码 载 执

流程开发

架 例构实

代 框架码

sina包sina包

lib包lib包

productproduct

Javascript 框架概览

基础库

通用组件

产品需求

sina 包结构

是基 ，最底 的代础库 层 码

上 提供服为 层 务

不涉及 品需求产

sina 包

功能 粒度小颗

隔离了细节，提供抽象的接口

lib 包结构

lib 包

提供通用的可 用功能复组件

交互效果

各 品之 的公共功能产 间托盘

登录

suggest

一般的配置信息

product

博客

相册

个人中心

活 站动

product

各 品代 独立产 码方便管理、维护、扩展

通过打包发布

用调 lib 和 sina 包的模块

品需求针对产 编码以 Job 的形式注册代码

通过不同的页面 id 加载代码

代 的加 与 行码 载 执

Job1Job1

Pageid

页面 1

页面 2

页面 3

Job2Job2 Job3Job3 Job4Job4 Job5Job5 Job6Job6

Pageid Pageid

代 按码 Job 加载

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 main () {

var job = new Jobs();

job.add("jobTest");

job.add("jobTestToo");

job.start();

}

Boot.js

<script

type="text/javascript”

src="http://host/boot.js">

</script>

面 点装 完成后 行入口页 节 载 执 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