Detailed explanation of lazy loading function example code in javascript function

Lazy loading function

Because of the differences in behavior between browsers, we often include a large number of if statements in the function to check the browser Features to solve compatibility issues with different browsers. For example, our most common function to add events to dom nodes

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 must check the capabilities supported by the browser. First check whether the addEventListener method is supported. If not, then check whether the attachEvent method is supported. If it is not supported yet, use the dom0 level method to add the event. This process must be done every time the addEvent function is called. In fact, if the browser supports one of the methods, it will always support it, and there is no need to detect other branches. In other words, the if statement does not 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 function execution will only occur once.

There are two ways to implement lazy loading

[1] The first is when the function is called , and then process the function. When the function is called for the first time, the function will be overwritten by another function that is executed in an appropriate manner, so that any call to the original function does not need to go through the branch of execution.

We can use The following method uses lazy loading to rewrite addEvent()

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 loading addEvent(), each branch of the if statement will assign a value to the addEvent variable , effectively covering the original function. The last step is to call the new assignment function. The next time addEvent() is called, the newly assigned function will be called directly, so there is no need to execute the if statement.

However, this method has a disadvantage. If the function name changes, It is more troublesome to modify

[2] The second is to specify the appropriate function when declaring the function. In this way, the performance will not be lost when the function is called for the first time, but a little performance will be lost when the code is loaded.

The following is addEvent() rewritten according to this idea. The following code creates an anonymous self-executing function that branches through different functions to determine which function implementation should be used

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;
    }
  }
})();

The above is the detailed content of Detailed explanation of lazy loading function example code in javascript function. For more information, please follow other related articles on the PHP Chinese website!