今天完成了圖片庫的改進，不得寫下關于這個的深切感觸，獲得的寶貴經驗！。不羅嗦直接看先看代碼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于福州