《JavaScript DOM 编程艺术》-- 总结

今天看完了JavaScript DOM 编程艺术，大概是用了三个星期的时间陆陆续续看完的。
这本书关于JavaScript的知识点不多，但是展现的确实和标题一样，着重的是结构分离和平稳退化的思想，对于刚入门的新手，可以很好地建立良好的编程意识。下面总结一下。

平稳退化

书中以**如果JavaScript功能被禁用，会怎么样？**的假设引出，以点击链接在相应位置显现图片为例子，若禁用，如何使功能平稳退化，如以下代码，JavaScript禁用后，点击a链接将会报错，没有变化。

<li>
    <a href="javascript:showPic('images/coffe.jpg');return false;" title="A cup of coffee">Coffee</a>
</li>

提出将href改成图片地址，使用onClick函数进行跳转，即使JavaScript功能禁用也可以根据图片地址进行跳转，虽然展示方示不同，但用户体验效果还是较好的，总不能不给用户给予显示。改后的代码如下

<li>
    <a href="素材\pexels-mathilde-langevin-12032347.jpg" title="pictrue_1">pictrue1</a>
</li>

在之后作者的实例都会引导我们去思考，这个是否符合平稳退化，若不符合应当如何修改。
我在浏览了一些知名的网站的html源代码，我发现他们确实有做到了书中作者说的平稳退化。虽然在现在我所知的浏览器还没有禁用JavaScript的，但是不难保以后会出现什么样的情况呢。

标记分离

作者在几个章节中都提到了JavaScript和html的分离，即JavaScript和html的挂钩少且有极大用处，例如添加事件处理函数onClick，不在html文档中添用，而更多的是在JavaScript中找到这个元素后再进行绑定事件。像是下面的代码

<script>
    window.onload = function(){ //避免获取不到p元素
        var elem = document.getElementsByTagName("p");
        elem[0].onclick = function(){
            console.log("111");
        }
    }
</script>
<p id="test">hello!</p>

所以往往在编写代码时最好使用id或者class作为挂钩去连接html文档。但是也不能够为每一个元素都去添加id或者class，那就太冗余了，可以使用DOM方法去获取相应元素。

---

对于书上的总结就写到这里，下面我还想记录一下在看这本书时的疑惑和解释。

---

setTimeout函数

我在根据书上内容使用这个函数时发现，JavaScript他在执行到这个语句时，并不会等待这个语句传入参数的时间，而是继续往下执行，但是在相应时间过后，他的内容还是会相应执行，当时我的想法是会不会是开启了另一个线程后进行了一个等待队列，我就上网搜索，查看别人的博客，然后发现一个短短的函数后面有许多知识，涉及到一些我不懂的领域。。
但是我的猜测是正确的，贴一下别人的解释，先理解一下，后续学到更多知识应该就可以理解深层次的东西了。

浏览器渲染进程中所有运行在主线程上的任务都需要先添加到消息队列，然后事件循环系统再按照顺序执行消息队列中的任务。在 Chrome 中除了正常使用的消息队列之外，还有另外一个消息队列(我们可以称为延迟队列)，这个队列中维护了需要延迟执行的任务列表，包括了定时器和 Chromium 内部一些需要延迟执行的任务。所以当通过 JavaScript 创建一个定时器时，渲染进程会将该定时器的回调任务添加到延迟队列中。

结尾

上面就是我对这本书大致的总结，还是挺受益匪浅的，接下来我对自己的计划是学习JavaScript更高级的知识，下一本书是JavaScript高级程序教程，希望我可以做到一周一篇博客（作业、课设太多了。。）