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