In JavaScript code, because of the differences in behavior between browsers, we often include a large number of if statements in the function to check browser features to resolve compatibility issues with different browsers. For example, our most common function for adding events to a DOM node is:
Copy Code code 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 you call the Addevent function, it will check the capabilities that the browser supports, first check whether the AddEventListener method is supported, and if not, then check to see if the Attachevent method is supported, and if not, use DOM 0 -level method to add an event. This process, when the addevent function is called every time, in fact, if the browser supports one of these methods, then he will always support, there is no need for other branches of detection, that is, if statements do not have to execute every time, the code can run faster.
The solution is called lazy loading techniques.
The so-called lazy load, that is, the function if the branch will only execute once, and then call the function, directly into the supported branch code. There are two ways to implement lazy loading, the first of which is when a function is called two processing of the function itself, which is overwritten with a function that conforms to the branching condition, so that calls to the original function do not have to be executed, and we can use the lazy load rewrite addevent () in the following way.
Copy Code code 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 an if statement assigns a value to the addevent variable, effectively overwriting the original function. The last step is to invoke the new assignment. The next time you call Addevent (), the newly assigned function is called directly, so that you do not have to execute the IF statement anymore.
The second way to implement lazy loading is to specify the appropriate function when declaring a function. This will not lose performance when the function is called for the first time, and will lose a bit of performance only when the code is loaded. The Addevent () is rewritten according to this idea.
Copy Code code 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 execution function, through the different branches to determine should use that function implementation, the actual logic is the same, the difference is to use the function expression (using the var definition function) and a new anonymous function, and each branch returns a correct function, and assign it immediately to the variable addevent.
The advantage of a lazy load function is to perform an if branch only once, avoiding the need to perform an if branch and unnecessary code each time the function executes, thus improving code performance, which is more appropriate for your needs.
