狠狠撸

新浪博客前端架构
新浪博客 RIA 开发团队
皓杨
Blog ：
http://blog.sina.com.cn/randomail
Email ：
Random.Hao.Yang@gmail.com
2010 年 10 月 30 日

代码框架
代的加与行码载执
流程开发
架例构实

sina 包sina 包
lib 包lib 包
productproduct
Javascript 框架概览
基础库
通用组件
产物需求

是基，最底的代础库层码
上提供服为层务
不涉及品需求产
sina 包
功能粒度小颗
隔离了细节，提供抽象的接口

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=/slideshow/baidu-web-frontendconference2010sinablogarchitecture/5701955/"http:/host/boot.js">
</script>
面点装完成后行入口页节载执 function
__addDOMLoadEvent(main);

[Baidu web frontend_conference_2010]_[sina_blog_architecture]

模式调试
上模式线
模式开发
未压缩合并的代码
支持调试工具
合并压缩的代码
线上文件名为页面 id.js

序开发顺
1. 从 SVN 中取出代码
不同的产物在不同的 svn 目录（博客、相册、个人中心、
活动站）
2. 始本地和开开发调试
1) XAMPP 搭建本地开发环境
2) ftp 到专门的开发机

3. 提交到 SVN
合并代码
解决因多人开发造成的代码冲突
4. 打包测试
5. 上线
专门的打包工具（合并、压缩、生成页面 id.js ）
打包的 shell 命令： sh –p 产物名 – t svnTag 地址 – o
在 svn 中生成一个新的上线 tag
专门的上线系统上线
序开发顺

狠狠撸

[Baidu web frontend_conference_2010]_[sina_blog_architecture]

More Related Content

[Baidu web frontend_conference_2010]_[sina_blog_architecture]