9step源码浅析
shellzhang
2014-12-21
内容概要
- 背景介绍
- 基本协作模式
- 相关数据结构与类结构
- 亮点与不足
背景介绍
- 什么是9step——九步之遥
-
源码
- http://evt.dianping.com/market/20141216/js/9step.compress.js
- 去除头部jq+sizzleJS,余下约2000行左右代码
基本协作模式
- 加载舞台相关xml——stage.xml
- 加载各种资源(图片、音频文件)——asset
- 初始化视图与子视图
- 初始化视图中的事件与监听函数
- 启动渲染循环
- 用户交互,改变视图状态
- 渲染循环触发,擦除重绘,并返回5
相关数据结构与类结构(一)
-
System
- 判定系统特性(isMobile, supportCanvas, etc.)
-
RunLoop
- 渲染循环
- 基于requestAnimationFrame触发渲染方法
-
RenderEngine
- 初始化canvas对象
- 基于视图类型,调用对应渲染方法
-
NotiCenter
- 消息订阅与发布
相关数据结构与类结构(二)
- Vec2、Mat4、Rect——辅助类
- 矢量、矩阵、矩形的一些操作集合
- canvas上绘制的形状,无法自行响应用户的交互(点击、拖拽等)
- 需要根据用户点击的位置,是否在形状所在矩形区域内,进而触发绑定的方法
相关数据结构与类结构(三)
- AssetItem
- 各类资源——图片、文本、json、xml、声音
- imageLoader()
- textLoader()
- jsonLoader()
- xmlLoader()
- soundLoader()
- AssetLoader
- 资源加载器
相关数据结构与类结构(四)
- View——所有可见视图的基类
- 基本形状
- Shape
- Motion——动画
- ViewContainer——View的容器,可以包含各种View
- Page
- 继承自ViewContainer
- 子类包括
- NormalPage
- Index
- Question
- Result
- Stage
- Steps9
- NormalPage
相关数据结构与类结构(五)
- PopupView
- 各种模态窗口:答案提示、分享到朋友圈
- ProgressBar
- 初始进度加载条
- Button
- 按钮的交互效果
亮点与不足
- 市面上有不少H5页面制作平台
- 9step的亮点
- 完全canvas,DIAO!
- xml可配置
- 9step的不足
- 图片帧实现动画,预加载大量图片,网络开销与延迟
- 一些动画效果实现相比css3复杂
- 基于requestAnimationFrame,比css3有性能损耗
- xml的文件生成?
- 值得借鉴的地方
- 整个渲染框架的设计
Thanks!
9step源码浅析
By shellzhang
9step源码浅析
九步之遥源码结构分析
- 960