新浪博客前端架构
新浪博客 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 () {
al...
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...
流程开发
模式调试
上 模式线
模式开发
未压缩合并的代码
支持调试工具
合并压缩的代码
线上文件名为页面 id.js
序开发顺
1. 从 SVN 中取出代码
不同的产品在不同的 svn 目录(博客、相册、个人中心、
活动站)
2. 始本地 和开 开发 调试
1) XAMPP 搭建本地开发环境
2) ftp 到专门的开发机
3. 提交到 SVN
合并代码
解决因多人开发造成的代码冲突
4. 打包测试
5. 上线
专门的打包工具(合并、压缩、生成页面 id.js )
打包的 shell 命令: sh –p 产品名 – t svnTag 地址 – o
在 svn 中生...
流程开发 图
架 例构实
SinaDialog UML
Q & A
 百度前端技术交流会-新浪博客前端架构分享
 百度前端技术交流会-新浪博客前端架构分享
Upcoming SlideShare
Loading in …5
×

百度前端技术交流会-新浪博客前端架构分享

2,227 views

Published on

百度前端技术交流会--新浪博客前端架构分享

Published in: Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,227
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
40
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

百度前端技术交流会-新浪博客前端架构分享

  1. 1. 新浪博客前端架构 新浪博客 RIA 开发团队 皓杨 Blog : http://blog.sina.com.cn/randomail Email : Random.Hao.Yang@gmail.com 2010 年 10 月 30 日
  2. 2. 代码框架 代 的加 与 行码 载 执 流程开发 架 例构实
  3. 3. 代 框架码
  4. 4. sina 包sina 包 lib 包lib 包 productproduct Javascript 框架概览 基础库 通用组件 产品需求
  5. 5. sina 包结构
  6. 6. 是基 ,最底 的代础库 层 码 上 提供服为 层 务 不涉及 品需求产 sina 包 功能 粒度小颗 隔离了细节,提供抽象的接口
  7. 7. lib 包结构
  8. 8. lib 包 提供通用的可 用功能复 组件 交互效果 各 品之 的公共功能产 间 托盘 登录 suggest 一般的配置信息
  9. 9. product 博客 相册 个人中心 活 站动
  10. 10. product 各 品代 独立产 码 方便管理、维护、扩展 通过打包发布 用调 lib 和 sina 包的模块 品需求针对产 编码 以 Job 的形式注册代码 通过不同的页面 id 加载代 码
  11. 11. 代 的加 与 行码 载 执
  12. 12. Job1Job1 Pageid 页 面 1 页 面 2 页 面 3 Job2Job2 Job3Job3 Job4Job4 Job5Job5 Job6Job6 Pageid Pageid 代 按码 Job 加载
  13. 13. Job Job 通过 pageid 组织 一个大的功能可拆分成多个 Job 可把复杂的问题相对简单化 一个 Job 可以被多个 面使用页 相同的功能可复用
  14. 14. 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~”); }
  15. 15. pageid 引 代导页 码 function main () { var job = new Jobs(); job.add("jobTest"); job.add("jobTestToo"); job.start(); }
  16. 16. Boot.js <script type="text/javascript” src="http://host/boot.js"> </script> 面 点装 完成后 行入口页 节 载 执 function __addDOMLoadEvent(main);
  17. 17. 流程开发
  18. 18. 模式调试 上 模式线 模式开发 未压缩合并的代码 支持调试工具 合并压缩的代码 线上文件名为页面 id.js
  19. 19. 序开发顺 1. 从 SVN 中取出代码 不同的产品在不同的 svn 目录(博客、相册、个人中心、 活动站) 2. 始本地 和开 开发 调试 1) XAMPP 搭建本地开发环境 2) ftp 到专门的开发机
  20. 20. 3. 提交到 SVN 合并代码 解决因多人开发造成的代码冲突 4. 打包测试 5. 上线 专门的打包工具(合并、压缩、生成页面 id.js ) 打包的 shell 命令: sh –p 产品名 – t svnTag 地址 – o 在 svn 中生成一个新的上线 tag 专门的上线系统上线 序开发顺
  21. 21. 流程开发 图
  22. 22. 架 例构实
  23. 23. SinaDialog UML
  24. 24. Q & A

×