第八章 DOM和浏览器中的模式

• 内容 即HTML文档
• 表现 指定文档样式的CSS
• 行为 JavaScript，用来处理用户交互和页面的动态变化

• 在关掉CSS的情况下测试页面，看页面是否仍然可用，内容是否可以呈现和阅读
• 在关掉JavaScript的情况下测试页面，确保页面仍然可以完成它的主要功能，所有的链接都可以正常工作（没有href="#"的链接），表单仍然可以正常填写和提交
• 不要使用内联的事件处理（如onclick）或者是内联的style属性，因为它们不属于内容层
• 使用语义化的HTML元素，比如头部和列表等

// antipattern
if (navigator.userAgent.indexOf('MSIE') !== −1) {
    document.attachEvent('onclick', console.log);
}
// better
if (document.attachEvent) {
    document.attachEvent('onclick', console.log);
}
// or even more specific
if (typeof document.attachEvent !== "undefined") {
    document.attachEvent('onclick', console.log);
}

• 避免在环境中访问DOM
• 将DOM引用赋给本地变量，然后操作本地变量
• 当可能的时候使用selectors API
• 遍历HTML collections时缓存length（见第2章）

// antipattern
for (var i = 0; i < 100; i += 1) {
    document.getElementById("result").innerHTML += i + ", ";
}
// better - update a local variable var i, content = "";
for (i = 0; i < 100; i += 1) {
    content += i + ",";
}
document.getElementById("result").innerHTML += content;

// antipattern
var padding = document.getElementById("result").style.padding,
    margin = document.getElementById("result").style.margin;
// better
var style = document.getElementById("result").style,
    padding = style.padding,
    margin = style.margin;

document.querySelector("ul .selected");
document.querySelectorAll("#widget .class");

// antipattern
// appending nodes as they are created
var p, t;
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
document.body.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
document.body.appendChild(p);

var p, t, frag;
frag = document.createDocumentFragment();
p = document.createElement('p');
t = document.createTextNode('first paragraph');
p.appendChild(t);
frag.appendChild(p);
p = document.createElement('p');
t = document.createTextNode('second paragraph');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);

var oldnode = document.getElementById('result'),
    clone = oldnode.cloneNode(true);
// work with the clone...
// when you're done:
oldnode.parentNode.replaceChild(clone, oldnode);

<button id="clickme">Click me: 0</button>

// suboptimal solution
var b = document.getElementById('clickme'),
    count = 0;
b.onclick = function () {
    count += 1;
    b.innerHTML = "Click me: " + count;
};

var b = document.getElementById('clickme');
if (document.addEventListener) { // W3C
    b.addEventListener('click', myHandler, false);
} else if (document.attachEvent) { // IE
    b.attachEvent('onclick', myHandler);
} else { // last resort
    b.onclick = myHandler;
}

function myHandler(e) {
    var src, parts;
    // get event and source element
    e = e || window.event;
    src = e.target || e.srcElement;
    // actual work: update label
    parts = src.innerHTML.split(": ");
    parts[1] = parseInt(parts[1], 10) + 1;
    src.innerHTML = parts[0] + ": " + parts[1];
    // no bubble
    if (typeof e.stopPropagation === "function") {
    e.stopPropagation();
    }
    if (typeof e.cancelBubble !== "undefined") {
    e.cancelBubble = true;
    }
    // prevent default action
    if (typeof e.preventDefault === "function") {
    e.preventDefault();
    }
    if (typeof e.returnValue !== "undefined") {
    e.returnValue = false;
    }
}

• 首先，我们需要访问事件对象，它包含事件的一些信息以及触发这个事件的页面元素。事件对象会被传到事件处理回调函数中，但是使用onclick属性时需要使用全局属性window.event来获取。
• 第二部分是真正用于更新文字的部分
• 接下来是阻止事件冒泡。在这个例子中它不是必须的，但通常情况下，如果你不阻止的话，事件会一直冒泡到文档根元素甚至window对象。同样的，我们也需要用两种方法来阻止冒泡：W3C标准方式（stopPropagation()）和IE的方式（使用cancelBubble）
• 最后，如果需要的话，阻止默认行为。有一些事件（点击链接、提交表单）有默认的行为，但你可以使用preventDefault()（IE是通过设置returnValue的值为false的方式）来阻止这些默认行为。

<div id="click-wrap">
    <button>Click me: 0</button>
    <button>Click me too: 0</button>
    <button>Click me three: 0</button>
</div>

