@ghostcdy
2015-12-26T10:40:00.000000Z
字数 2863
阅读 1378
SPA
React
框架
Reduck
在这互联网的站场,前端用什么武器最具有战斗力呢?我们如何高效的完成需求?如何保证业务可用?
我只想说:没有最好,只有更好。兵器趁手就行,框架顺手就行。
现框架Abstract基于最初业务原型抽象出来,专门用于开发游戏公会体系下的需求。它可以说是面向流程的开始。开发业务时,仅需要关注渲染过程,对应时期做对应事情。开发效率非常高,代码也比较清晰。
But,业务发展迅速,变的复杂的多,交互和逻辑都变的复杂了。使用原框架开发出来的代码模块调用逻辑复杂,一个渲染过程中需要做很多事情,方法体变得庞大,不便于维护。基于流程开发的框架适合当时的业务,却受到了扩展性的挑战。
前端框架层出不穷,我们该如何选择?在旧的框架上改造?重写?
从最初的JQuery、Zepto ,到后来的MV*框架AngularJS、BackboneJS等等,以及专注渲染层的React。
我们的业务以游戏玩法为主,具有强交互,产品形态多样,分权限和身份渲染等特性。
框架 | 特点 | 解决痛点 |
---|---|---|
JQuery/Zepto | 基于DOM的编程,强大的选择器和DOM操作以及Ajax等扩展 | 开发效率问题 |
AngularJS | 双向绑定数据,具有自己的一套完整的渲染流程 | |
React | 专注UI层,虚拟DOM树,高效替换DOM | 渲染问题、组件化 |
换框架是痛苦的,但收益是不错的。
I have a dream。有一个称手的框架是每一个开发团队的梦想。什么才是适合好用的框架呢?
特性 | 目标 | 解决方案 |
---|---|---|
复用性 | 跨项目复用 | 统一标准、组件化 |
扩展性 | 易于扩展、增加功能 | 标准化API、完善的生态 |
易用性 | 结构清晰、新人易上手 | 层次清晰、规范化 |
可维护 | 出现问题可以快速定位 | 分层、日志 、状态记录 |
可测试 | 可单元测试 | 组件化、低耦合、测试API |
规范:
层次规范、生命周期(每个组件和View都有自己的生命周期)、UI组件化(包含自己的事件和暴露渲染API)
层次结构:
DataModel(数据模型层)、PageModel(控制层)、ViewModel(视图层)、Dispatcher(调度器)
数据流:
单向的数据流
渲染:
页面加载 -> 框架初始化 -> 路由选择 -> 加载Page和对应模块 -> 初始化Page(index) -> 渲染页面
事件响应:
用户操作触发事件 -> 调用actions中对应方法 -> 通过调度器派发给监听了该actions的对应store处理
Page回收:
触发切换页面操作 -> 调用PageModel回收 -> 调用ViewModel回收 -> 遍历组件回收 -> 删除组件和对应DOM
SPA模式:
单页应用,具有页面路由,免去创建Webview的时间,来回切换页面更快。
QQ公会总大厅一个新的业务,按计划用上了新框架。在实践中发现框架还没有想像中那么的美,遇到了下面这些问题,使得框架不断的完善。
CGI数据不可靠,需要健壮判断
让DataModel自动处理数据健壮性判断、CGI返回驼峰化、数据默认值,业务无需关系数据健壮问题。
配置DataModel.defaultData属性后自动开启数据格式化功能。CGI返回“xxx_xxx”格式,自动驼峰化,配置中填写的值即是默认值。
不满足?
高级玩法:可以配置一个function来自行实现默认值和数据替换。
ps:感谢winchang同学提供CGI自动格式化组件
如何监听数据变化?
配置ViewModel中组件的的models,即可自动绑定Model,并且在Model数据变化时组件会收到新数据。
一个组件依赖多个DataModel如何实现?
直接配置多个models可以为组件绑定多个DataModel,任何一个DataModel数据变化了组件都会收到通知。
依赖多DataModel时,请求CGI返回数据先后到达如何渲染?
框架增加了DataModel状态,组件会收到通知,但是否满足条件才执行。
通过renderType标志来控制,默认收到的每一次DataModel更新都会渲染。
'afterData':所有数据都回来才渲染。
'isMust': 关键模块,数据错误执行错误提示逻辑。
数据层次太深,取起来太麻烦怎么办?
层次很深的对象每层都应该做健壮性判断,避免对象属性undefined取子集时报错。组件给React的props上自动挂了get方法,可以方便的快取props下任意的数据。依然有高级玩法哦,第二参数可以设置function来自行实现数据默认值处理。
var data = {
list: [{a:1},{a:2},{a:3}],
length: 3
};
//用法一:
getData('list 0 a', 0 , data);
//或者
getData(['list', 0, 'a'], 0, data);
//用法二:
data.get = getData;
data.get('list 0 a', 0);
路由如何查找?
为了兼容直出服务(服务器无法获取hash),路由使用url参数中的module。框架将会在page目录下找module对应的目录中的index.js文件,并执行其中的initialize方法自动初始化。
如何跨页数据共享?
方法一:共用一个dataModel,在内存中共享。
方法二:给需要共享的DataModel挂载sessionStorage组件,可以在本地缓存中共享。
分页数据好繁琐,框架来做
让分页更容易些吧!需要分页的CGI仅需要挂载分页组件并进行分页参数配置即可。
组件如何调用外部模块?
通过调度器广播,对应组件收到执行对应逻辑。成功解耦。
遇到问题怎么定位?
框架在开发模式下有关键点log输出,上线后可以使用url参数:debug=1来开启。
当然,还需要借助我们熟悉的问题排查工具了。
我们实现了框架,增加了很多小特性,亲切的称它Reduck
,有没有很高大上呢?但这些都还不够,我们希望它能为业务提供更多的帮助。后续,我们还将框架支持TSW渲染、支持其他的渲染模板、优化框架性能和体验。我们还在继续前行。
ps: 感谢和我一起奋战、不断采坑填坑、勇于尝试新框架的sesamewen同学,以及帅气、追求完美、不断尝鲜的导师jameszuo。