Before the business encountered a requirement, this requirement if fully hard-coded in the program, the requirements can be implemented, but the reusability is basically zero, and mixed with the business code, if the requirements become better in the future is very difficult to modify.

After carefully thinking about decoupling and elegance, I found that I can learn from the vue-Lazyload design idea I used before. This article is to analyze the vue-Lazyload design idea briefly.

What problem does Vue-Lazyload solve?

Imagine a web page with hundreds or thousands of images that need to be loaded, and the page will become very sluggish. At this time, if only the images in the visual area are loaded, the other images can have a placeholder loading diagram temporarily, and then request the real images and replace them when scrolling to the visual area. The vue- Lazyload plugin is designed to solve this problem. If you are not familiar with the vue plugin, you can take a look
Vue plug-in


Vue-lazyload design analysis

Before parsing, you can think about how to achieve if you write a tool that loads images lazily. The first and most obvious thing is a checkInView method to check whether the image DOM element is in the browser’s viewable area. Then you need to bind a scrollHandler method to all the scrolling parent elements of the image.




In fact, the image above has implemented a very basic image lazy loading idea, a few modifications to write working code.

Let’s look at the vue-Layload implementation with this basic idea in mind.

src/index.js



It can be seen that there are two ways to use instructions and two ways to use components. I mainly analyze the implementation of the V-lazy instruction in VUE2 version. The other instructions can be analyzed by themselves, and the principle is the same.

We can see that we get the Lazy object from the Lazy and the LazyClass, and the v-lazy directive has several callbacks: Bind, Update, componentUpdated, and unbind bind the add, Update, lazyLoadHandler, and Remove methods of lazy objects, respectively.

Next, look at how the lazy object is generated:

src/lazy.js



As you can see, the lazy.js file exports a method that returns a lazy class. The reason for writing this is to form a closure to continue referencing Vue in the lazy class. Let’s look at the Lazy constructor:



You can see that the constructor initializes a bunch of configurations and variables, including a function lazyLoadHandler and setMode to determine whether to use an observer to detect dom viewings.



Follow the thread from SRC /index.js to see what happens to the bind callback:

src/lazy.js





As you can see, for each DOM element with the V-lazy directive, its scrollParent element is found first (essentially, iterating up to its overflow=auto or scroll ancestor element); A newListener object is generated and added to the ListenerQueue array. Finally, the _addListenerTarget method is called.


Next, look at what happens to the _addListenerTarget method:

src/lazy.js



You can see that the scrollParent element is placed in the TargetQueue and the _initListen method is called



Continue with the _initListen method:


src/lazy.js



Can see to scrollParent to monitor this. Options. ListenEvents in all events, event callback function for lazyLoadHandler.

LazyLoadHandler initialization has already been described:

src/lazy.js



The lazyLoadHandler method is a function that _lazyLoadHandler returns with a throttling wrapper.

Moving on to the implementation of _lazyLoadHandler:

src/lazy.js



You can see that the _lazyLoadHandler method iterates through the ListenerQueue array and calls the checkInView for each listener. If the checkInView returns true, it calls listener.load; At this point, you can guess that the checkInView is checking whether the DOM element corresponding to the listener is in the visible area, and the listener.load method is requesting the actual image.

So to sort it out, vue-Lazyload’s brief design idea can be seen here



Afterword.

Clear the overall thinking, the analysis of the source code is very clear, do not fall into endless details.

————————————-

Welcome to pay attention to my public number, front-end subarchaea, do front-end, not only do front-end.