In javascript code, due to the differences in behavior between browsers, we often include a large number of if statements in the function to check browser characteristics and solve compatibility problems of different browsers. For example, our most common function to add events to the dom node:
The code copy is as follows:
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 needs to check the capabilities supported by the browser. First, check whether the addEventListener method is supported. If it is not supported, check whether the attachEvent method is supported. If it is not supported, use the dom level 0 method to add events. This process has to 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, if statements do not have to be executed every time, and the code can run faster.
The solution is a technique called lazy loading.
The so-called lazy loading means that the if branch of the function will only be executed once, and then when the function is called, it will directly enter the supported branch code. There are two ways to implement lazy loading. The first thing is that when the function is called for the first time, the function itself will be processed quadratically. The function will be overwritten as a function that meets the branch conditions, so that the call to the original function will no longer have to go through the executed branch. We can use lazy loading to overwrite addEvent() in the following way.
The code copy is as follows:
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 will assign a value to the addEvent variable, effectively overwriting the original function. The last step is to call the new assignment function. The next time you call addEvent(), the newly assigned function will be called directly, so that you no longer need to execute if statements.
The second way to implement lazy loading is to specify the appropriate function when declaring the function. This way, the performance will not be lost when the function is called the first time, and only a little performance will be lost when the code is loaded. Here is the addEvent() rewritten according to this idea.
The code copy is as follows:
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 trick used in this example is to create an anonymous self-executing function, and use different branches to determine which function should be implemented. The actual logic is the same. The difference is that the function expression is used (the function is defined by var) and an anonymous function is added. In addition, each branch returns a correct function and immediately assigns it to the variable addEvent.
The advantage of lazy loading functions is that if branches are executed only once, avoiding the function executing if branches and unnecessary code every time it is executed, thus improving code performance. As for which method is more appropriate, it depends on your needs.