// ...
// get event and source element
e = e || window.event;
src = e.target || e.srcElement;
if (src.nodeName.toLowerCase() !== "button") {
    return;
}
// ...

Y.delegate('click', myHandler, "#click-wrap", "button");

function myHandler(e) {
    var src = e.currentTarget,
        parts;
    parts = src.get('innerHTML').split(": ");
    parts[1] = parseInt(parts[1], 10) + 1;
    src.set('innerHTML', parts[0] + ": " + parts[1]);
    e.halt();
}

1毫秒（甚至0毫秒）的延迟执行命令在实际运行的时候会延迟更多，这取决于浏览器和操作系统。设定0毫秒的延迟并不意味着马上执行，而是指“尽快执行”。比如，在IE中，最短的延迟是15毫秒。

var ww = new Worker('my_web_worker.js');
ww.onmessage = function (event) {
    document.body.innerHTML +=
        "<p>message from the background thread: " + event.data + "</p>";
};

var end = 1e8, tmp = 1;
postMessage('hello there');
while (end) {
    end -= 1;
    tmp += end;
    if (end === 5e7) { // 5e7 is the half of 1e8
        postMessage('halfway there, `tmp` is now ' + tmp);
    }
}
postMessage('all done');

message from the background thread: hello there
message from the background thread: halfway there, `tmp` is now 3749999975000001 message from the background thread: all done

1. 初始化一个XMLHttpRequest对象（简称XHR）
2. 提供一个回调函数，供请求对象状态改变时调用
3. 发送请求

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = handleResponse;

xhr.open("GET", "page.html", true);
xhr.send();

var i, xhr, activeXids = [
    'MSXML2.XMLHTTP.3.0',
    'MSXML2.XMLHTTP',
    'Microsoft.XMLHTTP'
];
if (typeof XMLHttpRequest === "function") { // native XHR
    xhr = new XMLHttpRequest();
} else { // IE before 7
    for (i = 0; i < activeXids.length; i += 1) {
        try {
            xhr = new ActiveXObject(activeXids[i]);
            break;
        } catch (e) {}
    }
}
xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) {
        return false;
    }
    if (xhr.status !== 200) {
        alert("Error, status code: " + xhr.status);
        return false;
    }
    document.body.innerHTML += "<pre>" + xhr.responseText + "<\/pre>"; };
xhr.open("GET", "page.html", true);
xhr.send("");

• 因为IE6及以下版本中，创建XHR对象有一点复杂，所以我们通过一个数组列出ActiveX的名字，然后遍历这个数组，使用try-catch块来尝试创建对象。
• 回调函数会检查xhr对象的readyState属性。这个属性有0到4一共5个值，4代表“complete”（完成）。如果状态还没有完成，我们就继续等待下一次readystatechange事件。
• 回调函数也会检查xhr对象的status属性。这个属性和HTTP状态码对应，比如200（OK）或者是404（Not found）。我们只对状态码200感兴趣，而将其它所有的都报为错误（为了简化示例，否则需要检查其它不代表出错的状态码）。
• 上面的代码会在每次创建XHR对象时检查一遍支持情况。你可以使用前面提到过的模式（如条件初始化）来重写上面的代码，使得只需要做一次检查。

• XML文档（过去很常用）
• HTML片段（很常用）
• JSON数据（轻量、方便）
• 简单的文本文件及其它

http://example.org/getdata.php?callback=myHandler

var script = document.createElement("script");
script.src = url;
document.body.appendChild(script);

myHandler({"hello": "world"});

<button id="new">New game</button>
<button id="server">Server play</button>

<td id="cell-1"> </td>
<td id="cell-2"> </td>
<td id="cell-3"> </td>
...

var ttt = {
    // cells played so far
    played: [],
    // shorthand
    get: function (id) {
        return document.getElementById(id);
    },
    // handle clicks
    setup: function () {
        this.get('new').onclick = this.newGame;
        this.get('server').onclick = this.remoteRequest;
    },
    // clean the board
    newGame: function () {
        var tds = document.getElementsByTagName("td"),
            max = tds.length,
            i;
        for (i = 0; i < max; i += 1) {
            tds[i].innerHTML = " ";
        }
        ttt.played = [];
    },
    // make a request
    remoteRequest: function () {
        var script = document.createElement("script");
        script.src = "server.php?callback=ttt.serverPlay&played=" + ttt.played.join(',');
        document.body.appendChild(script);
    },
    // callback, server's turn to play
    serverPlay: function (data) {
        if (data.error) {
            alert(data.error);
            return;
        }
        data = parseInt(data, 10);
        this.played.push(data);
        this.get('cell-' + data).innerHTML = '<span class="server">X<\/span>';
        setTimeout(function () {
            ttt.clientPlay();
        }, 300); // as if thinking hard
    },
    // client's turn to play
    clientPlay: function () {
        var data = 5;
        if (this.played.length === 9) {
            alert("Game over");
            return;
        }
        // keep coming up with random numbers 1-9
        // until one not taken cell is found
        while (this.get('cell-' + data).innerHTML !== " ") {
            data = Math.ceil(Math.random() * 9);
        }
        this.get('cell-' + data).innerHTML = 'O';
        this.played.push(data);
    }
};

