《JavaScript DOM 编程艺术》读书笔记——其四
第六章
案例:JavaScript图片库改进版
1、平稳退化
可以使访问者在浏览器不支持JavaScript即某些功能无法使用的情况下,仍能顺利完成基本的操作。
2、JavaScript与HTML标记分离
3、渐进增强
用一些额外的信息层去包裹原始数据(按照“渐进增强”原则创建出的网页几乎都符合“平稳退化”原则)
4、改进举例代码:
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="../css/test.css" media="screen" />
</head>
<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
<!--图片链接列表-->
<li>
<!--showPic()函数需要一个参数:一个带有href属性的元素节点参数,使用到了this关键字,即“这个<a>元素节点”-->
<a href="../img/1.jpeg" title="picture01"><img src="../img/1.jpeg" alt="Breakfast" width="120px" height="90px" /></a>
</li>
<li>
<a href="../img/2.jpeg" title="picture02"><img src="../img/2.jpeg" alt="Sea" width="120px" height="90px" /></a>
</li>
<li>
<a href="../img/3.jpeg" title="picture03"><img src="../img/3.jpeg" alt="Flower" width="120px" height="90px" /></a>
</li>
<li>
<a href="../img/4.jpeg" title="picture04"><img src="../img/4.jpeg" alt="Tree" width="120px" height="90px" /></a>
</li>
<li>
<a href="../img/5.jpg" title="picture05"><img src="../img/5.jpg" alt="Street" width="120px" height="90px" /></a>
</li>
<li>
<a href="../img/6.jpeg" title="picture06"><img src="../img/6.jpeg" alt="Sky" width="120px" height="90px" /></a>
</li>
</ul>
<!--“占位符”图片-->
<img id="placeholder" src="../img/2.jpeg" alt="my image gallery" style="width: 50%; height: 20%; margin-top: 20px;" align="center" />
<p id="description">Choose an image.</p>
<script type="text/javascript" src="../js/test.js"></script>
</body>
</html>
test.js:
//此函数参数为打算在页面加载完毕时执行的函数的名字
function addLoadEvent(func)
{
var oldonload = window.onload;//网页加载完毕时会触发onload事件
if(typeof window.onload != 'function')//如果这个处理函数还未绑定任何函数
{
window.onload = func;//把新函数添加给它
}
else//如果这个处理函数已经绑定了一些函数
{
window.onload = function()//把新函数追加到现有指令的末尾
{
oldonload();
func();
}
}
}
addLoadEvent(prepareGallery);
function prepareGallery()
{
//检查点,检查当前浏览器是否理解getElementByTagName
if(!document.getElementsByTagName)
{
return false;
}
//检查点,检查当前浏览器是否理解getElementById
if(!document.getElementById)
{
return false;
}
//检查点,检查当前网页是否存在一个id为imagegallery的元素(预防性措施),这样即使从网页上删除图片库也不用担心JS代码会突然出错
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()//为links[i]元素添加onclick方法,并为其添加一个事件处理匿名函数,这个匿名函数的语句在对应元素对应链接点击时执行
{
showPic(this);//函数参数关键字为this,即代表此时与onclick方法相关联元素
//在返回前验证showPic的返回值,以便决定是否阻止默认行为,如果返回true,则更新placeholder
//实现取反后即意味着如果showPic返回true,此时返回false,浏览器不会打开那个链接
//如果showPic返回false,则图片未更新,返回true以允许默认行为
return !showPic(this);//false即禁用有关链接的默认行为(按照这个链接未点击时采取行动)
}
// links[i].onkeypress = links[i].onclick;//使onkeypress键盘处理事件与onclick事件触发相同的行为,但一般不建议使用
}
}
function showPic(whichpic)//showPic为函数名,whichpic为指向某个图片<a>元素的元素节点参数
{
if(!document.getElementById("placeholder"))
{
return false;
}
var source = whichpic.getAttribute("href");//获取路径"href"
var placeholder = document.getElementById("placeholder");//获取“占位符”图片
placeholder.setAttribute("src",source);//设置“占位符”元素的src属性
if(document.getElementById("description"))
{
var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";//获取whichpic对象的title属性值
var description = document.getElementById("description");
description.firstChild.nodeValue = text;//利用nodeValue属性刷新description对象的第一个子节点
}
return true;
//即使文档里没有placeholder图片,也不会发生JS错误
}
test.css:
body
{
font-family:"Helvetica","Arial",serif;
color: #333333;
background-color: lightgoldenrodyellow;
margin: 1em 10%;
}
h1
{
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;
}
#imagegallery
{
list-style: none;
}
#imagegallery li
{
display: inline;
}
#imagegallery li a img
{
border: 0;
}