今天完成了圖片庫的改進(jìn)，不得寫下關(guān)于這個(gè)的深切感觸，獲得的寶貴經(jīng)驗(yàn)！。不羅嗦直接看先看代碼1.平穩(wěn)退化 要支持平穩(wěn)退化，也就是在瀏覽器禁用js時(shí)，不會(huì)造成無法瀏覽，知識(shí)用戶體驗(yàn)變差了而已，功能還是實(shí)現(xiàn)了的。此時(shí)就不能使用javascript偽協(xié)議加href屬性來解決。如下。2.分離js 分離js的關(guān)鍵技術(shù)就是要結(jié)合HTML生命周期，和window對(duì)象的onload方法以及元素對(duì)象擁有事件函數(shù)進(jìn)行相應(yīng)的自定義函數(shù)綁定。3.兼容性（對(duì)象檢查技術(shù)、其實(shí)用來確定代碼錯(cuò)誤位置也很好用）4.優(yōu)化代碼(使用特定壓縮工具，壓縮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 經(jīng)驗(yàn)總結(jié):
12 1.由于js是動(dòng)態(tài)語言，所以存在一個(gè)很嚴(yán)重的問題，
13 那就是你自己取的變量名稱時(shí)，盡可能的采用駱駝峰寫法，
14 并且最后借助好的編輯器，有自動(dòng)補(bǔ)全功能的編輯器，一面
15 拼寫錯(cuò)誤，這種錯(cuò)誤低級(jí)，而且查找起來十分困難。
16
17 2.如果站點(diǎn)用到多個(gè)js文件，因該把它合并到一個(gè)文件中。以減少請(qǐng)求次數(shù)，提高性能。
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 //使用對(duì)象檢查技術(shù)，檢查所要用到的方法是否可以用。
36 //在js dom中，一切都可視為對(duì)象，包括方法，
37 //所以說這是對(duì)象檢測技術(shù)，檢測這個(gè)對(duì)象存不存在
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的聲明周期，當(dāng)HTML文檔完成加載時(shí)，此時(shí)DOM節(jié)點(diǎn)樹立即構(gòu)建起來，此時(shí)會(huì)出發(fā)window對(duì)象的onload事件
57 所以我們?cè)谶@個(gè)時(shí)候執(zhí)行prepareGallery()函數(shù)進(jìn)行，相應(yīng)節(jié)點(diǎn)對(duì)象上的事件綁定是最合適的，因?yàn)榇藭r(shí)我們能確保整顆節(jié)點(diǎn)
58 樹已經(jīng)構(gòu)建完畢，我們綁定只要代碼不出錯(cuò)，就肯定不會(huì)出錯(cuò)。要是不用這個(gè)事件來處理。而只是通過srcipt標(biāo)簽引入，不管是放在
59 head區(qū)域還是body結(jié)束之前，都無法保證此時(shí)DOM節(jié)點(diǎn)樹已經(jīng)構(gòu)建完成，所以要實(shí)現(xiàn)js分離我們一定要用到HTML的聲明周期中的加載完成
60 ，構(gòu)建完成DOM節(jié)點(diǎn)樹而觸發(fā)的window.onload事件，有人會(huì)問此時(shí)document對(duì)象是否存在，在BOM中，window對(duì)象含有一個(gè)成員變量，
61 就是document，所以有window對(duì)象，就有document對(duì)象。
62 */
63
g
代碼中的注釋已經(jīng)詳細(xì)說明了代碼是要來干什么的。其實(shí)今天改進(jìn)版本的圖片庫，本來是想學(xué)習(xí)下HTML生命周期和DOM節(jié)點(diǎn)樹的關(guān)系，以及和window.onload的關(guān)聯(lián)。還有學(xué)習(xí)怎么平穩(wěn)退化。結(jié)果卡殼，卡了半天，差錯(cuò)，差了半天，起初是其中一個(gè)字符編碼有問題，運(yùn)行結(jié)果不對(duì)。找了半天才找到。這里總結(jié)寫js的快速調(diào)試辦法，當(dāng)然有點(diǎn)麻煩。我們?cè)趯慾s時(shí)，如果在定位元素時(shí)，我們應(yīng)該分步定位，步步縮進(jìn)，在定位時(shí)，利用對(duì)象檢查技術(shù)，我們可以很輕易找到我們出錯(cuò)的地方。本來這項(xiàng)技術(shù)是用來保證兼容性的，但是我們還可以用它來定位錯(cuò)誤！，在沒有該對(duì)象的時(shí)候使用alert進(jìn)行提示。在調(diào)試時(shí)，我們就可以快速定位錯(cuò)誤的位置，因?yàn)榇蠖鄶?shù)時(shí)候我們寫的代碼在我們理解的邏輯上是不會(huì)有錯(cuò)的，但是我們有時(shí)可能為定位某個(gè)元素，給其加了給id，但是定位時(shí)卻拼錯(cuò)了，這時(shí)我們通過對(duì)象檢查技術(shù)，就可以很快找到錯(cuò)誤的地方。2014.07.1102：44于福州