第四章的案例代码可以得到更好的改进。例如：预留退路、向后兼容性和分离js。
原html代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>Snapshots</h1> 9 <ul> 10 <li> 11 <a href="images/rose.jpg" onclick="showPic(this);return false" title="A fireworks display">Fireworks</a> 12 </li> 13 <li> 14 <a href="images/rose.jpg" onclick="showPic(this);return false" title="A cup of black coffee"> 15 Coffee</a> 16 </li> 17 <li> 18 <a href="images/rose.jpg" onclick="showPic(this);return false" title="A red, red rose">Rose</a> 19 </li> 20 <li> 21 <a href="images/bigben.jpg" onclick="showPic(this);return false" title="The famous clock"> 22 Big Ben</a> 23 </li> 24 </ul> 25 26 <img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> 27 <p id="description">Choose an image.</p> 28 29 </body> 30 </html>
原js代码：
1 function showPic(whichpic) {
2 var source = whichpic.getAttribute("href");
3 var placeholder = document.getElementById("placeholder");
4 placeholder.setAttribute("src",source);
5 var text = whichpic.getAttribute("title");
6 var description = document.getElementById("description");
7 description.firstChild.nodeValue = text;
8 }
一、解决预留退路问题：
没有使用js伪协议，即使js功能被禁用，a链接仍可以链接到图片，虽然与js在当前页面上切换显示新图片的效果略差一些，但网页的基本功能没有受到损害，页面上的所有内容都可以访问。
二、解决分离js的问题：
1、onclick事件处理函数直接插到html文档里，不符合“分离js”原则。
解决：
（1）找到“挂钩”把js代码与html文档中有关标记关联起来。
a、给每个链接添加一个class属性。（较麻烦）
b、给ul加一个id（id=“imagegallery”）
（2）添加事件处理函数，该函数需要具有以下功能：
a、检查当前浏览器是否理解getElementsByTagName（）方法。
b、检查当前浏览器是否理解getElementById（）方法。
c、检查当前网页是否包含着一个id属性值是“imagegallery”的元素。
d、构造一个循环来对“Imagegallery”元素中的链接进行遍历处理。
e、对onclick事件处理函数进行设置，让它在有关链接被点击时完成以下操作：把这个链接作为参数传递给showpic（）函数；取消链接被点击时的默认行为，不让浏览器打开这个链接。
①进行必要的检查
1 if (!document.getElementsByTagName) {
2 return false;
3 }
4 if (!document.getElementById) {
5 return false;
6 }
或
1 function prepareGallery() {
2 if (!document.getElementsByTagName) return false;
3 if (!document.getElementById) return false;
4 if (!document.getElementById("imagegallery")) return false;
结构化程序设计（structed programming）原则：每个函数应该只有一个入口点和一个出口点。
但是过分拘泥以上原则会使得代码难以阅读。所以一般而言，同一个函数有多个出口点的情况是可以接受的，但前提是它们应该集中出现在函数的开头部分。如第二种方法所示。
②创建必要的变量
1 var gallery = document.getElementById("imagegallery");
2 var links = gallery.getElementsByTagName("a");
③创建循环
for ( var i=0; i < links.length; i++) {
④完成必要的操作
1 links[i].onclick = function() {
2 showPic(this);
3 return false;
4 }
匿名函数一般用于只出现一次的函数
⑤完成js函数
1 function prepareGallery() {
2 if (!document.getElementsByTagName) return false;
3 if (!document.getElementById) return false;
4 if (!document.getElementById("imagegallery")) return false;
5 var gallery = document.getElementById("imagegallery");
6 var links = gallery.getElementsByTagName("a");
7 for ( var i=0; i < links.length; i++) {
8 links[i].onclick = function() {
9 showPic(this);
10 return false;
11 }
12 }
13 }
⑥把多个js函数绑定到onload事件处理函数上。在html文档完成加载之前，DOM是不完整的，必须使这个函数只在网页加载完毕之后才得到执行。网页加载完毕时会触发一个onload事件，这个事件与window对象相关联。
1 window.onload = function() {
2 firstFunction();
3 secondFunction();
4 }
或者使用addLoadEvent（）函数
1 function addLoadEvent(func) {
2 var oldonload = window.onload;
3 if (typeof window.onload != ‘function‘) {
4 window.onload = func;
5 } else {
6 window.onload = function() {
7 oldonload();
8 func();
9 }
10 }
11 }
12 addLoadEvent(firstFunction);
13 addLoadEvent(secondFunction);
三、js函数的优化