写在前面
笔者最近在研究状态编程的思想,不想歪打正着碰到了js实现dataMap,然后引申发现这个玩意可以做到类vue bus的效果,这里记录一下发布出来,希望对一些研究全局状态监控和数据双向绑定的同学有所帮助吧,下面具体在研究数据双向绑定的原理。
首先实现一个dataMap
分析一下,dataMap都需要什么功能,(之前有一篇文章咱们是说过es6新增对象map和set,mao和这个有点像,但map是一个二位数据 链接>>)下面列举一下:
- 增、删、改、查,这个删要可以指定key去删除。
- 既然自己搞那就搞点原生不具备的东西,方便使用提高性能。mapData具备判断是否为空、遍历(类原生高阶函数map方法)、获取键值数组、更加方便的获取mapData长度。
来看一下dataMap的结构图:
来实现一下:
1 | //先给原生数组加一个remove()方法 |
具体实现以下dataMap这个构造函数
1 | var DataMap = function(){ |
这个mapData完事,下来在说说用这个来做watcher和sender,同样的来看张流程图分析一下原理:
上代码:
1 | var eventController = (function() { |
如果你很熟悉vuebus的使用那么这个也很好理解,请看使用方法:
1 | function event(e){ |
完事,有没有get到新技能。