JavaScriptDOM編程學習筆記（二）圖片庫案例
《JavascriptDOM編程藝術》提供一個圖片庫的demo，主要講解如何更好的使用JavaScript在網頁中，跟隨作者的思路來分析一下這個案例
首先需求是將圖片發布到網上，但是如果發布的圖片比較多，那麽頁面就會變得過於龐大，那麽當用戶在訪問網頁的時候需要下載的數據量就非常可觀了，而現實是，很少有用戶會等待很長很長的時間去下載一個網頁
因此，基於上述原因，為每張圖片分別創建一個網頁的方案就值得考慮，這樣就能將圖片庫拆分到許多尺寸合理，便於下載和瀏覽的的頁面，不過這樣的一個解決方案面對的問題就是分別創建一個網頁需要花費的時間和精力，以及需要為每個網頁上增加某種導航鏈接來給出當前圖片在整個圖片庫的位置，方便瀏覽用戶跳轉到其他網頁
為了兩全其美，我們使用JavaScript創建圖片庫就是一個很棒的選擇：將整個圖片庫的瀏覽鏈接集中安排在圖片庫的主頁，當用戶點擊了這個主頁的圖片鏈接時將響應的圖片傳遞給用戶
來看第一版的圖片庫的顯示效果
下面的圖片庫的標記清單
1 <!DOCTYPE> 2 <html lang="en"> 3 <head> 4 <meta charset=utf-8" /> 5 <title>Image Gallery</title> 6 </head> 7 <body> 8 <h1>Snapshots</h1> 9 <ul> 10 <li> 11 <a href="images/fireworks.jpg" title="一朵絢爛的煙花">煙花</a> 12 </li> 13 <li> 14 <a href="images/coffee.jpg" title="一杯卡布奇諾">咖啡</a> 15 </li> 16 <li> 17 <a href="images/rose.jpg"title="一束玫瑰">玫瑰</a> 18 </li> 19 <li> 20 <a href="images/bigben.jpg" title="著名的大本鐘">大本鐘</a> 21 </li> 22 </ul> 23 </body> 24 </html>
網頁顯示的效果是一個列表，比較遺憾的是有幾個地方需要改進
- 當點擊了鏈接之後，希望能留在頁面而不是跳轉到新的頁面，這樣不需要借助瀏覽器退回按鈕返回
- 當點擊圖片鏈接時，在當前頁面看到那張圖片以及原有的圖片清單
為了實現這些要改進的目標，我們可以這麽操作一波
- 通過增加一個占位符圖片來為圖片的預覽保留一個瀏覽區域
- 在點擊鏈接時，攔截這個網頁的默認行為
- 在點擊鏈接時候，將占位符圖片替換為對應的圖片
完成後的頁面效果如下
當點擊對應的圖片時，會自動展示對應的圖片效果，標記清單如下
1 <!DOCTYPE> 2 <html lang="en"> 3 <head> 4 <meta charset=utf-8" /> 5 <title>圖片庫</title> 6 <!-- 將占位符區域的圖片替換 --> 7 <script type="text/javascript" src="scripts/showPic.js"></script> 8 </head> 9 <body> 10 <h1>圖片庫</h1> 11 <ul> 12 <li> 13 <!-- 單擊觸發showPic函數，this:關鍵字表示當前元素，即這個對象 --> 14 <a href="images/fireworks.jpg" title="一朵絢爛的煙花" onclick="showPic(this); return false;">煙花</a> 15 </li> 16 <li> 17 <a href="images/coffee.jpg" title="一杯卡布奇諾" onclick="showPic(this); return false;">咖啡</a> 18 </li> 19 <li> 20 <a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a> 21 </li> 22 <li> 23 <a href="images/bigben.jpg" title="著名的大本鐘" onclick="showPic(this); return false;">大本鐘</a> 24 </li> 25 </ul> 26 <!-- 占位符 --> 27 <img id="placeholder" src="images/placeholder.gif" alt="我的圖片庫" /> 28 </body> 29 </html>
showPic函數的代碼
1 //替換占位符placeholder元素的src元素為whichpic元素的href屬性 2 function showPic(whichpic) { 3 //whichpic:對應的<a>元素 4 var source = whichpic.getAttribute("href");//獲取whichpic的href屬性值 5 var placeholder = document.getElementById("placeholder");//獲取占位符圖片 6 placeholder.setAttribute("src",source);//刷新元素的src屬性 7 }
在這裏需要了解一下瀏覽器事件處理函數的工作機制：
在給某個元素添加了事件處理函數後，一旦事件發生，相應的JavaScript代碼就會被執行，被調用的Javascript代碼可以返回一個值，這個值將被傳遞給那個事件處理函數。以上文為例，我們給鏈接加上了onclick事件處理函數，並讓這個處理函數觸發的JavaScript代碼返回布爾值。當該鏈接被點擊，假設那段JavaScript代碼返回值是true，onclick事件處理函數就認為“該鏈接被點擊了”，反之，如果返回值為false,onclick事件處理函數就認為“這個鏈接沒有被點擊”
可以寫個測試驗證下
1 <a href="http://www.cnblogs.com/luqinghua/" onclick="return false;">點擊</a>
當點擊該鏈接時，因為onclick觸發事件函數返回值為false，所以這個鏈接的默認行為沒有被觸發
除了能在一個頁面上切換圖片，我們還希望能看到將圖片的屬性title也展示在頁面上
1 <!DOCTYPE> 2 <html lang="en"> 3 <head> 4 <meta charset=utf-8" /> 5 <title>圖片庫</title> 6 <!-- 將占位符區域的圖片替換 --> 7 <script type="text/javascript" src="scripts/showPic.js"></script> 8 </head> 9 <body> 10 <h1>圖片庫</h1> 11 <ul> 12 <li> 13 <!-- 單擊觸發showPic函數，this:關鍵字表示當前元素，即這個對象 --> 14 <a href="images/fireworks.jpg" title="一朵絢爛的煙花" onclick="showPic(this); return false;">煙花</a> 15 </li> 16 <li> 17 <a href="images/coffee.jpg" title="一杯卡布奇諾" onclick="showPic(this); return false;">咖啡</a> 18 </li> 19 <li> 20 <a href="images/rose.jpg" title="一束玫瑰" onclick="showPic(this); return false;">玫瑰</a> 21 </li> 22 <li> 23 <a href="images/bigben.jpg" title="著名的大本鐘" onclick="showPic(this); return false;">大本鐘</a> 24 </li> 25 </ul> 26 <!-- 占位符 --> 27 <img id="placeholder" src="images/placeholder.gif" alt="我的圖片庫" /> 28 <!-- 顯示文本 --> 29 <p id="description">請選擇一張圖片</p> 30 </body> 31 </html>
我們在標記清單上新增了一個描述節點，在顯示圖片時，把這個文本節點的值替換成目標圖片的title的值
1 //替換占位符placeholder元素的src元素為whichpic元素的href屬性 2 function showPic(whichpic) { 3 //whichpic:對應的<a>元素 4 var source = whichpic.getAttribute("href");//獲取whichpic的href屬性值 5 var placeholder = document.getElementById("placeholder");//獲取占位符圖片 6 placeholder.setAttribute("src",source);//刷新元素的src屬性 7 8 var text = whichpic.getAttribute("title");//獲取whichpic的title屬性值 9 var description = document.getElementById("description");//獲取用於描述的文本節點的值 10 description.firstChild.nodeValue = text;//刷新元素的文本內容 11 }
這裏要擴展下JavaScript的childNodes屬性，用於獲取任何元素的所有子元素，然後根據每個節點都有的nodeType屬性，判斷節點類型
- 元素節點的nodeType屬性值是1
- 屬性節點的nodeType屬性值是2
- 文本節點的nodeType屬性值是3
nodeType的屬性有12種值，但僅有上述三種有實用價值，這也意味著，可以編寫只對特定類型節點進行處理的函數
需要註意到，在showPic代碼中，我們使用的是
1 description.firstChild.nodeValue = text;//刷新元素的文本內容
因為直接使用nodeValue獲取的節點值並不是對應的文本值，而是null，可以使用alert(description.nodeValue)進行驗證。我們真正需要的是<p>元素包含的文本的 值，包含在<p>元素中的文本是另一種節點，也就是<p>元素的第一個子節點，所以使用description.childNodes[0].nodeValue就可以找到需要的文本，而我們使用的則是firstChild，即等同於childNodes[0]，同理，還有一個與之相對的lastChild等同於node.childNodes[node.childNodes.length - 1]，即最後一個子節點
完成了上述內容後，頁面展示效果如下
到這裏一個很不錯的圖片庫就已經完成了，可以換上自己喜歡的圖片在瀏覽器中看看是否滿意，最後，我們還可以給這個頁面披上一件漂亮的外衣---CSS樣式
1 <style type="text/css"> 2 body { 3 font-family: "Helvetica","Arial",serif; 4 color: #333; 5 background-color: #ccc; 6 margin: 1em 10%; 7 } 8 9 h1 { 10 color: #333; 11 background-color: transparent; 12 } 13 14 a { 15 color: #c60; 16 background-color: transparent; 17 font-weight: bold; 18 text-decoration: none; 19 } 20 21 ul { 22 padding: 0; 23 } 24 25 li { 26 float: left; 27 padding: 1em; 28 list-style: none; /* 去掉左側的點 */ 29 } 30 31 img { 32 display: block; 33 clear: both; 34 } 35 36 #imagegallery { 37 list-style: none; 38 } 39 40 #imagegallery li { 41 display: inline; 42 } 43 44 #imagegallery li a img { 45 border: 0; 46 } 47 </style>
然後就可以看到頁面的巨大變化了
以上就是《JavaScriptDOM編程藝術》一書中展示的圖片庫demo，如有錯漏，歡迎指正，有疑問歡迎留言
JavaScriptDOM編程學習筆記（二）圖片庫案例