Freemamba
前言
业务中碰到有4000个左右下拉选项的需求,使用Regular会造成页面卡顿,大部分时间都花费在this._digest()
方法上,起初想把regular的脏检查放在web worker中,但是修改源码并不是一个很好的解决方案,牵扯的东西太多。
于是,Freemamba诞生了,目前还是一个比较初级的框架,跟React很像,语法类似Regular。
实现的特性
- 渲染模式(除2.中方法外,可手动控制渲染):同步渲染 、Web Worker渲染
- 操作列表方法:插入、删除、修改、替换列表
- Regular模版语法:数据绑定、事件绑定、列表渲染
- 生命周期:config、init(类似Regular)
- WebWorker vDom: Worker中的虚拟DOM(可扩展类似React的diff最小化更新)
- MessageBus: 负责主线程和Worker的消息分发
计划拓展功能
- Worker中diff探查
- MessageBus连接池
- 自定义组件
- 多列表以及列表嵌套
- 条件渲染和computed属性
使用说明
/dist/Freemamba.js
Nej直接
Freemamba API说明
列表容器标识
在模板中的列表项容器元素的属性中添加
list-container
插入
在index前插入列表项
this;
修改
修改指定index的列表项
this;
删除
删除指定index的列表项
this;
替换
替换整个列表数组
this
手动渲染
根据当前数据模型渲染,可选择是否worker渲染,默认同步渲染
this //同步渲染this //worker渲染,传入MessageBus实例
MessageBus API说明
如果Worker中渲染没必要,可以忽略这部分
你能用到它的地方:创建一个MessageBus实例,然后传给$render方法来进行worker端的渲染。
MessageBus实例
创建MessageBus实例
var myMsgBus = myWorker; //传入Worker实例
msg.receive
MessageBus实例接收消息,返回实例
myMsgBus
msg.then
为最近接收的消息绑定回调,执行一次即销毁,一般与receive联用
myMsgBus //建议与receive联用myMsgBus //会在buffer中取到最近一次的消息,且与其绑定
msg.onSend
MessageBus向Worker发送消息的回调,回调中返回消息对象
myMsgBus; //注册MessageBus的消息发送事件
todoList例子
模版字符串
创建实例
var tpl = documentinnerHTML;var myWorker = './dist/Worker.js';var myMsgBus = myWorker; var myList = template: tpl { Object; } { var data = thisdata; datainputText = $eventtargetvalue; } { var data = thisdata; datainputText = ''; this; } { this; } { var data = thisdata inputText = datainputText array = dataarray; this; } { var data = thisdata; this; this; }; myList;