Javascript DOM编程艺术读书笔记7

发表于 | 分类于 ，

第7章 动态创建标记

  • document.write的最大缺点是它违背了”行为应该与表现分离”的原则
  • MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。

图片库二次改进

  • 问题：在原本的Xhtml文件中有一个图片和一段文字仅仅是为showPic脚本服务的

    1
    2
    3
    <img id="placeholder" src="images/placeholder.gif"/>
    <p id="description">Choose an image</p>
    <script src="scripts/showPic.js">

  • 解决方法：结构和行为应该彻底分开，元素的存在只是让DOM方法处理他们，那么用DOM方法创建他们才是最合适的选择。

showPic.js含有五个函数

  • addLoadEvent:通用型函数，在页面加载完毕时执行的函数
  • insertAfter:通用型函数，在现有元素后面插入一个新元素
  • preparePlaceholder:负责创建一个img和一个p元素，把新创建的函数插入到节点数里图片库清单的后面
  • prepareGallery:遍历处理图片库清单里的每个链接
  • showPic:当用户点击这些链接中的某一个时，就调用该函数。

gallery.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" type="text/css" href="styles/layout.css" media="screen">
</head>

<body>
<h1>Snapshots</h1>
<ul id="imagegallery">
    <li>
        <a href="images/1.jpg" title="A fireworks display"><img src="images/1.jpg" alt="fireworks"></a>
    </li>
    <li>
        <a href="images/2.jpg" title="A cup of black coffee"><img src="images/2.jpg" alt="coffee"></a>
    </li>
    <li>
        <a href="images/3.jpg" title="A red, red rose"><img src="images/3.jpg" alt="rose"></a>
    </li>
</ul>
<script src="scripts/showPic.js"></script>
</body>
</html>

showPic.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
addLoadEvent(prepareGallery);
addLoadEvent(preparePlaceholder);

function addLoadEvent(func) {
    //把现有的window.onload事件梳理函数的值存入变量oldonload
    var oldonload = window.onload;
    //如果这个处理函数上还没有绑定任何函数，就把新函数添加给她
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        //如果已经绑定了一些函数，就把新函数追加到现有指令的末尾
        window.onload = function () {
            oldonload();
            func();
        }
    }
}

function prepareGallery() {
    //1.检查点。不理解DOM方法的浏览器不执行这个函数
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById) return false;
    //即使html页面中删除图片库，js代码也不会出错。JS代码不应该对网页的结构有任何依赖
    if (!document.getElementById("imagegallery")) return false;
    //imagegallery中的所有链接
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a");
    //遍历
    for (var i = 0; i < links.length; i++) {
        //定义一个匿名函数
        links[i].onclick = function () {
            //this指的是links[i]。如果showPic(this)返回true，就返回false，浏览器不会打开那个链接。如果showPic(this)返回false,就返回true以允许默认行为发生
            return showPic(this) ? false : true;

        }
    }
}

function showPic(whichpic) {
    //检查特定的placeholder元素是否存在
    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);
    //如果description元素存在，将会被更新，如果不存在就会被忽略。
    if (document.getElementById("description")) {
        //如果title属性存在，text将被赋值为whichpic.getAttribute("title")，如果不存在就是空字符串
        var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";
        var description = document.getElementById("description");
        //description元素的第一个子元素是否是一个文本节点
        if (description.firstChild.nodeType == 3) {
            description.firstChild.nodeValue = text;
        }
    }
    return true;
}

function insertAfter(newElement, targetElement) {
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        //如果是最后一个元素，就把新元素追加到parent元素上
        parent.appendChild(newElement);
    } else {
        //如果不是最后一个元素，就把新元素插入到目标元素的下一个兄弟元素之前
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

function preparePlaceholder() {
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementById) return false;
    if (!document.getElementById("imagegallery")) return false;
    var placeholder = document.createElement("img");
    placeholder.setAttribute("id", "placeholder");
    placeholder.setAttribute("src", "images/placeholder.gif");
    placeholder.setAttribute("alt", "my image gallery");
    var description = document.createElement("p");
    description.setAttribute("id", "description");
    var desctext = document.createTextNode("Choose an image");
    description.appendChild(desctext);
    var gallery = document.getElementById("imagegallery");
    insertAfter(placeholder, gallery);
    insertAfter(description, placeholder);
}

layout.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    font-family: "Helvetica", "Arial", serif;
    color: #333;
    background-color: #ccc;
    margin: 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;
}

#imagegallery {
    list-style: none;
}

#imagegallery li{
    display: inline;
}

#imagegallery li a img {
    width: 10em;
    height: 10em;
    border: 0;
}