• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

杨皓 新浪博客前端架构分享

  • 1,980 views
Uploaded on

 

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,980
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
56
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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