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>
js代码:
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>
现在添加一些a标签页会被js执行
2、让function依次运行
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}