运维开发前端转型之道——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