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.

Like this presentation? Why not share!

Like this? Share it with your network

Share

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

on

  • 1,981 views

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

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

Statistics

Views

Total Views
1,981
Views on SlideShare
1,981
Embed Views
0

Actions

Likes
5
Downloads
32
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

百度前端技术交流会-新浪博客前端架构分享 Presentation 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.