阅读 1067

解析vue-lazyload的设计思想

之前业务中碰到了一个需求,这个需求如果完全硬编码在程序中的话,可以实现需求,但是复用性基本等于零,而且与业务代码混在一起,如果以后需求变好了非常不好修改。

仔细思考过解耦性和优雅性之后,发现可以借鉴一下之前使用过的vue-lazyload的设计思路,此文章即解析一下vue-lazyload的简要设计思路。

vue-lazyload解决了什么问题?

可以想象一个网页打开有成百上千的图片需要加载,页面会变得非常的卡顿,此时如果只是可视区域的图片加载,其他的图片可以暂时有一个占位loading图,等滚动它们到可视区域时再去请求真实图片并且替换就好了。很好,vue-lazyload插件就是解决此类问题的,对vue插件的写法不熟悉的可以先看一下vue插件

vue-lazyload设计简析

解析之前可以先思考一下如果自己写一个图片懒加载的工具,会如何实现呢?首先最明显的是需要一个检查图片dom元素是否在浏览器可视区域内的方法checkInView,然后需要给所有图片的滚动父元素绑定一个滚动事件的监听方法scrollHandler,所以大概的思路图为:


其实上图就已经实现了一个最最基本的图片懒加载的思路了,稍加修饰就可以写出可运行的代码。

接下来带着这个基本思路来看vue-layload的实现.

src/index.js


可以看到提供了两种指令使用方式和两种组件使用方式,我主要分析v-lazy的指令在vue2版本的实现,其他的可以自行分析,原理相通。

可以看出来通过Lazy和LazyClass得到了lazy这个对象,v-lazy指令对应的几个回调函数:bind、update、componentUpdated和unbind分别绑定的是lazy对象的add、update、lazyLoadHandler和remove方法。

接下来看lazy对象是如何生成的:

src/lazy.js


可以看到lazy.js文件导出了一个方法,该方法又返回了一个Lazy类,这么写的原因是为了形成闭包来继续在Lazy类中引用Vue。下面看Lazy类的构造函数:


可以看到构造函数里面初始化了一大堆的配置和变量,一个函数lazyLoadHandler以及setMode来判断是否使用observer来检测dom可见(IntersectionObserver

顺着刚刚src/index.js的思路继续往下看指令bind回调函数发生了什么:

src/lazy.js



可以看到对于每个添加了v-lazy指令的dom元素,都会先找到它的scrollParent元素(其实就是一直向上遍历到它overflow=auto或scroll的祖先元素);然后会生成一个newListener对象,并且把newListener加到ListenerQueue数组中;最后调用_addListenerTarget方法。

接着看_addListenerTarget方法发生了什么:

src/lazy.js


可以看到将scrollParent元素放入了TargetQueue,并且调用了_initListen方法

继续看_initListen方法:

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的简要设计思想可以如图所示


后记

理清整体思路,分析源码就很清晰了,切忌陷入无穷的细节中。

-------------------------------------

欢迎关注我的公众号,前端亚古兽,做前端,不止于做前端。



关注下面的标签,发现更多相似文章
评论