AJAX In Action [51]
new TradingMode().setMode(MODE_AMBER);
won’t compile because the constructor is not publicly accessible, whereas the following will: TradingMode.getInstance().setMode(MODE_AMBER);
This code ensures that every call is routed to the same TradingMode object. We’ve used several language features here that aren’t available in JavaScript, so let’s see how we can get around this.
Singletons in JavaScript
In JavaScript, we don’t have built-in support for access modifiers, but we can
“hide” the constructor by not providing one. JavaScript is prototype-based, with constructors being ordinary Function objects (see appendix B if you don’t understand what this means). We could write a TradingMode object in the ordinary way: function TradingMode(){
this.mode=MODE_RED;
}
TradingMode.prototype.setMode=function(){
}
and provide a global variable as a pseudo-Singleton:
TradingMode.instance=new TradingMode();
But this wouldn’t prevent rogue code from calling the constructor. On the other hand, we can construct the entire object manually, without a prototype: var TradingMode=new Object();
Licensed to jonathan zheng 90 CHAPTER 3 Introducing order to Ajax TradingMode.mode=MODE_RED; TradingMode.setMode=function(){ ... } We can also define it more concisely like this: var TradingMode={ mode:MODE_RED, setMode:function(){ ... } }; Both of these examples will generate an identical object. The first way of writing it is probably more familiar to Java or C# programmers. We’ve shown the latter approach as well, because it is often used in the Prototype library and in frameworks derived from it. This solution works within the confines of a single scripting context. If the script is loaded into a separate IFrame, it will launch its own copy of the singleton. We can modify this by explicitly specifying that the singleton object be accessed from the topmost document (in JavaScript, top is always a reference to this document), as illustrated in listing 3.4. Listing 3.4 Singleton TradingMode object in JavaScript Function getTradingMode(){ if (!top.TradingMode){ top.TradingMode=new Object(); top.TradingMode.mode=MODE_RED; top.TradingMode.setMode=function(){ ... } } return top.TradingMode; } This allows the script to be safely included in multiple IFrames, while preserving the uniqueness of the Singleton object. (If you’re planning on supporting a Singleton across multiple top-level windows, you'll need to investigate top.opener. Due to constraints of space, we leave that as an exercise for the reader.) You’re not likely to have a strong need for singletons when writing UI code, but they can be extremely useful when modeling business logic in JavaScript. In a traditional web app, business logic is typically modeled only on the server, but doing things the Ajax way changes that, and Singleton can be useful to know about. Licensed to jonathan zheng Model-View-Controller 91 This provides a first taste of what refactoring can do for us at a practical level. The cases that we’ve looked at so far have all been fairly simple, but even so, using refactoring to clarify the code has helped to remove several weak points that could otherwise come back to haunt us as the applications grow. Along the way, we encountered a few design patterns. In the following section, we’ll look at a large-scale server-side pattern and see how we can refactor some initially tangled code toward a cleaner, more flexible state. 3.3 Model-View-Controller The small patterns that we’ve looked at so far can usefully be applied to specific coding tasks. Patterns have also been developed for the organization of entire applications, sometimes referred to as architectural patterns. In this section, we’re going to look at an architectural pattern that can help us to organize our Ajax projects in several ways, making them easier to code and easier to maintain. Model-View-Controller (MVC) is a way of describing a good separation between the part of a program that interacts with a