关闭

javascript_DOM 编程艺术学习笔记(五)

标签: javascript
220人阅读 评论(0) 收藏 举报
分类:

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();
		}
	}
}




0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:12128次
    • 积分:507
    • 等级:
    • 排名:千里之外
    • 原创:40篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条