《JavaScript Dom 编程艺术》读书笔记-第6章

时间:2021-08-23 07:14:23

本章继续对图片库进行改进,主要内容包括三个方面:

1. 把事件处理函数移出文档;

2. 向后兼容;

3. 确保可访问。

之前代码的HTML片段,此时如果浏览器不支持JS,图片显示也能正常工作,只是体验感降低。可见将“href”设置为真实存在的值,能够保证平稳退化。

 <a href="image/2.jpg"  onclick="showpic("image/2.jpg"); return false;"title="2" >2 </a>

考虑分离结构层(JS)和行为层。作为一条原则:如果想用JS给某个网页添加一些行为,就不应该让JS代码对这个网页的结构有任何期待。

function imagegallery(){
if (!document.getElementsByTagName){
return false; //检查是否有该方法
}
if(!document.getElementById){
return false;//检查是否有该方法
}
if(!document.getElementById("imagegallery")){
return false;//检查是否ID为imagegallery的元素
}
var gallery=document.getElementById("imagegallery");//找到该元素
var links=gallery.getElementsByTagName("a");//所以图片链接元素
for (var i=0; i<links.length;i++ )//遍历
{
links[i].onclick=function()//设置onclick函数
{
return !showPic(this);//取消元素点击的默认行为,传给showPic的参数是关键字this,他代表此时与onclick方法相关联的那个元素。
}
}
}

共享onload事件函数:addLoadEvent。

function addLoadEvent(func){
var oldload=window.onload;//把现有的onload函数存入到oldload
//alert(typeof oldload)
if (typeof oldload !='function')
{
window.onload=func;//如果oldload不是函数类型,那么之前没有函数绑定onload
}else{
window.onload=function(){
oldload();
func();
}
}
}

对于showPic函数,之前没有对它进行检查和测试。

function showPic(whichpic){
if (!document.getElementById("placeholder"))
{
return false//getElementById函数在imagegallery已经检查过,所以只需检查是否含有id=placeholder的元素。
}
var source=whichpic.getAttribute("href");
var placehold=document.getElementById("placeholder");
if (placehold.nodeName!='IMG')//nodeName总是返回一个大写字母的值,即时元素在HTML里是小写的
{
return false
}
placehold.setAttribute("src",source);
if (document.getElementById("describe"))//检查是否有describe元素,如果有
{
var tx=whichpic.getAttribute("title")?whichpic.getAttribute("title"):" ";//检查图片是否有title,有就修改,没有为空
var des=document.getElementById("describe");
if (des.firstChild.nodeType==3)
{
des.firstChild.nodeValue=tx;
}
}
return true;//如果切换成功放回TRUE,否则FALSE
}

把JS从HTML里分离出去还有一个好处,在把内嵌型事件处理函数移出标记文档是,在文档里为JS留下一个挂钩:

 <ul id="imagegallery">

这个挂钩也可以用在CSS里。在html文件的<head>部分引用它:

<link rel="stylesheet" href="mywebCSS.css" type="text/css" media="screen"/>

DOM Core和HTML DOM:两种方法可以互换。

在js代码中遇到以下几个DOM方法:

getElementById

getElementsByTagName

getAttribute

setAttribute

这些方法书序DOM Core,并不属于js,任何一种支持DOM的语言都可以使用。

在JS和DOM为HTML文件编写脚本时,还有许多属性可以使用。比如onclick,用于图片库的事务管理。这些属性属于HTML-DOM。

比如:

document.getElementsByTagName("form")可以简化为document.forms。

element.getAttribute("src")可以简化为element.src。

HTML-DOM只能用来处理web文档。

本章的几个改进:

尽量不让JS代码依赖于哪些没有保证的假设,为此需要增加很多测试和检查。

没有使用onkeypress也能使JS代码的可访问性得到保证。

最重要的是,把事件处理函数从标记文档分离到一个外部JS文件中。

结构与行为的分离越大越好。