javascript_DOM 編程藝術學習筆記（五）
一、提高js代碼的適用性和擴展性
改進前的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js example</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>SnapShots</h1>
<ul>
<li><a href="images/1.jpg" class="popup" title="1">1</a></li>
<li><a href="images/2.jpg" class="popup" title="2">2</a></li>
<li><a href="images/3.jpg" class="popup" title="3">3</a></li>
<li><a href="images/4.jpg" class="popup" title="4">4</a></li>
</ul>
<img src="images/5.gif" alt="屌絲男" id="placeholder">
<p id="description" name="description">choose an image!</p>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html> window.onload = function() {
if (!document.getElementById) return false;
// 判斷哪個屬性是否存在，來確定瀏覽器是否支持這個js
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
if (links[i].className === "popup") {
links[i].onclick = function() {
showPic(this);
return false;
}
}
}
}
function showPic(element) {
var imgElement = document.getElementById("placeholder");
imgElement.src = element.href;
var descriptionNode = document.getElementById("description");
description.firstChild.nodeValue = element.title;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js example</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>SnapShots</h1>
<ul id="imageGelley">
<li><a href="images/1.jpg" title="1">1</a></li>
<li><a href="images/2.jpg" title="2">2</a></li>
<li><a href="images/3.jpg" title="3">3</a></li>
<li><a href="images/4.jpg" title="4">4</a></li>
</ul>
<img src="images/5.gif" alt="屌絲男" id="placeholder">
<p id="description" name="description">choose an image!</p>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html> window.onload = function() {
if (!document.getElementById) return false;
// 判斷哪個屬性是否存在，來確定瀏覽器是否支持這個js
if (!document.getElementsByTagName) return false;
if (!document.getElementById("imageGelley")) false;
var gelleryNode = document.getElementById("imageGelley");
var links = gelleryNode.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return !showPic(this);
}
}
}
function showPic(element) {
if(!document.getElementById("placeholder")) return false;
if(!document.getElementById("description")) return false;
var imgElement = document.getElementById("placeholder");
if(imgElement.nodeName != "IMG") return false;
imgElement.src = element.href;
var descriptionNode = document.getElementById("description");
if(description.firstChild.nodeType == 3){ // 確定是文本節點
description.firstChild.nodeValue = element.title;
}
return true;
}擴展性測試
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js example</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>SnapShots</h1>
<ul id="imageGelley">
<li><a href="images/1.jpg" title="1"><img src="images/1.jpg"></a></li>
<li><a href="images/2.jpg" title="2"><img src="images/2.jpg"></a></li>
<li><a href="images/3.jpg" title="3"><img src="images/3.jpg"></a></li>
<li><a href="images/4.jpg" title="4"><img src="images/4.jpg"></a></li>
</ul>
<img src="images/5.gif" alt="屌絲男" id="placeholder">
<p id="description" name="description">choose an image!</p>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html> 2、讓function依次運行
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}