JavaScript_DOM编程艺术第二版学习笔记-第6章

第5章总结

编写JS脚本，需注意，它是否支持平稳退化；渐进增强；向后兼容；分离JavaScript原则。在第五章中，我们已经基本实现了JavaScript与HTML文档的分离，只有onclick事件仍在文档中。第6章将探讨如何实现事件函数与HTML文档的分离。

一、添加事件处理函数

1.1 检查点

如第五章介绍过的，灵活使用逻辑或逻辑非，来检测当前浏览器是否识别JS脚本中的DOM方法。

    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById('imageallery')) return false;

在结构化程序设计里，有这样一条原则：函数应该只有一个入口和一个出口。但上面的检测的做法显然是违背着一个原则的，每一个return false都是一个出口，根据结构化程序设计理论，应该把出口减少为一个，即
function prepareGallery(){
if(document.getElementsByTagName){
if(document.getElementById){
if(document.getElementById('imageallery')){
statements.......
}
}
}
}
这样变得非常难以阅读，难以理解，所以，如果一个函数有多个出口，只要这些出口集中出现在函数的开头部分，还是可以接受的。

当必要的测试和检查工作结束后，就可以动手写事件处理函数的核心功能。

1.2 变量名里有什么

首先，简化代码：重复多次敲入类似document.getElementById('imageallery')这么长遗传实在很麻烦，所以可以将它赋值给一个变量，这个变量名为geallery。var geallery = document.getElementById('imageallery');。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。这里推荐使用有意义的名称，可以让代码更易阅读和理解。
—-变量必须以字母开头
—-变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
—-变量名称对大小写敏感（y 和 Y 是不同的变量）
提示：JavaScript 语句和 JavaScript 变量都对大小写敏感。

我们将需要添加事件处理的链接或者节点添加到一个数组（更准确的说应该是节点列表）中，命名为links：var links = geallery.getElementByTagName('a');

1.3 遍历

遍历节点列表中的每个元素，可以使用for循环或if循环，都可以。这里我使用for循环：for (var i = 0; i < links.length; i++) {....}。

1.4 改变行为

具体到这个例子，理想状态是改变links节点列表中各个元素的行为。links是一个由DOM节点构成列表，这个列表每个节点都有自己的属性和方法。具体到这个例子是onclick方法，这样给这个方法添加一个行为：links[i].onclick = function(){....}。
这条语句是一种在代码执行时创建函数的方法。所有links[i]所对应的链接被点击时将会执行function。我传递给showPic函数的参数是关键字this，this这里代表links[i]，而links[i]又对应links节点列表里某个特定节点：showPic(this);完善代码如下：

    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function() {
            showPic(this);
            return false;
        }
    };

1.5 共享onload事件

如果需要在页面加载同时加载JS函数，可以使用addLoadEvent()函数，做法也很简单，将我们编写的函数添加到这个函数即可。

addLoadEvent(firstFunction());
addLoadEvent(secondFunction());

1.6 不要做太多假设

如上我们对类似document.getElementById()做了太多假设，而实际并不需要这么多的假设。图片库的案例是判断找到占位图placeholder，并修改它的src属性已达到切换显示不同图片的功能。其次，获取并修改它的title属性已达到每次切换图片时图片描述也会跟着改变的功能。研究下这个图片库，遵循平稳退化的原则，首要任务是浏览图片，而切换图片描述只是锦上添花的效果。所以我们可以将检查工作分为两部分：只要placeholder图片存在，即使title描述不存在，切换显示不同图片也能照常进行。
切换显示图片部分代码更新为：

    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") ? whichpic.getAttribute("title") : "";
        var description = document.getElementById("description");
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }
    }

添加在if里，图片描述则将变为可选，如果有描述则更新，如果没有则返回为空。

var text = whichpic.getAttribute(“title”) ? whichpic.getAttribute(“title”) : “”;这句中的？是一个三元操作符。语法为：变量 = 条件 ? if true : if false。上述表达为，查找title属性，如果查找到，则将？后的第一个值赋给text，如果没有，则将“ ”空字符串赋值给text。？后跟着的是两个值。

二、DOM Core和HTML-DOM

至此，编写JS代码时只用了以下几个DOM方法：

• getElementById
• getElementByTagName
• getAttribute
• setAttribute
  这些方法都是DOM Core的组成部分，他们并不专属于JS，支持DOM的任何一种程序设计语言都可以使用它们，它们的用途也并非仅限于处理网页，它们可以用来处理用任何一种标记语言（如XML）编写出来的文档。
  在使用JS语言和DOM为HTML文件编写脚本时，还有许多属性可供选择。如，onclick属性，这些属性属于HTML-DOM，它们在DOM Core出现之前很久就已经为人们所熟悉了。
  比如说，HTML-Core提供了一个forms对象，可将如下语句document.getElementByTagName("form")简化为document.forms类似地，HTML-DOM还提供了许多描述各种HTML元素的属性。比如说HTML-DOM为图片提供的src属性将element.getAttribute("src")简化为element.src
  这些方法和属性可以相互替换。同样的操作即可以只用DOM Core，也可用HTML-DOM来实现。必须提醒一下：HTML-DOM只能处理Web文档。
  下面有几个HTML-DOM简化DOM Core的例子：

        var source = whichpic.getAttribute("href");
简化为：var source = whichpic.href;

        placeholder.setAttribute("src", source);
简化为：placeholder.src = source;

小结

• 尽量让JS代码不再依赖没有保证的假设，解决办法是引入多项测试和检查，使得JS代码能够平稳退化；
• 不使用onkeypress键盘输入事件处理函数，从而加强JS的可访问性；
• 事件处理函数与标记文档分离，实现结构与行为的分离。