174 CHAPTER 6 DECOUPLED NAVIGATION PATTERN The (Cpanel web hosting)
174 CHAPTER 6 DECOUPLED NAVIGATION PATTERN The solution is to decouple the steps of Figure 6-11, which was illustrated as a single piece of code, into two code pieces. The decoupled code would be as follows: function InjectHTML( elementId, text) { document.getElementById( elementId).innerHTML = text; } function OnClick( event) { InjectHTML( “myDiv”, “data”) There are now two functions (InjectHTML and OnClick). The function InjectHTML requires an element identifier and some text, and will perform an HTML injection. The function InjectHTML is a business-logic-specific implementation that operates on an HTML element reference defined by the client. The function OnClick reacts to the event and is responsible for gathering the data used to call the InjectHTML function. Each function has its responsibilities and each function is decoupled from the other. The only shared information is the data gath ered by OnClick and processed by InjectHTML. Figure 6-11 has been implemented by using a decoupled solution, but now Figure 6-12 needs to be implemented. This means that an additional step of using the XMLHttpRequest object needs to be added. For simplicity, assume that the XMLHttpRequest object functionality is encapsulated in the function CallXMLHttpRequest, which accepts a single parameter. As the function CallXMLHttpRequest is used to gather information, the function is called by OnClick, and the returned data is passed to the InjectHTML function. The modified source code is as follows: E B V N function InjectHTML( elementId, text) { document.getElementById( elementId).innerHTML = text; } function OnClick( event) { InjectHTML( “myDiv”, CallXMLHttpRequest( “data”)) In the modified source code, the second parameter of the CallXMLHttpRequest function has been replaced with the function CallXMLHttpRequest. Looking at the solution technically, you can see that the three steps have been decoupled from each other, and each can vary without affecting the other. What is still kludgy is how the data is gathered and passed to the function InjectHTML. This is the reason for creating Common Data functionality. The Common Data functionality replaces the kludgy calling of the functions with some common state. The problem at the moment is that the OnClickfunction relies on the functions InjectHTML and CallXMLHttpRequest. The reliance cannot be avoided, but what can be avoided is the calling convention. Imagine that instead of InjectHTML being used, the function InjectTextbox is used due to a business logic decision. And then imagine that InjectTextbox requires an extra parameter, as illustrated by the following source code: function InjectTextbox( convert, elementId, text) { // …. } function OnClick( event) { InjectTextbox( false, “myDiv”, CallXMLHttpRequest( “data”))
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.