今天完成了图片库的改进，不得写下关于这个的深切感触，获得的宝贵经验！。不罗嗦直接看先看代码1.平稳退化 要支持平稳退化，也就是在浏览器禁用js时，不会造成无法浏览，知识用户体验变差了而已，功能还是实现了的。此时就不能使用javascript伪协议加href属性来解决。如下。2.分离js 分离js的关键技术就是要结合HTML生命周期，和window对象的onload方法以及元素对象拥有事件函数进行相应的自定义函数绑定。3.兼容性（对象检查技术、其实用来确定代码错误位置也很好用）4.优化代码(使用特定压缩工具，压缩js代码)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Image Gallery</title>
6 </head>
7 <body>
8 <h1>Snapshots</h1>
9 <ul id = "imagegallery">
10 <li>
11 <a href="images/fireworks.jpg" title="A fireworks display">
12 Fireworks
13 </a>
14 </li>
15 <li>
16 <a href="images/coffee.jpg" title="A cup of black coffee">
17 Coffee
18 </a>
19 </li>
20 <li>
21 <a href="images/rose.jpg" title="A red. red rose">
22 Rose
23 </a>
24 </li>
25 <li>
26 <a href="images/bigben.jpg" title="The famous clock">
27 Big Ben
28 </a>
29 </li>
30 </ul>
31 <img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" />
32 <p id="desp">Choose an Image</p>
33 <script type="text/javascript" src="./scripts/showPic.js">
34 </script>
35 </body>
36 </html>
g 1 function showPic(whichPic) {
2 alert("showPic");
3 var source = whichPic.getAttribute("href");
4 var placeholder = document.getElementById("placeholder");
5 placeholder.setAttribute("src",source);
6 var text = whichPic.getAttribute("title");
7 var txtNode = document.getElementById("desp").firstChild;
8 txtNode.nodeValue = text;
9 return false;
10 /*
11 经验总结:
12 1.由于js是动态语言，所以存在一个很严重的问题，
13 那就是你自己取的变量名称时，尽可能的采用骆驼峰写法，
14 并且最后借助好的编辑器，有自动补全功能的编辑器，一面
15 拼写错误，这种错误低级，而且查找起来十分困难。
16
17 2.如果站点用到多个js文件，因该把它合并到一个文件中。以减少请求次数，提高性能。
18
19 */
20 }
21
22 function addLoadEvent(func) {
23 var oldLoad = window.onload;
24 if(typeof oldLoad == 'function') {
25 window.onload = function() {
26 oldLoad();
27 func();
28 }
29 }else {
30 window.onload = func;
31 }
32 }
33
34 function prepareGallery() {
35 //使用对象检查技术，检查所要用到的方法是否可以用。
36 //在js dom中，一切都可视为对象，包括方法，
37 //所以说这是对象检测技术，检测这个对象存不存在
38 //下面主要是检查浏览器是否支持这些DOM接口
39 //alert("jsss");
40
41 if(!document.getElementsByTagName) {alert("tag");return false};
42 if(!document.getElementById) return false;
43 if(!document.getElementById("imagegallery")) return false;
44 var gl = document.getElementById("imagegallery");
45 var links = gl.getElementsByTagName("a");
46 //alert(typeof links);
47 for(var i = 0; i < links.length; i++) {
48 links[i].onclick = function() {
49 return showPic(this);
50 }
51 }
52 //alert("end");
53 }
54 addLoadEvent(prepareGallery);
55 /*
56 这里介绍下HTML的声明周期，当HTML文档完成加载时，此时DOM节点树立即构建起来，此时会出发window对象的onload事件
57 所以我们在这个时候执行prepareGallery()函数进行，相应节点对象上的事件绑定是最合适的，因为此时我们能确保整颗节点
58 树已经构建完毕，我们绑定只要代码不出错，就肯定不会出错。要是不用这个事件来处理。而只是通过srcipt标签引入，不管是放在
59 head区域还是body结束之前，都无法保证此时DOM节点树已经构建完成，所以要实现js分离我们一定要用到HTML的声明周期中的加载完成
60 ，构建完成DOM节点树而触发的window.onload事件，有人会问此时document对象是否存在，在BOM中，window对象含有一个成员变量，
61 就是document，所以有window对象，就有document对象。
62 */
63
g
代码中的注释已经详细说明了代码是要来干什么的。其实今天改进版本的图片库，本来是想学习下HTML生命周期和DOM节点树的关系，以及和window.onload的关联。还有学习怎么平稳退化。结果卡壳，卡了半天，差错，差了半天，起初是其中一个字符编码有问题，运行结果不对。找了半天才找到。这里总结写js的快速调试办法，当然有点麻烦。我们在写js时，如果在定位元素时，我们应该分步定位，步步缩进，在定位时，利用对象检查技术，我们可以很轻易找到我们出错的地方。本来这项技术是用来保证兼容性的，但是我们还可以用它来定位错误！，在没有该对象的时候使用alert进行提示。在调试时，我们就可以快速定位错误的位置，因为大多数时候我们写的代码在我们理解的逻辑上是不会有错的，但是我们有时可能为定位某个元素，给其加了给id，但是定位时却拼错了，这时我们通过对象检查技术，就可以很快找到错误的地方。2014.07.1102：44于福州