You can cut the size of your code by refactoring duplicated code. When you refactor your code, you improve it without changing its external behavior. The most common means of refactoring code is identifying duplicated code and modifying it to be reused and easily maintained.

Recall the lesson on functions (Lesson 3). At the beginning of the lesson you were given an example of code duplication. It is listed here for your convenience:

var valueOne = 100;
valueOne = valueOne + 150;
valueOne = valueOne / 2;
valueOne = "The value is: " + valueOne; // results in "The value is: 125"

var valueTwo = 50;
valueTwo = valueTwo + 150;
valueTwo = valueTwo / 2;
valueTwo = "The value is: " + valueTwo; // results in "The value is: 100"

var valueThree = 2;
valueThree = valueThree + 150;
valueThree = valueThree / 2;
valueThree = "The value is: " + valueThree; // results in "The value is: 76"

This code performs the same exact operations on three different variables. Later in that lesson, that code was refactored to use the following function:

function augmentValue(originalValue) {
    var augmentedValue = originalValue;
    augmentedValue = augmentedValue + 150;
    augmentedValue = augmentedValue / 2;
    augmentedValue = "The value is: " + augmentedValue;

    return augmentedValue;
}

var valueOne = augmentValue(100); // results in "The value is: 125"
var valueTwo = augmentValue(50);  // results in "The value is: 100"
var valueThree = augmentValue(2); // results in "The value is: 76"

This refactor session saved two lines of code. Now, that may not seem like much right now, but let's look at the benefits. First, the code is reusable. If you need to augment more values in the same way, you can simply call the function as shown in the following example:

var valueFour = augmentValue(10); // results in "The value is: 80"
var valueFive = augmentValue(40); // results in "The value is: 90"
var valueSix = augmentValue(0); // results in "The value is: 75"

Now you begin to see real code savings from reusing the augmentValue() function. Before refactoring, each set of operations on one variable took four lines of code, including the variable declaration. If you were to perform the same set of operations on six variables, you'd do so in 24 lines of code. By refactoring the code you shrink the number of lines to 13 (seven for the function and six for each variable) — that's a nice savings.

Second, the code is more maintainable. Let's imagine that you wanted to add one to each value after dividing the number by two. Before refactoring you would have had to modify each set of operations like the bolded lines in the following code:

var valueOne = 100;
valueOne = valueOne + 150;
valueOne = (valueOne / 2) + 1;
valueOne = "The value is: " + valueOne; // results in "The value is: 125"

var valueTwo = 50;
valueTwo = valueTwo + 150;
valueTwo = (valueTwo / 2) + 1;
valueTwo = "The value is: " + valueTwo; // results in "The value is: 100"

// etc, etc, etc

Making changes like this makes your code more prone to error (what if you missed a variable?), and consumes too much time. You can achieve the same modification by editing one line of code, shown in bold in the following example:

function augmentValue(originalValue) {
    var augmentedValue = originalValue;
    augmentedValue = augmentedValue + 150;
    augmentedValue = (augmentedValue / 2) + 1;
    augmentedValue = "The value is: " + augmentedValue;

    return augmentedValue;
}

So by identifying duplicated code and refactoring it, you not only gain a performance increase by reducing the amount of code, you also save time and avoid potential errors.

The augmentValue() function in the previous section certainly eliminated duplicated code, but the function's body can be made to be more efficient and consume less space. The first change you can make is to remove the augmentedValue variable. The value passed to this function is supposed to be a number. Numbers are primitive values in JavaScript, so the value passed to this function is copied and contained within the originalValue variable. Because of this there's no need to copy the value in originalValue to augmentedValue. So the first refactor would result in the following:

function augmentValue(originalValue) {
    originalValue = originalValue + 150;
    originalValue = (originalValue / 2) + 1;
    originalValue = "The value is: " + originalValue;

    return originalValue;
}

You can refactor this function some more by combining statements. The JavaScript engine can execute one statement containing multiple operations faster than it can execute multiple statements performing one operation each. While you could combine all the statements in this function into one, a better approach (as far as maintainability is concerned) would be to combine statements that perform similar operations. For example, there are two statements that perform arithmetic operations. You can combine them into one statement, as shown in this code:

function augmentValue(value) {
    originalValue = ((value + 150) / 2) + 1;
    return "The value is: " + originalValue;
}

First, the originalValue parameter was changed to just value. This was done for two reasons:

Next, the first two statements are combined. This isn't always a good idea. If there are many mathematical operations to perform, they would be easier to read and maintain if they were in multiple statements. But here, combining them is fine.

Last, the concatenation and return statements are combined. Because there are no other operations that need to be performed after value is concatenated with a string, it makes sense to simply return the result of the concatenation operation.

Now the augmentValue() function is much smaller than it was before. That, combined with the refactoring of duplicated code into the augmentValue() function, makes this code efficient and ready for download.

