In the javascript code because of differences in behavior between the browser, we often included in the function of the large number of ifstatements to check for browser features to address compatibility issues in different browsers. For example, our most common is domto add a function of the event 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;
}
}
Each call to addEventthe function when it should be supported by the ability of the browser to be checked, first check whether to support the addEventListenermethod, if not support, then check whether to support the attachEventmethod, if not support, you add an event class method dom 0 . This process, at addEventthe time of each call to the function have to go again, in fact, if one of these methods browser support, then he would have been supported, there is no need to detect the other branches, and that is, ifThe statement does not have to be executed every time, 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 is that when the function is called for the first time, the function itself is processed twice, and the function will be overwritten as a function that meets the branch condition, so that the original function does not need to be called After the execution branch, we can use lazy loading to rewrite in the following way 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 is addEvent()in ifeach branch will statement addEventvariable assignment, effectively covering the original function. The last step is to call the new assignment function. The next call addEvent()time, call the function will direct the new assignment, so no need to execute ifthe statement the.
The second way to implement lazy loading 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, only a little performance will be lost when the code is loaded. The following is rewritten in accordance with this idea addEvent().
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;
}
}
})();
This example uses the technique is to create a self-executing anonymous function, through different branches should be used to determine the function implementation, practical logic are the same, not the same place is to use a function expression (using varcustom function) and An anonymous function has been added, and each branch returns a correct function and assigns it to the variable immediately addEvent.
Inert advantage loaded function is performed only once ifa branch to avoid the execution time of each function to be executed ifbranches and unnecessary code, and thus enhance the performance of your code, as that way more appropriate depends on your needs and set up .