#6图片库改进

最新推荐文章于 2024-10-01 22:12:42 发布

巴黎没有欧莱雅你也不值得被拥有

最新推荐文章于 2024-10-01 22:12:42 发布

阅读量247

点赞数

分类专栏： JavaScript_DOM编程艺术文章标签： javascript JavaScript_DOM编程艺术

本文链接：https://blog.csdn.net/lp15203883326/article/details/74906530

版权

JavaScript_DOM编程艺术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

主要内容：
@把事件处理函数移出文档
@向后兼容
@确保可访问

1.支持平稳退化吗？
2.它的JavaScript与HTML标记是分离的吗
3.添加事件处理函数
    1).检查点
    2).变量名里有什么
    3).遍历
    4).改变行为
    5).完成JavaScript函数
4.共享 onload事件
5.优化
6.键盘访问
小心onKeypress
7.把JavaScript与CSS结合起来
8.DOM Core 和 HTML-DOM

最终代码清单：
源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>gallery</title>
<link rel="stylesheet" href="styles/layout.css" media="screen" />

</head>

<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
     <li>
        <a href="images/heying.jpg" title="A fireworks display"><img src="images/heying.jpg" alt="Fireworks"/></a>
     </li>
     <li>
        <a href="images/IMG_1984.JPG"   title="A cup of black coffee"> <img src="images/IMG_1984.JPG" alt="Coffee"/></a>
     </li>
     <li>
        <a href="images/timg (1).jpg"   title="A red, a rose"> <img src="images/timg (1).jpg" alt="Rose"/></a>
     </li>
     <li>
       <a href="images/timg (2).jpg" title="The famous clock"> <img src="images/timg (2).jpg" alt="Big Ben"/></a>
      </li>
   </ul>

<img id="placeholder" src="" alt="My Image Gallery"/>
<p id="description"> Choose an image </p>

@layout.css
@charset "utf-8";
/* CSS Document */

body {
font-family: "微软雅黑";
color: #333;
background-color: #ccc;
magin: 1em 10%;

}
h1{
color:#333;
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;
width:400px;
height:400px;
}

#imagegallery{
list-style:none;
}
#imagegallery li{
display:inline;
}
#imagegallery li a img{
border:0;
width:100px;
height:100px;
}
#description{
font-family: "幼圆";
font-size: 24px;
font-weight: bold;
color: #06C;
}

@showpic.js
function prepareGallery(){
    if(!document.getElementsByTagName)return false;
    if(!document.getElementById) 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) ? false : true;
     }
    }
   }

   function showPic(whichpic){
    if(!document.getElementById("placeholder")) return false;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  if(placeholder.nodeName != "IMG")return false;//nodeName总是返回一个大写字母的值
  placeholder.setAttribute("src",source);
     if(document.getElementById("description")){
     var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";
  var description = document.getElementById("description");
  if(description.firstChild.nodeType == 3){
  description.firstChild.nodeValue=text;
  }
    }
return true;
}
window.onload = prepareGallery;

小结：
@ 尽量让我的JavaScript代码不在依赖于那些没有保证的假设，所以引入了许多项预测和检查。这可以使我的JavaScript代码能够平稳退化0。
@最重要的是把事件处理函数从标记文档分离到了一个外部的JavaScript文件。这使JavaScript代码不再依赖于HTML文档的内容和结构。
结构与行为的分离程度越大越好。