Shulou(Shulou.com)06/01 Report--

This article mainly shows you "js how to use lazy load function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "js how to use lazy load function" this article.

Lazy load function

Because of the differences in behavior between browsers, we often include a large number of if statements in functions to check browser features and solve compatibility problems among different browsers. For example, our most common function is to add events to the dom node

Function addEvent (type, element, fun) {if (element.addEventListener) {element.addEventListener (type, fun, false);} else if (element.attachEvent) {element.attachEvent ('on' + type, fun);} else {element [' on' + type] = fun;}

Every time the addEvent function is called, it checks the capabilities supported by the browser, first check whether the addEventListener method is supported, if not, then check whether the attachEvent method is supported, and if not, use the dom0-level method to add events.

This process is repeated every time the addEvent function is called. In fact, if the browser supports one of these methods, it will support it all the time, so there is no need to detect other branches. That is, the if statement doesn't have to be executed every time, and the code can run faster.

The solution is lazy loading. The so-called lazy loading means that the branch of the function execution occurs only once, and there are two ways to achieve lazy loading

1. The first is to process the function when the function is called. When the function is called for the first time, the function is overwritten as another function that executes in an appropriate manner, so that any call to the original function no longer has to go through the branch of execution.

We can use lazy loading to rewrite addEvent () in the following way

Function addEvent (type, element, fun) {if (element.addEventListener) {addEvent = function (type, element, fun) {element.addEventListener (type, fun, false);} else if (element.attachEvent) {addEvent = function (type, element, fun) {element.attachEvent ('on' + type, fun) }} else {addEvent = function (type, element, fun) {element ['on' + type] = fun;}} return addEvent (type, element, fun);}

In this lazy loaded addEvent (), each branch of the if statement assigns a value to the addEvent variable, effectively overriding the original function. The last step is to call the new assignment function. The next time addEvent () is called, the newly assigned function is called directly so that the if statement is no longer executed.

However, the drawback of this approach is that it is troublesome to modify if the name of the function is changed.

2. The second is to specify the appropriate function when you declare the function. In this way, there is no performance loss when the function is called for the first time, only a little bit when the code is loaded. The following is the addEvent () rewritten according to this line of thinking. The following code creates an anonymous self-executing function that uses different branches to determine which function should be implemented.

Var addEvent = (function () {if (document.addEventListener) {return function (type, element, fun) {element.addEventListener (type, fun, false);}} else if (document.attachEvent) {return function (type, element, fun) {element.attachEvent ('on' + type, fun) }} else {return function (type, element, fun) {element ['on' + type] = fun;}}) (); that's all about the article "how js uses lazy loading functions". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.