我的圖片庫完成了嫡霞。但根據(jù)上一章節(jié)的內(nèi)容，在平穩(wěn)退化捞挥、漸進(jìn)增強(qiáng)浮创、可訪問性、向后兼容等方面做得不夠好砌函。需要進(jìn)一步優(yōu)化我的js代碼斩披。
1、添加事件處理函數(shù)
1.檢查當(dāng)前瀏覽器是否理解js代碼：getElementsByTagName等方法讹俊；
if(!document.getElemensByTagName) return false;
2.使用變量垦沉，簡化代碼；
exp： var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
3.遍歷
4.改變行為
links[i].onclick = function(){statements;} Tips:這里的function是匿名函數(shù)
2劣像、共享onload事件
假如在文檔加載完畢之后需要綁定多個(gè)事件乡话，
window.onload = fristFunction;
window.onload = secondFunction; 如果使用這種方式的話，最終只會(huì)最后一個(gè)才會(huì)被實(shí)際執(zhí)行耳奕。因此這種使用方式是錯(cuò)誤的绑青。
正確做法：
window.onload = function(){
fristFunction();
secondFunction();
}
最佳解決方案：使用addLoadEvent函數(shù)：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
oldonload();
func();
}
}
這將把頁面加載完畢時(shí)執(zhí)行的函數(shù)創(chuàng)建一個(gè)隊(duì)列诬像。如果要把函數(shù)添加到這個(gè)隊(duì)列中，這樣使用：
addLoadEvent(fristFunction);
addLoadEvent(secondFunction);
代碼區(qū)：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="../css/layout.css" />
</head>
<body>
<h3>SHOW PICTURE</h3>
<ul id="imagegallery">
<li>
<a href="../img/1.jpg" >Picture1</a>
</li>
<li>
<a href="../img/2.jpg" title="2">Picture2</a>
</li>
<li>
<a href="../img/3.jpg" title="3">Picture3</a>
</li>
<li>
<a href="../img/4.jpg" title="4">Picture4</a>
</li>
</ul>
<script type="text/javascript" src="../js/showPic.js"></script>
</body>
</html>
js代碼：
//共享onload事件
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//通用函數(shù)：insertAfter在指定元素的后面添加新的元素節(jié)點(diǎn)
function insertAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling());
}
}
function preparePlaceholder() {
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id", "placeholder");
placeholder.setAttribute("src", "../img/6.jpg");
placeholder.setAttribute("alt", "my image gallery");
var description = document.createElement("p");
discription.setAttribute("id", "discription");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder, gallery);
insertAfter(description, placeholder);
}
function prepareGallery() {
if(!document.getElementById || !document.getElementsByTagName) 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);
}
links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic) {
//檢查是否包含placeholder元素
if(!document.getElementById("placeholder")) return false;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
//檢查placeholder的節(jié)點(diǎn)元素名稱是否等于img闸婴，注釋：nodeName返回值總是大寫的
if(placeholder.nodeName != "IMG") return false;
placeholder.setAttribute("src", source);
//檢查是否包含description
if(document.getElementById("description")) {
//檢查title屬性值是否為null值坏挠，如果為null值，則賦值為空值
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
var description = document.getElementById("description");
//nodeValue屬性
description.firstChild.nodeValue = text;
}
return true;
}
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);
CSS樣式：
body{
font-family: "微軟雅黑";
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h3{
color: #333333;
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;
}
img{
display: block;
clear: both;
}
