Upload
others
View
54
Download
0
Embed Size (px)
Citation preview
运维开发前端转型之道——Angularjs
⺴⽹网易互动娱乐事业群在线游戏事业部 运维开发⼯工程师 林⾹香鑫
2015-10-24
1024
繁杂的业务• 系统繁多
• 架构不同
• 重复性⾼高
• 效率第⼀一
Why Angular• MVVM
• 双向绑定
• 依赖注⼊入
• 指令
Why Angular• DOM不是第⼀一优先级
• 声明式编程
• CRUD应⽤用
• 效率
勤劳的管家 scope
⽣生命周期• 创建
• 链接
• 更新
• 销毁
双向绑定
scope是视图和控制器之间的⼀一个通道
作⽤用域树
隔离的scope的prototype指向scope构造函数 ⾮非隔离scope的prototype指向其parent scope
prototype指向实例HTML
消息机制• $on:存储在$$listeners中
• $emit:根据层级关系逐级往上传播
• $broadcast:深度优先遍历
基于scope的层级关系决定消息的传播路径和范围
万能的匠师 指令
指令• 指令是什么
指令• 指令定义
指令• 指令运⾏行
• compile • preLink • postLink
钟点⼯工 service• 依赖注⼊入
• ⽤用途:提供服务、配置服务
• 种类:provider/factory/service/value/constant
• 服务缓存:providerCache、instanceCache
靠谱的路标 ui-router• router vs ui-router
• nested-view & multi-view
模块• 可重⽤用性
• 按需引⼊入
• 定义顺序不受限制
转型之路
⺫⽬目录结构• 按职能
• 按模块
组件化• 功能性组件
• 业务性组件
按照⽇日常需求构建组件库,⼀一处开发,到处使⽤用
模块化
模块化的⺫⽬目的是可以随意组装系统
数据池化• 数据可视化
• REST & $resource
⾃自助化• 模块化的延伸
• 代码作为资源
• 声明式
部署⾃自动化
前端⽅方案
THANKS