JavaScript DOM Programming Art (2nd edition) reading notes (6)

Case study: Photo Gallery improved version

We learned a theory in school, called structured programming. There is one such principle: the function should have only one entry and one exit. In theory, I agree with this principle, but in practice, being overly wedded to this principle often makes the code very difficult to read. If you rewrite those if statements to avoid leaving multiple exit points, the core code of this function will be buried in a layer of curly braces, like this:

function Preparegallery () {

if (document.getelementsbytagname) {

if (document.getElementById) {

if (document.getElementById ("Imagegallery")) {

Statements go here ...

}

}

}

}

I personally think that if a function has multiple exits, it is acceptable as long as these exits are concentrated at the beginning of the function. Just like this:

function Preparegallery () {

if (!document.getelementsbytagname) return false;

if (!document.getelementbyid) return false;

if (!document.getelementbyid ("Imagegallery")) return false;

Statements go here ...

}

Note: You must be careful when naming variables. Some words have special meanings and uses in the JavaScript language, and these words, collectively called "Reserved Words", cannot be used as variable names. In addition, the names of existing JavaScript functions or methods cannot be used to name variables. Do not use words such as alert, Var, or if as the name of the variable.

Sharing onload Events

Suppose I have two functions: Firstfunction and Secondfunction. What do I do if I want both of them to be executed when the page loads? If you bind them one by one to the OnLoad event, only the last of them will actually be executed:

Window.onload = firstfunction;

Window.onload = secondfunction;

Secondfunction will replace Firstfunction.

There is a way to avoid this dilemma: You can create an anonymous function to hold both functions, and then bind that anonymous function to the OnLoad event as follows:

Window.onload = function () {

Firstfunction ();

Secondfunction ();

}

It does work well-it should be the simplest solution when there are not many functions that need to be bound.

There is also the best solution for elasticity--no matter how many functions you plan to execute when the page is loaded, it can cope. This scenario requires some extra code, but the advantage is that once you have the code, it's very easy to bind the function to the Window.onload event.

The name of this function is Addloadevent, which was written by Simon Willison. It has only one parameter: the name of the function that is intended to execute when the page is finished loading.

Here's what the Addloadevent function will do:

1, the value of the existing Window.onload event handler function is stored in the variable oldonload.

2, if the handler is not bound to any function, just add the new function to it as usual.

3, if some functions are already bound on this handler, the new function is appended to the end of the existing instruction.

The following is the code listing for the Addloadevent function:

function Addloadevent (func) {

var oldonload = window.onload;

if (typeof window.onlaod! = ' function ') {

Window.onload = func;

}else{

Window.onload = Functoin () {

Oldonload ();

Func ();

}

}

}

This will create a queue of functions that are executed when the page is finished loading. If you want to add just those two functions to this queue, just write the following code:

Addloadevent (firstfunction);

Addloadevent (secondfunction);

Keyboard access

Not all users use the mouse. For example, users with visual impairments tend to be unable to see the mouse pointer moving around on the screen, and they tend to prefer to use the keyboard.

An event handler called onkeypress is specifically designed to handle keyboard events. Pressing any key on the keyboard will trigger the onkeypress event.

If you want the onkeypress event to trigger the same behavior as the OnClick event, you can simply copy the instructions:

Links[i].onclick = function () {

Return Showpic (this)? False:true;

}

links[i].onkeypress = function () {

Return Showpic (this)? False:true;

}

There is an easier way to do this:

links[i].onkeypress = Links[i].onclick;

But the onkeypress function is prone to problems. Each keystroke is triggered by the user. In some browsers, even the TAB key is included! This means that if the bindings on the handler function on the onkeypress event return false, those users who only use the keyboard access will never be able to leave the current link.

What about those people who use keyboards only?

Fortunately, the OnClick event handler is smarter than we thought. Although its name "onclick" gives the impression that it is only associated with a mouse click action, it is not true: in almost all browsers, the action of tabbing to a link and pressing ENTER will also trigger the OnClick event.

It is best not to use the OnKeyPress event handler function. The OnClick event handler function has been able to meet the needs. Although it is called "onclick", its support for keyboard access is quite perfect.

JavaScript DOM Programming Art (2nd edition) reading notes (6)