Combining statements also applies to variables. Lesson 2 introduced the idea of initializing multiple variables within one statement as demonstrated in the following code:

var variableOne = "data",
    variableTwo = 10,
    variableThree = [];

Each variable initialization is separated by a comma. This code executes faster than the following code:

var variableOne = "data";
var variableTwo = 10;
var variableThree = [];

This book, for the sake of clarity, opted to declare and initialize multiple variables in separate statements like this code. Many professionals declare variables in this manner, but bear in mind that the single statement approach is more efficient.

In Lesson 14 you learned how to dynamically create HTML elements and text nodes with the document.createElement() and document.createTextNode() methods, and how to add them to the page with the appendChild() and insertBefore() methods. As a quick refresher, look at the following code:

for (var i = 0; i < 20; i++) {
    var el = document.createElement("p");
    el.appendChild(document.createTextNode("Paragraph " + i));
    document.body.appendChild(el);
}

This code creates 20 <p/> elements, adds a text node to them, and adds them to the page. Figure 43-1 shows you what it looks like in the browser.

Figure 43.1. Figure 43-1

There is technically nothing wrong with this code, but it is horribly inefficient because the DOM is updated 20 separate times, once for each <p/> element that is added to the page. With each update the browser has to redraw the page. This kind of page update can be noticeable by the user and inhibit performance. To solve this problem you want to reduce the number of updates made to the DOM, and you can do so by creating a document fragment.

Document fragments are lightweight document objects that can contain element objects that you can manipulate as if they were inside the HTML document. To create a document fragment you use the createDocumentFragment() method of the document object, like this:

var fragment = document.createDocumentFragment();

After you have created a fragment you can start adding element objects to it. In the case of this example you can append each <p/> element to a document fragment and then add the fragment to the HTML document. The following code illustrates this:

var fragment = document.createDocumentFragment();

for (var i = 0; i < 20; i++) {
    var el = document.createElement("p");
    el.appendChild(document.createTextNode("Paragraph " + i));
    fragment.appendChild(el);
}

document.body.appendChild(fragment);

Here, each <p/> element is appended to the document fragment. After the loop exits, the fragment is appended to the document's body node.

Using a document fragment in this way is advantageous because it reduces the amount of DOM updates to one. Even though you append each <p/> element to the fragment, the fragment exists outside of the DOM. So you don't cause an update to occur until you append the fragment to document.body. The document fragment object doesn't generate HTML itself, but its children do. So the resulting HTML in this code is exactly the same as it was without a document fragment.

Also in Lesson 14 you learned about the innerHTML property that you can use to add HTML to an element. Instead of creating node objects you simply construct a string containing HTML markup and assign it to an element's innerHTML property. It's simple, quick, and efficient — unless of course you make multiple updates to the DOM. Let's recreate the example from the previous section by using innerHTML to add <p/> elements to the page with the following code:

for (var i = 0; i < 20; i++) {
    var el = "<p>Paragraph " + i + "</p>";
    document.body.innerHTML = document.body.innerHTML + el;
}

As in the previous section, this code creates 20 <p/> elements and adds them to the document's body. As you might have realized, this code is inefficient because you make 20 updates to the body — causing the browser to render the page with every update. You could fix this by creating a variable and adding each HTML string to it, like this:

var html = "";

for (var i = 0; i < 20; i++) {
    html = html + "<p>Paragraph " + i + "</p>";
}

document.body.innerHTML = html;

But this code is inefficient too, because strings are immutable in JavaScript. The string value in html has to be copied, destroyed, and recreated with every loop iteration. A better solution is to create an array and push each HTML string to it, as shown in the following code:

var html = [];

for (var i = 0; i < 20; i++) {
    html.push("<p>Paragraph " + i + "</p>");
}

document.body.innerHTML = html.join();

In this code a string value is added as an element in the html array. After the loop exits, the html array's join() method is called to convert the array to a string value, which is then assigned to the body's innerHTML property. By building a HTML string, or in this case an array, you can limit the number of updates to the page.

You need a text editor. For Microsoft Windows users, Notepad is available by default on your system or you can download Microsoft's Visual Web Developer Express (www.microsoft.com/express/web/) or Web Matrix (www.asp.net/webmatrix/), both of which are free. Mac OS X users can use TextMate, which comes as part of OS X, or download a trial of Coda (www.panic.com/coda/). Linux users can use the built-in VIM.

You also need a modern web browser. Choose any of the following:

You also need a webserver installed with PHP support. Refer to Lesson 31 on the DVD for installation instructions.

Create a subfolder called Lesson43 in your webserver's root directory. Copy all the files from the Lesson42 directory and paste them into the Lesson43 folder. Rename the lesson42_example01.htm file to lesson43_example01.htm. As an exercise in code optimization you'll refactor the ajaxUtility object.