仔细思考过解耦性和优雅性之后,发现可以借鉴一下之前使用过的vue-lazyload的设计思路,此文章即解析一下vue-lazyload的简要设计思路。
vue-lazyload解决了什么问题?
vue-lazyload设计简析
接下来带着这个基本思路来看vue-layload的实现.
src/index.js

可以看出来通过Lazy和LazyClass得到了lazy这个对象,v-lazy指令对应的几个回调函数:bind、update、componentUpdated和unbind分别绑定的是lazy对象的add、update、lazyLoadHandler和remove方法。
src/lazy.js
可以看到lazy.js文件导出了一个方法,该方法又返回了一个Lazy类,这么写的原因是为了形成闭包来继续在Lazy类中引用Vue。下面看Lazy类的构造函数:
顺着刚刚src/index.js的思路继续往下看指令bind回调函数发生了什么:
接着看_addListenerTarget方法发生了什么:
src/lazy.js

src/lazy.js
可以看到给scrollParent监听了this.options.ListenEvents里面的所有事件,事件回调函数为lazyLoadHandler。
在前面已经说过了lazyLoadHandler的初始化:
src/lazy.js
lazyLoadHandler方法就是_lazyLoadHandler加了一个节流包装后返回的函数。
继续看_lazyLoadHandler的实现:
src/lazy.js
可以看到_lazyLoadHandler方法里是遍历了ListenerQueue数组,并且调用每个listener的checkInView,如果checkInView返回true则调用listener.load;此时其实可以猜到checkInView是在检查该listener对应的dom元素是否在可视区域内,listener.load方法是在请求真正的image。
所以梳理一下,vue-lazyload的简要设计思想可以如图所示
后记
理清整体思路,分析源码就很清晰了,切忌陷入无穷的细节中。
-------------------------------------
欢迎关注我的公众号,前端亚古兽,做前端,不止于做前端。