Cross-Browser Scripting: Various Techniques - Doc JavaScript | 2

Various Techniques

One of JavaScript's most important features is the ability to embed external scripts. External scripts are extremely useful for Dynamic HTML applications, which require a fourth-generation browser -- all fourth-generation browsers support external scripts, so you don't even need to worry about backward compatibility.

In theory, cross-browser scripts can be twice as large as a single-browser version of the same script. In long scripts, size really does make a difference, because the browser must download the entire file in order to execute the script. An easy solution is to dynamically insert the external script, depending on the browser:

<SCRIPT LANGUAGE="JavaScript1.2">
<!--
var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
if (NS4)
  document.write("<SCRIPT SRC='ns4version.js'><\/SCRIPT>")
else
  document.write("<SCRIPT SRC='ie4version.js'><\/SCRIPT>");
//-->
</SCRIPT>

Looking back at our simple example from the previous page, each of the preceding external files (ns4version.js and ie4version.js) should include a distinct version of the moveIt() function. The file named ns4version.js should contain the following text:

function moveIt(id, x, y) {
  document[id].left += x;
  document[id].top += y;
}

And ie4version.js should include the following function:

function moveIt(id, x, y) {
  document.all[id].style.left += x;
  document.all[id].style.top += y;
}

Notice that both functions have the same name and feature the same parameters. This is very important, because a consistent interface ensures simple implementation of the function in both browsers. When you call the function from the main document, you don't really care what browser the user is running. The different function bodies take care of the dirty work.

Instead of placing these functions in different files, we can use another technique where both can be placed in the same script (but with different names):

function moveItNS(id, x, y) {
  document[id].left += x;
  document[id].top += y;
}
function moveItIE(id, x, y) {
  document.all[id].style.left += x;
  document.all[id].style.top += y;
}

Notice that both functions still have the same parameters -- an identical interface. Now all we have to do is assign them both a common name, so they can be invoked the same way in Navigator 4.0x and Internet Explorer 4.0x:

moveIt = (NS4) ? moveItNS : moveItIE;

That's all there is to it. You can now call the moveIt() function as usual. This may look like magic, but it makes a lot of sense. When a function or a method is specified without the trailing parentheses, the expression doesn't invoke the function -- it simply refers to the function. Therefore, a function specification without parentheses is called a function reference.

Since a function reference is an object, it can be assigned to variables, handed to other functions, and handled just like any other object. However, it can also be invoked by applying a set of parentheses to the reference. In our example, we assign a reference of the appropriate function to a global variable named moveIt. The var keyword is omitted from the variable declaration, because a function reference should normally be a global variable. We refer to the moveItNS() and moveItIE() functions as objects.

With this interesting technique our short article comes to an end. After reading the tutorial, you should be familiar with three different approaches to cross-browser scripting.

Created: June 4, 1997
Revised: June 4, 1997
URL: https://www.webreference.com/js/pharmacy/article2/other.html