Test Driven JavaScript Development- P6

Test Driven JavaScript Development- P6:This book is about programming JavaScript for the real world, using the techniquesand workflow suggested by Test-Driven Development. It is about gaining confidencein your code through test coverage, and gaining the ability to fearlessly refactor andorganically evolve your code base. It is about writing modular and testable code. Itis about writing JavaScript that works in a wide variety of environments and thatdoesn’t get in your user’s way.
Nội dung trích xuất từ tài liệu:
Test Driven JavaScript Development- P6 Applied Functions and Closures 6 I n the previous chapter we discussed the theoretical aspects of JavaScript func- tions, familiarizing ourselves with execution contexts and the scope chain. JavaScript supports nested functions, which allows for closures that can keep private state, and can be used for anything from ad hoc scopes to implementing memoization, function binding, modules and stateful functions, and objects. In this chapter we will work through several examples of how to make good use of JavaScript functions and closures. 6.1 Binding Functions When passing methods as callbacks, the implicit this value is lost unless the object on which it should execute is passed along with it. This can be confusing unless the semantics of this are familiar. 6.1.1 Losing this: A Lightbox Example To illustrate the problem at hand, assume we have a “lightbox” object. A lightbox is simply an HTML element that is overlaid the page, and appears to float above the rest of the page, much like a popup, only with a web 2.0 name. In this example the lightbox pulls content from a URL and displays it in a div element. For convenience, an anchorLightbox function is provided, which turns an anchor element into a 93Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 94 Applied Functions and Closures lightbox toggler; when the anchor is clicked, the page it links to is loaded into a div that is positioned above the current page. Listing 6.1 shows a rough outline. Listing 6.1 Lightbox pseudo code var lightbox = { open: function () { ajax.loadFragment(this.url, { target: this.create() }); return false; }, close: function () { /* ... */ }, destroy: function () { /* ... */ }, create: function () { /* Create or return container */ } }; function anchorLightbox(anchor, options) { var lb = Object.create(lightbox); lb.url = anchor.href; lb.title = anchor.title || anchor.href; Object.extend(lb, options); anchor.onclick = lb.open; return lb; } Note that the code will not run as provided; it’s simply a conceptual exam- ple. The details of Object.create and Object.extend will be explained in Chapter 7, Objects and Prototypal Inheritance, and the ajax.loadFragment method can be assumed to load the contents of a URL into the DOM element specified by the target option. The anchorLightbox function creates a new object that inherits from the lightbox object, sets crucial properties, and returns the new object. Additionally, it assigns an event handler for the click event. Using DOM0 event properties will do for now but is generally not advisable; we’ll see a better way to add event handlers in Chapter 10, Feature Detection. Unfortunately, the expected behavior fails when the link is clicked. The reason is that when we assign the lb.open method as the event handler, we lose the implicit binding of this to the lb object, which only occurs when the function isPlease purchase PDF Split-Merge on www.verypdf.com to remove this watermark. From the Library of WoweBook.Com 6.1 Binding Functions 95 called as a property of it. In the previous chapter we saw how call and apply can be used to explicitly set the this value when calling a function. However, those methods only help at call time. 6.1.2 Fixing this via an Anonymous Function To work around the problem, we could assign an anonymous function as the event handler that when executed calls the open method, making sure the correct this value is set. Listing 6.2 shows the workaround. Listing 6.2 Calling open through an anonymous proxy function function anchorLightbox(anchor, options) { /* ... */ anchor.onclick = function () { return lb.open(); }; /* ... */ } Assigning the inner function as the event handler creates a closure. Normally, when a function exits, the execution context along with its activation and variable object are no longer referenced, and thus are available for garbage collection. How- ever, the moment we assign the inner function as the event handler something in- teresting happens. Even after the anchorLightbox finishes, the anchor object, through its onclick property, still has access to the scope chain of the execution context created for anchorLightbox. The anonymous inner function uses the lb variable, which is neither a parameter nor a local variable; it is a free variable, accessible through the scope chain. Using the closure to handle the event, effectively proxying the met ...