ttt.serverPlay({"error": "Error description here"});

ttt.serverPlay(3);

new Image().src = "http://example.org/some/page.php";

• 在部署前多了一步操作，但这很容易使用命令行自动化工具来做，比如使用Linux/Unix的cat：

    $ cat jquery.js jquery.quickselect.js jquery.limit.js > all.js
  

• 失去一些缓存上的便利——当你对某个文件做了一点小修改之后，会使得整个合并后的代码缓存失效。所以比较好的方法是为大的项目设定一个发布计划，或者是将代码合并为两个文件：一个包含可能会经常变更的代码，另一个包含那些不会轻易变更的“核心”。
• 你需要处理合并后文件的命名或者是版本问题，比如使用一个时间戳all_20100426.js或者是使用文件内容的hash值。

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/javascript application/json

ExpiresActive On
ExpiresByType application/x-javascript "access plus 10 years"

• Google托管了很多流行的开源库，你可以免费使用，并从它的CDN中得到速度提升（译注：鉴于Google在国内的尴尬处境，不建议使用）
• 微软托管了jQuery和自家的AJAX库
• 雅虎在自己的CDN上托管了YUI库

// option 1
<script>
console.log("hello world"); </script>
// option 2
<script src="external.js"></script>

• language="JavaScript"：还有一些不同大小写形式的“JavaScript”，有的时候还会带上一个版本号。language属性不应该被使用，因为默认的语言就是JavaScript。版本号也不像想象中工作得那么好，这应该是一个设计上的错误。
• type="text/javascript"：这个属性是HTML4和XHTML1标准所要求的，但它不应该存在，因为浏览器会假设它就是JavaScript。HTML5不再要求这个属性。除非是要强制通过难，否则没有任何使用type的理由。
• defer：（或者是HTML5中更好的async）是一种指定浏览器在下载外部脚本时不阻塞页面其它部分的方法，但还没有被广泛支持。关于阻塞的更多内容会在后面提及。

<!doctype html>
<html>
<head>
    <title>My App</title>
    <!-- ANTIPATTERN -->
    <script src="jquery.js"></script>
    <script src="jquery.quickselect.js"></script>
    <script src="jquery.lightbox.js"></script>
    <script src="myapp.js"></script>
</head>
<body>
    ...
</body>
</html>

<!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script>
</head>
<body>
    ...
</body>
</html>

<!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    ...
    <script src="all_20100426.js"></script>
</body>
</html>

<!doctype html>
<html>
<head>
    <title>My App</title>
</head>
<!-- end of chunk #1 -->
<body>
    ...
    <script src="all_20100426.js"></script> </body>
</html>
<!-- end of chunk #2 -->

<!doctype html>
<html>
<head>
    <title>My App</title>
    <script src="all_20100426.js"></script> </body>
</head>
<!-- end of chunk #1 -->
<body>
    ...
</html>
<!-- end of chunk #2 -->

<!doctype html> <html>
<head>
    <title>My App</title> </head>
<body>
    <div id="header">
        <img src="logo.png" />
        ...
    </div>
    <!-- end of chunk #1 -->
    ... The full body of the page ...
    <!-- end of chunk #2 -->
    <script src="all_20100426.js"></script>
</body>
</html>
<!-- end of chunk #3 -->

• 使用XHR加载脚本，然后作为一个字符串使用eval()来执行。这种方法受同源策略的限制，而且引入了eval()这种“反模式”。
• 使用defer和async属性，但有浏览器兼容性问题
• 使用动态\元素

var script = document.createElement("script");
script.src = "all_20100426.js";
document.documentElement.firstChild.appendChild(script);

var mynamespace = {
    inline_scripts: []
};

