读书笔记 JavaScipt DOM编程艺术（第二版）

感谢孙恒哲学长，让我有幸能看到这本书。

这篇博客包含很多原文摘录，它们是杂乱而不必要的。

---

章节简介

1 JavaScript简史
2 JavaScript语法
3 DOM
4 案例研究：JavaScript图片库
5 最佳实践
6 案例研究：图片库改进版
7 动态创建标记
8 充实文档内容
9 CSS-DOM
10 用JavaScript实现动画效果
11 HTML5
12 综合实例

---

英文

    arguments 参数    scope   作用域    CDN(content delevery newwork） 内容分发网络，可以解决分布共享库的问题。CDN就是一个由服务器构成的网络，这个网络的用途就是分散储存一些公共的内容。CDN中的每台服务器都包含库的一份副本，这些服务器分布在世界上不同的国家，以便达到利用宽带和加快下载的目的。浏览器访问库的时候使用一个公共的URL，而CDN的底层则通过地理位置最近和最快的服务器提供相应的文件，从而解决了整个系统的瓶颈问题。 

第二章 JavaScript语法

什么是DOM

简单的说，DOM(document object model)是一套文档的内容进行抽象和概念化的方法，一套用于HTML应用程序编程的API。我将DOM理解为一个抽象的文本地图。

大致了解JavaScript

程序设计语言分为解释型和编译型两大类，JAVA和C++等语言需要一个编译器（compiler）。编译器是一种程序，能够把用Java等高级语言编写出来的源代码翻译为直接在计算机上执行的。

解释型程序设计语言不需要编译器——它们仅需要解释器。对于JavaScript语言，在互联网环境下，Web浏览器负责完成有关的解释和执行工作。刘拉你中的JavaScript解释器将直接读入源代码并执行。浏览器中没有解释器。JavaScript代码就无法执行。

语法是啥

语法是约定的说话规则，避免表达存在二义性。

JavaScript是弱类型的动态语言
JavaScript中用\进行转义

好习惯：

• 用双引号来抱哈字符串。一会选择用单引号一会儿选择用双引号将会使代码变得难以阅读和理解。 在if语句中总是使用花括号。
• 总是使用===、!==而不是== != 如果你总是在函数里使用var关键字来定义变量，就能避免任何形式的二义性隐患。

关联数组声明

lennon=Array();lennon[“year”]=”1940”;lennon[“name”]=”John”;

对象声明

var lenon = {name:”john”,year:1940,living:false};

简单的运算转换

1 +“a” =”1a”
1 + “1” =”11”
1 - “1” = 0
1 * “a” = NaN
1 * “1” = 1
1 / “1” = 1

注意

赋值操作并不一定总是返回true if(a=false){alert hello world;}

JavaScript的对象分类

• 用户定义对象
• 内建对象
• 宿主对象

宿主对象不是由JavaScript语言本身而是由他的运行环境提供的。具体到web应用就是浏览器

第三章

Model的定义都是某种事物的表现形式 DOM代表着加载到浏览器窗口当前的网页，浏览器提供了网页的地图（或者说模型，而我们可以通过JavaScript去读取这张地图

DOM把一份文档表示为一颗节点树。节点表示网络中的一个连接点，DOM中包含三种节点，元素节点、文本节点和属性节点。

ID属性就像是一个挂钩，它一头廉贞文档里的某个元素，另一头连接着CSS样式表里的某个样式。DOM也可以使用这种挂钩。

JavaScript数据类型

String Number Boolean Object Null Undefined

DOM中每一个元素都是一个对象

每个文档是一个节点树，节点的最小单位是元素，JavaScript认为元素是对象，对象有属性和方法。

一个值得关注的细节

通过setAttribute对文档做出修改后，在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是改变前的属性值，也就是说，色图Attribute做出的修改不会反应在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力：对页面内容进行刷新却不需要在浏览器里刷新页面。

第四章

事件处理函数

事件处理函数的作用是，在特定事件发生时调用特定的JavaScript代码，处理完成后会返回一个boolean值。
event = “JavaScript statement(s)”

ChildNodes

NodeType属性

1. 元素节点
2. 属性节点
3. 文本节点

第五章

质疑一切

如果要使用JavaScript，就要确认：这么做对用户的浏览器体验产生了怎样的影响？还有个更重要的问题：如果用户的浏览器不支持JavaScript该怎么办
>

平稳退化

graceful degradation。即使在禁用了JavaScript时，网站的主要内容仍然可以正常访问。

渐进增强

所谓的渐进增强就是用一些额外的信息层去包裹原始数据。

window.open（URL，url，features）

features是新窗口的各种属性。这些属性包含新窗口的尺寸以及新窗口被启用或禁用的各种功能。对于这个参数应该掌握以下原则：新窗口的浏览功能要少而精。

                eg. function popUp(winURL)                {window.open(winURL,"popUP","width=320.height=480")；}

为什么强调平稳退化

或许你对我凡物强调“平稳退化”有些不解，让那些不支持或禁用了JavaScript功能的浏览器能顺利访问你的网站真的重要吗？是的这个用户是一个搜索机器人

eg.

<a href = "www.xx.com" onclick="popUp(this.href)";return false;></a>

对象检测

确保那些“古老的”浏览器不会因为脚本代码而出问题。这么做是为了让脚本有良好的向后兼容性。

尽量少访问DOM和尽量减少标记

合并和放置脚本

位于块中的脚本会导致浏览器无法并行加载其他文件。一般来说，根据HTTP规范，浏览器每次从同一个域名中最多只能同时下载两个文件。而在下载期间，浏览器不会下载其他任何文件，即使是来自不同域名的文件也不会下载，所有资源都要等脚本加载完毕后才能下载。

建议

多数情况下你，你应该有两个版本，一个是工作副本，可以修改代码添加注释；另一个是精简版本，用于放在站点上。

第六章

结构化程序设计中有这样一条原则：函数应该只有一个入口和一个出口。但在实际过程中，如果一个函数有多个出口，只要这些出口出现在函数的开头部分，就是可以接受的。

共享onload事件

    function addLoadEvent(func){    var onload = window.onload;       if(typeof(onload != 'function')){            window.onload = func;            }        else{            onload();            func();            }        }

nodeName属性总是返回一个大写的值，即使元素在HTML文档里是小写字母。

第七章

InnerHTLM属性

这个实行并不是W3C DOM标准的组成部分，但现在已经包含到HTML5规范中。它始见于IE4，并从那时起逐渐被其他浏览器接受。是HTML DOM的专业属性

DOM是一条双向车道，不仅可以获取文档的内容，还可以更新文档的内容。如果你改变你了DOM节点树，文档就在浏览器的呈现效果就会发生表换。不过DOM方法并不能改变文档的物理内容，如果用文本编辑器打开将看不到任何变化。这是因为浏览器时间显示的是那棵DOM节点树。在浏览器看来，DOM节点树才是文档。

AJAX技术

function getHTTPObject(){    if(typeof XMLHTTPRequest == "undefined")    XMLHttPRequest = function(){    try{ return new ActiveXObject("Msxml2.XMLHTTP.6.0");}        catch (e){}    try{ return new ActiveXObject("Msxml2.XMLHTTP.3.0");}        cathc (e){}    try{ return new ActiveXObject("Msxml2.XMLHTTP");}           cathc (e){}    return false;    }    return new XMLHttpRequest();}function getNewContent(){var request = getHttpRequest();if(request){    request.open("GET","URL","true")    request.onreadystatechange = function(){        if(requset.readystate == 4){            dosomething();        }    };request.send(something..);}else{alert("sorry, not support for XMLHttpRequest");}}

readyState属性

有五个可能值：

• 表示未初始化
• 表示正在加载
• 表示加载完成
• 表示正在交互
• 表示完成

ajax的利与弊

ajax应用的一个特点就是减少重复加载页面的次数，但是这种缺少状态记录的技术会与浏览器的一些使用惯例产生冲突，导致用户无法使用后退按钮或者为特堵部分状态下的页面添加书签。为此，Web设计人员必须在向服务器发出请求和服务器返回响应时，给用户明确的提示。构建成功Ajax应用的关键在于将Ajax功能看做一般的JavaScript增强功能，在平稳退化的基础上寻求渐进增强。

Hijax

渐进增强的Ajax。XMLHttpRequest 实际上是服务器和浏览器之间的“中间人”，它只负责传递请求和响应。如果把这个中间人去掉，浏览器和服务器之间的响应和请求应该继续完成而不是终止。

第八章

不应该做什么

理论上，你可以用JavaScript把一些重要的内容添加到网页上。事实上这是一个坏主意，因为这样一来JavaScript就没有任何空间去平稳退化。第五章我们讨论过，下面两项原则一定要牢记在心。

渐进增强。

基于这样一种思想：你应该总是从最核心的部分，也就是内容开始。应该根据内容使用标记实现良好的结构，然后再逐步加强这些内容。

平稳退化。

实现渐进增强必然是支持平稳退化的，如果你按照渐进增强的原则去充实内容，你为内容添加的样式和行为就自然自持平稳退化。不支持JavaScript就看不到内容，这好像是一种限制，其实不是，利用DOM去生成内日用有着广泛的用途。

注意

一个换行符在有的浏览器会被解释为一个文本节点。在编写DOM脚本时，你会想当然的认为某个节点肯定是一个元素节点，这是一种相当常见的错误，如果没用百分之百的把握就在一定要去检查Nodetype的属性。

第九章

好习惯

对函数进行抽象。不论你何时发现可想对某个函数进行抽象，都应该马上去做，这种事一个好主意。

第十章

取整函数

• parseInt(“11 steps”)
• Math.ceil(“11.2”)/向上取整
• Math.floor(“11.2”)/向下取整
• Math.round(“1.2”)/四舍五入

使用动画

W3C在他们的Web Content Accessbility Guidelines 7.2节中给出了这样建议：“除非浏览器用户允许冻结移动着的内容，否则就应该避免让内容再页面中移动”

overflow

overflow属性的四个可能取值：visible、hidden、scroll、auto
visible：不裁剪溢出的内容。hidden：隐藏溢出的内容。scroll：浏览器将对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够看到内容的其他部分。auto：类似于scroll，不过只有在有溢出时才显示滚动条。

clearTimeout（）

运用clearTimeout()函数清空settimeout中的函数。

第十一章

Web中的三层结构

结构层、样式层、行为层对应三种不同技术HTML、CSS、JavaScript和DOM

HTML5的三层结构。

H5的到来，让上面所说的三层结构被整装到一个小集合中。H5在这个集合中提供了几种旗鼓相当的技术，让我们去调用。

Canvas

Canvas的优势在于，基于用户的操作可以与图片产生交互。

audio和video

不同浏览器使用不同解编码器，为了保证兼容性，使用video时至少应该包含以下三个版本

• 基于H.264和AAC的MP4
• WebM(VP8+Vorbis)
• 基于Theora视频和Vorbis音频的Ogg文件
• 为了兼容IOS4之前版本的Safari，应当把MP4格式放在最前面

eg.

    <vidio id="movie" reload controls>    <source src ="movie.mp4"/>    <source src ="movie.webm" type='video/webm;codes="vp8,voribs"'/>    <source src ="movie.ogv" type ='video/ogg; codes="theora,vorbis"'/>    <p>        Dowm movie as        <a href="movie.mp4">MP4</a>        <a href="movie.webm">WEBM</a>        <a href="movie.ogv">Ogg</a>    </p>    </video>`

addEventListener(Event,func,useCapture)

useCapture是一个boolean值，true事件句柄在捕获阶段执行，false表示在冒泡阶段执行
addEventListener是一个DOM Level2事件，无返回值。IE8以前不支持不兼容，改用attachEvent（）

检查特定的属性，可以使用下面这个函数

function elementSuppportcheck(elementName,attribute){    if(!document.createElement) return false;        var temp = document.createElement(elementName);            return(attribute in temp);  }    

Html5还有其他特性吗？

WebSocket与服务器端脚本进行开放的双向通信
使用Web Worker在后台执行JavaScript
标准化的的拖放实现
在浏览器中实现地理位置服务
W3C HTML5 Working Draft
使用localStorage和sessionStorage在客户端储存大型和复杂的数据集
更多的表单属性

第十二章

造轮子 一些常用的函数实行

添加onload事件

    addLoadEvent(func){        var oldLoad = window.onload;                    if(type of window.onload != 'function'){            window.onload = func;//如果onLoad没有绑定事件，那么就绑定为func        }           else{        window.onload = function(){//如果已经绑定了一个事件，那么就在旧事件执行后执行func            oldonload();            func();            }        }    }

在目标节点后添加元素

    insertAfter(newElement,targetElement){        var parent = targetElement.parentNode;        if(parent.lastNode == targetNode){//如果目标节点是父节点的最后节点，添加新元素到父节点末尾            parent.appendChild(newElement);        }        else{//如果不是，就添加到目标节点下一个节点的前面            parent.insertBefore(newElement,targetElement.nextSibling);        }    }`

我从《JavaScript DOM编程艺术》中学到了什么：

JavaScript无疑是一本面向入门开发者的绝佳指南，虽然只是笼统地介绍了DOM,CSS,JavaScript，Ajax，动画，标签，兼容性等内容。但系统的讲解并不是作者的打算。作者真正通过这本书真正想表达的可以很好的用八个字总结：渐进增强，平稳退化。可以粗略解释为：在构建一个网站时应当利用合理的标签形成结构，填充主要内容。然后再利用CSS和JavaScript为网站添加额外的信息和交互。即使用户禁用了JavaScript，仍然可以正常的访问网站的主要内容。