杨皓 新浪博客前端架构分享
-
Upload
isnull -
Category
Technology
-
view
2.067 -
download
1
Transcript of 杨皓 新浪博客前端架构分享
新浪博客前端架构
新浪博客RIA开发团队
杨皓
Blog:
http://blog.sina.com.cn/randomail
Email :
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,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