勤于思考是每位有创新精神的网页设计人员都应该具备的特质。
平稳退化
第一个问题，如果JS功能被禁用，会怎么样？把href属性设置为一个真实存在的值，能够让之前提到的图片库平稳退化。
JS与HTML标记是分离的吗？
第二个问题，网页的行为层(JS)是作用于其结构层(HTML)之上的么？还是两种代码混杂在一起？
- 必须找到一种“挂钩”把JS代码与HTML文档中的有关标记关联起来。在页面元素上设置class和id是常见的方式，应该合理设置这些类型，少为佳。
添加事件处理函数
现在我需要编写一个简短的函数把有关操作关联到onclick事件上，函数命名为prepareGallery
- 检查当前浏览器是否理解getElementsByTagName
- 检查当前浏览器是否理解getElementById
- 检查当前网页是否存在一个id为imagegallery的元素
- 遍历imagegallery元素中的所有链接
- 设置onclick事件，让它在有关链接被点击时完成以下操作。
- 把这个链接作为参数传递给showPic函数
- 取消链接被点击时的默认行为，不让浏览器打开这个链接
检查点
var supported=document.getElementsByTagName&&document.getElementById;
if(!supported)return;
//更加针对的检查
if(!document.getElementById("imagegallery")){
return false;
}
作为一条原则，如果想用JS给某个网页添加一些行为，就不应该让JS代码对这个网页结构有任何依赖。
整理后的代码如下：
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById)return false;
if(!document.getElementById("imagegallery"))return false;
}
变量名里有什么
使用变量名进行对象的临时存储。
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");
}
遍历
改变行为
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(){
showPic(this);
return false;
}
}
}
共享onload事件
让函数在网页加载完毕后立即执行。
PS：但是如果存在多个函数，需要在网页加载完毕之后执行，可以先创建一个匿名函数来容纳这两个函数，然后把这两个匿名函数绑定到onload事件上。
window.onload=function(){
firstFunction();
secondFunction();
}
这里还有一个弹性最佳的解决方案。使用addLoadEvent，它只有一个参数，打算在页面加载完毕时执行函数的名字。
addLoadEvent函数将要完成的操作。
- 把现有的window.onload事件处理函数的值存入变量oldonload
- 如果在这个处理函数上海没有绑定任何函数，就像平时那样把新函数添加给它。
- 如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾。
addLoadEvent函数的代码清单。
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
//上面的代码我们就可以这样实现。
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
不要做太多的假设
在代码里用到了id属性值等于palceholder和description的元素，但我并未对这些元素是否存在做任何检查。我们需要增加一些语句来检查这些元素是否存在。
function showPic(whichpic) {
if(!document.getElementById("placeholder"))return false;
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
if(document.getElementById("description")){
var text=whichpic.getAttribute("title");
var description=document.getElementById("description");
description.firstChild.nodeValue=text;
}
return true;
}
改进后的showPic函数不再假设有关标记文档里肯定存在着placeholder图片和description元素，即使没有placeholder图片，也不会发生任何JS错误。但是有一个问题就是如果把placeholder图片从标记文档里删掉并在浏览器里刷新这个页面，就会出现无论点击清单里的哪一个链接，都没有任何响应。
原因在于showPic函数肯定会正常返回，基于这一假设，prepareGallery函数取消了onclick事件的默认行为。
links[i].onclick=function(){
showPic(this);
return false;
}
是否要返回一个false值来取消onclick事件的默认行为，应该由showPic函数决定。showPic应返回两个可能的值。
- 如果图片切换成功，返回true。
- 如果图片切换不成功，返回false。
源码链接：
优化
尽管代码已经相当完善了，在showPic函数里仍存在一些需要处理的假设。
- 检查title属性是否真的存在
if(whichpic.getAttribute("title")!=null)
或者
if(whichpic.getAttribute("title"))
代码优化如下：
var text＝whichpic.getAttribute("tilte")?whichpic.getAttribute("title"):"";
- 检查placeholder元素是否存在
if(placeholder.nodeName!="IMG")return false;
请注意，nodeName属性总是返回一个大写字母的值，即使元素在HTML文档中是小写字母。
-对description元素的第一个子元素是一个文本节点进行检查。
if(description.firstChild.nodeType==3){
description.firstChild.nodeValue=text;
}
优化后的代码如下：
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;
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;
}
PS:在实际工作中，你要自己决定是否真的需要这些检查。它们针对的是HTML文档有可能不在你控制范围内的情况。
键盘访问
在有关onclick事件处理的脚本中，有一项优化工作是不能不考虑的。
公所周知，不使用鼠标也可以浏览Web。键盘上的Tab键可以让我们从这个链接移动到另一个链接，而按下回车键将启用当前链接。有个名叫onkeypress的事件处理函数是专门用来处理键盘事件的。按下键盘上任何一个按键都会触发onkeypress事件。
一种简单的方法：
可以确保onkeypress模仿onclick事件行为。
links[i].onkeypress=links[i].onclick;
小心onkeypress
最后的决定是不添加onkeypress事件处理函数。原因是这个事件处理函数很容易出问题。用户每按下一个案件都会触发它。
onclick事件与鼠标点击动作相关联的感觉。事实却并非如此。在几乎所有浏览器里，用tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。从这点看来，把它命名为onactivate更恰当。
最好不要使用onkeypress事件处理函数。onclick事件处理函数已经能满足需要，虽然它叫做onclick，但是它对键盘的访问支持相当完美。
最终代码：
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;
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;
}
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);
}
}
}
把JS与CSS结合起来
把内嵌型事件处理函数移出标记文档时，我在文档里为JS代码留下了一个“挂钩”，如<ul id="imagegallery">，这个挂钩完全可以用在CSS样式表里。
DOM Core和HTML-DOM
在编写JS代码时只用到以下几个DOM方法。
- getElementById
- getElementByTagName
- getAttribute
- setAttribute
这些方法都是DOM Core的组成部分。它们并不专属于JS，支持DOM的任何一种程序设计语言都可以使用它们。它们的用途也并非仅限于处理网页，它们可以用来处理用任何一种标记语言编写出来的文档。
PS：在Web文档中，同样的代码即可以使用DOM来编写，也可以使用HTML-DOM来编写。通常情况下，HTML-DOM的语句更简短。如：var source＝whichpic.getAttribute("href");可以使用HTML-DOM达到同样目的的语句：var source＝whichpic.href;
结构与行为的分离程度越大越好。