// was:
// <script>console.log("I am inline");</script>
// becomes:
<script>
    mynamespace.inline_scripts.push(function () {
        console.log("I am inline");
    });
</script>

var i, scripts = mynamespace.inline_scripts, max = scripts.length;
for (i = 0; i < max; max += 1) {
    scripts[i]();
}

document.documentElement.firstChild.appendChild(script);

document.getElementsByTagName("head")[0].appendChild(script);

document.body.appendChild(script);

var first_script = document.getElementsByTagName('script')[0];
first_script.parentNode.insertBefore(script, first_script);

• 一部分是页面初始化和绑定UI元素的事件处理函数必须的
• 第二部分是只在用户交互或者其它条件下才会用到的

    .. The full body of the page ...
    <!-- end of chunk #2 -->
    <script src="all_20100426.js"></script>
    <script>
    window.onload = function () {
        var script = document.createElement("script");
        script.src = "all_lazy_20100426.js";
        document.documentElement.firstChild.appendChild(script);
    };
    </script>
</body>
</html>
<!-- end of chunk #3 -->

require("extra.js", function () {
    functionDefinedInExtraJS();
});

function require(file, callback) {
    var script = document.getElementsByTagName('script')[0], newjs = document.createElement('script');
    // IE
    newjs.onreadystatechange = function () {
        if (newjs.readyState === 'loaded' || newjs.readyState === 'complete') {
            newjs.onreadystatechange = null;
            callback();
        }
    };
    // others
    newjs.onload = function () {
        callback();
    };
    newjs.src = file;
    script.parentNode.insertBefore(newjs, script);
}

• 在IE中需要订阅readystatechange事件，然后判断状态是否为“loaded”或者“complete”。其它的浏览器会忽略这里。
• 在Firefox，Safari和Opera中，通过onload属性订阅load事件。
• 这个方法在Safari 2中无效。如果必须要处理这个浏览器，需要设一个定时器，周期性地去检查某个指定的变量（在脚本中定义的）是否有定义。当它变成已定义时，就意味着新的脚本已经被加载并执行。

<?php
header('Content-Type: application/javascript');
sleep(1);
?>
function extraFunction(logthis) {
    console.log('loaded and executed');
    console.log(logthis);
}

require('ondemand.js.php', function () {
    extraFunction('loaded from the parent page');
    document.body.appendChild(document.createTextNode('done!'));
});

new Image().src = "preloadme.js";

var obj = document.createElement('object');
obj.data = "preloadme.js";
document.body.appendChild(obj);

var preload;
if (/*@cc_on!@*/false) { // IE sniffing with conditional comments
    preload = function (file) {
        new Image().src = file;
    };
} else {
    preload = function (file) {
        var obj = document.createElement('object'),
            body = document.body;
        obj.width = 0;
        obj.height = 0;
        obj.data = file;
        body.appendChild(obj);
    };
}

preload('my_web_worker.js');

浏览器嗅探中使用条件注释很有意思，这明显比在navigator.userAgent中找字符串要安全得多，因为用户可以很容易地修改这些字符串。 比如： var isIE = /@cc_on!@ /false; 会在其它的浏览器中将isIE设为false（因为忽略了注释），但在IE中会是true，因为在条件注释中有取反运算符!。在IE中就像是这样： var isIE = !false; // true

• 分离的思想（HTML：内容，CSS：表现，JavaScript：行为），只用于增强体验的JavaScript以及基于特性检测的浏览器探测。（尽管在本章的最后你看到了如何打破这个模式。）
• DOM编程——加速DOM访问和操作的模式，主要通过将DOM操作集中在一起来实现，因为频繁和DOM打交道代码是很高的。
• 事件，跨浏览器的事件处理，以及使用事件代码来减少事件处理函数的绑定数量以提高性能。
• 两种处理长时间大计算量脚本的模式——使用setTimeout()将长时间操作拆分为小块执行和在现代浏览器中使用Web workers。
• 多种用于远程编程，进行服务器和客户端通讯的模式——XHR，JSONP，框架和图片信标。
• 在生产环境中部署JavaScript的步骤——将脚本合并为更少的文件，压缩和gzip（总共节省85%），可能的话托管到CDN并发送Expires头来提升缓存效果。
• 基于性能考虑引入页面脚本的模式，包括：放置\元素的位置，同时也可以从HTTP分块获益。为了减少页面初始化时加载大的脚本文件引起的初始化工作量，我们讨论了几种不同的模式，比如延迟加载、预加载和按需加载。