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

后记

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

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

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