javascript

Chapter 18: Advanced Techniques
Lazy loading functions have two primary advantages. First, the evaluation of the appropriate code to
execute only happens if you actually call the function. Some JavaScript libraries start out by performing
multiple code branches to set everything up ahead of time based on browser capabilities or quirks. Lazy
loading pushes these calculations off until the last possible moment, ensuring that the proper
functionality is available without affecting initial script execution time. Second, although the first call to
a function is slightly slower as a result of the addition of a second function call, all subsequent calls to
the function are faster, because they avoid evaluating multiple if conditions.
Function Binding
An advanced technique that has become increasingly popular is function binding. Function binding
involves creating a function that calls another function in a particular context and with specific
arguments. This technique is often used in conjunction with callbacks and event handlers to preserve
code execution context while passing functions around as variables. Consider the following example:
var handler = {
message: “Event handled”,
};
handleClick: function(event){
alert(this.message);
}
var btn = document.getElementById(“my-btn”);
EventUtil.addHandler(btn, “click”, handler.handleClick);
In this example, an object called handler is created. The handler.handleClick() method is assigned as
an event handler to a DOM button. When the button is clicked, the function is called, and an alert is
displayed. Even though it may seem as if the alert should display “ Event handled ”, it actually displays
“ undefined ” . The problem is that the context of handler.handleClick() is not being saved, so the
this object ends up pointing to the DOM button instead of handler . You can fix this problem using a
closure as shown in the following example:
var handler = {
message: “Event handled”,
};
handleClick: function(event){
alert(this.message);
}
var btn = document.getElementById(“my-btn”);
EventUtil.addHandler(btn, “click”, function(event){
handler.handleClick(event);
});
This solution uses a closure to call handler.handleClick() directly inside the onclick event
handler. Of course, this is a very specific solution to this specific piece of code. Creating multiple
closures can lead to code that is difficult to understand and debug. Therefore, many JavaScript libraries
have implemented a function that can bind a function to a specific context. Typically, this function is
called bind() .
594