在之前的版本上進行修改和優(yōu)化。
需要考慮的幾點：
1迈倍、引入了檢測和測試嗎伤靠？代碼能平穩(wěn)退化嗎？
2啼染、向后兼容
3宴合、分離JavaScript
4、優(yōu)化迹鹅、簡潔代碼
代碼：
gallery.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen"/>
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<li>
<a href="images/fire.jpg" title="fire1">
</a>
</li>
<li>
<a href="images/coffee.jpg" title="fire2">
</a>
</li>
<li>
<a href="images/rose.jpg" title="fire3">
</a>
</li>
<li>
<a href="images/bigben.jpg" title="fire4">
</a>
</li>
</ul>
<p id="description">Choose an image.</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
showPic.js代碼：
//調用addLoadEvent()函數卦洽，同時加載多個函數，適用于函數數量過多的情況
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function () {
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
/*由于需要調用的函數較少斜棚，可以使用以下簡單的方法：
window.onload = function(){
countBodyChildren();
prepareGallery();
}
*/
function showPic(whichpic){
if(!document.getElementById("placeholder")) return false;//檢測是否存在id為placeholder的元素
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if(placeholder.nodeName != "IMG") return false;//判斷元素placeholder是否是圖片
placeholder.setAttribute("src",source);
if(document.getElementById("description")){//檢查元素description是否存在
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";//如果getAttribute("title")返回的值不是null阀蒂，text將被賦予第一個值；如果返回值是null弟蚀，text將被賦予第二個值蚤霞。
var description = document.getElementById("description");
if(description.firstChild.nodeType == 3){//檢查description元素的第一個子元素是不是文本節(jié)點
description.firstChild.nodeValue = text;
}
}
return true;
}
function prepareGallery() {
//method1
// if(!document.getElementsByTagName || !document.getElementById || !document.getElementById("imagegallery")) return false;
/*method2
if(!document.getElementsByTagName){
return false;
}
if(!document.getElementById){
return false;
}
if(!document.getElementById("imagegallery")){
return false;
}*/
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for( var i=0;i < links.length;i++){
links[i].onclick = function () {
return showPic(this) ? false : true;
}
}
}
layout.css代碼：
body {
font-family: "Helvetica","Arial",serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
display: inline;
}
#imagegallery li a img {
border: 0;
}
學習筆記
1.如果想要在將在時同時執(zhí)行兩個函數：
window.onload = firstFunction;
window.onload = secondFunction;
如果把它們逐一綁定到onload事件上，它們當中將只有最后那個才會被實際執(zhí)行义钉，secondFunction將取代firstFunction昧绣。想要實現可以參照上面的方法。
2.三元操作符——捶闸？夜畴，是if/else語句的一種變體形式。這個問號的后面是變量的兩種取值删壮。
variable = condition ? if true : if false;
3.nodeName屬性總是返回一個大寫字母的值贪绘，即使元素在HTML文檔里是小寫字母。
4.在考慮了并非所有用戶都是使用鼠標的情況下央碟，此處還是并未使用onkeypress事件函數税灌，因為用戶每按下一個鍵都會觸發(fā)它。即使是Tab鍵！而onclick事件處理函數比我們想象的更聰明：在幾乎所有的瀏覽器里垄琐，用Tab鍵移動到某個鏈接后按下回車鍵的動作也會觸發(fā)onclick事件边酒。
