我的图片库完成了。但根据上一章节的内容，在平稳退化、渐进增强、可访问性、向后兼容等方面做得不够好。需要进一步优化我的js代码。
1、添加事件处理函数
1.检查当前浏览器是否理解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是匿名函数
2、共享onload事件
假如在文档加载完毕之后需要绑定多个事件，
window.onload = fristFunction;
window.onload = secondFunction; 如果使用这种方式的话，最终只会最后一个才会被实际执行。因此这种使用方式是错误的。
正确做法：
window.onload = function(){
fristFunction();
secondFunction();
}
最佳解决方案：使用addLoadEvent函数：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
oldonload();
func();
}
}
这将把页面加载完毕时执行的函数创建一个队列。如果要把函数添加到这个队列中，这样使用：
addLoadEvent(fristFunction);
addLoadEvent(secondFunction);
代码区：
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();
}
}
}
//通用函数：insertAfter在指定元素的后面添加新的元素节点
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的节点元素名称是否等于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;
}
网友评论