JS高级程序设计-总结二

待我称王封你为后i 2024-04-20 00:42 52阅读 0赞

1.文档信息  
作为HTML Document的一个实例，document对象还有一些标准的Document对象所没有的属性。

URL属性中包含页面完整的URL（即地址栏中显示的URL），domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的URL。  
URL与domain属性时相互关联的。例如，如果document.URL等于http://www.wrox.com/WileyCDA/，那么document.domain就等于www.wrox.com。  
在这三个属性中，只有domain是可以设置的。但由于安全方面的限制，也并非可以给domain设置任何值。如果URL中只包含一个子域名，例如p2p.wrox.com，那么就只能将domain设置为“wrox.com”，不能将这个属性设置为URL中不包含的域。  
浏览器对domain属性还有一个限制，即如果域名一开始是“松散的”（loose），那么不能将它再设置为“紧绷的”（tight）。即，在将document.domain设置为“wrox.com”之后，就不能再将其设置回“p2p.wrox.com”，否则将会导致错误。

2.特殊集合  
除了属性和方法，document对象还有一些特殊的集合。这些集合都是HTML Collection对象，为访问文档常用的部分提供了快捷方式。

document.anchors，包含文档中所有带有name特性的```<a>```元素；
    document.links，包含文档中所有带有href特性的```<a>```元素

3.Element类型

可以像下面这样获取这个元素及其标签名：

var div=document.getElementById("myDiv");
    alert(div.tagName);//"DIV"
    alert(div.tagName==div.nodeName);//true

这里的元素标签名是div，它拥有一个值为"myDiv"的ID，可是div.tagName实际上输出的是“DIV”而非“div”。在HTML中，标签名始终都以全部大写表示；而在XML（有时候也包括XHTML）中，标签名则始终会与源代码中的保存一致。**最好是在比较之前将标签名转换为相同的大小写形式**，如下面的例子所示：

if(element.tagName=="div"){
        // 不能这样比较，很容易出错！
    	// 在此执行某些操作
    }
    if(element.tagName.toLowerCase()=="div"){
        // 这样最好（适用于任何文档）
    	// 在此执行某些操作
    }

4.HTML元素  
所有HTML元素都由HTMLElement类型表示，不是直接通过这个类型，也是通过它的子类型表示。HTMLElement类型直接继承自Element并添加了一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

id，元素在文档中的唯一标识符
    title，有关元素的附加说明信息，一般通过工具提示条显示出来
    lang，元素内容的语言代码，很少使用
    className，与元素的class特性对应，即为元素指定的CSS类。没有将这个属性命名为class，是因为class是ES的保留字

5.取得特性  
操作特性的DOM方法主要有三个，分别是getAttribute()、setAttribute()和removeAttribute()。

var div=document.getElementById("myDiv");
    alert(div.getAttribute("id"));//"myDiv"
    alert(div.getAttribute("class"));//"bd"
    alert(div.getAttribute("title"));//"bodeText"
    alert(div.getAttribute("lang"));//"en"
    alert(div.getAttribute("dir"));//"ltr"

注意，**传递给getAttribute()的特性名与实际的特性名相同。因此要想得到class特性值，应该传入“class”而不是“className”**，后者只有在通过对象属性访问特性时才有用。如果给定名称的特性不存在，getAttribute()返回null。

有两类特殊的特性，它们虽然有对应的属性名，但属性的值与通过getAttribute()返回的值并不相同。第一类就是**style**，用于通过CSS为元素指定样式。在通过getAttribute()访问时，返回的style特性值中包含的是CSS文本，而通过属性来访问它则会返回一个对象。由于style属性是用于以编程方式访问元素样式的，因此并没有直接映射到style特性。  
第二类与众不同的特性是**onclick这样的事件处理程序**。当在元素上使用时，onclick特性中包含的是JS代码，如果通过getAttribute()访问，则会返回相应代码的字符串。而在访问onclick属性时，则会返回一个JS函数（如果未在元素中指定相应特性，则返回null）。这是因为onclick及其他事件处理程序属性本身就应该赋予函数值。  
**由于存在这些差别，在通过JS以编程方式操作DOM时，开发人员经常不使用getAttribute()，而是只使用对象的属性。只有在取得自定义特性值的情况下，才会使用getAttribute()方法。**

6.事件流  
事件流描述的是从页面接受事件的顺序。IE和Netscape开发团队提出了完全相反的事件流的概念。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。

**事件冒泡：**  
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

**事件捕获：**  
NetScape Communicator团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于事件达到预定目标之前捕获它。

**DOM事件流：**  
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截取事件提供了机会，然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

7.事件处理程序  
事件就是用户或浏览器自身执行的某种动作。诸如click、load和mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，load事件的事件处理程序就是onload。为事件指定处理程序的方式有好几种。

**HTML事件处理程序：**  
某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JS代码。

当单机这个按钮时，就会显示一个警告框。这个操作是通过指定onclick特性并将一些JS代码作为它的值来定义的。由于这个值是JS，因此不能在其中使用未经转义的HTML字符，例如和好（&）、双引号（""）、小于号（<）或大于号（>）。为了避免使用HTML实体，这里使用了单引号。如果想要使用双引号，那么就要将代码改写成如下所示：

在HTML中指定事件处理程序有两个缺点。首先，**存在一个时差问题**。因为用户可能在HTML元素一出现在页面上就触发相应的事件，但当时的事件处理程序有可能尚不具备执行条件。  
另一个缺点是，\*\*这样扩展事件处理程序的作用域链在不同浏览器会导致不同结果。\*\*不同JS引擎遵循的标识符解析规则略有差异，很可能会在访问非限定对象成员时出错。

**DOM0级事件处理程序：**  
通过JS指定事件处理程序的传统方式，就是讲一个函数赋值给一个事件处理程序属性。要使用JS指定事件处理程序，首先必须取得一个要操作的对象的引用。  
在每个元素（包括window和document）都有自己的事件处理程序属性，这些属性通常全部小写，例如onclick。将这种属性的值设置为一个函数，就可以指定事件处理程序。

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        
    	alert("Clicked");
    };

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此，这时候的事件处理程序是在元素的作用域中运行；换句话说，程序中的this引用当前元素。

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        
    	alert(this.id);//"myBtn"
    };

实际上，可以在事件处理程序中通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。  
也可以删除通过DOM0级方法指定的事件处理程序，只要像下面这样将事件处理程序属性的值设置为null即可：

btn.onclick=null;//删除事件处理程序

**DOM2级事件处理程序：**  
“DOM2级事件”定义了两个方法用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

var btn=document.getElementById("myBtn");
    btn.addEvebtListener("click",function(){
        
    	alert(this.id);
    },false);

与DOM0级方法一样，这里添加的事件处理程序也是在其依附的元素的作用域中运行。**使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序**。

var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        
    	alert(this.id);
    },false);
    btn.addEventListener("click",function(){
        
    	alert("Hello world!");
    },false);

这里为按钮添加了两个事件处理程序，**这两个事件处理程序会按照添加它们的顺序触发**，因此首先会显示元素的ID，其次会显示“Hello world!”消息。

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除是传入的参数与添加处理程序时使用的参数相同。这也意味着**通过addEventListener()添加的匿名函数将无法移除。**

var btn=document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        
    	alert(this.id);
    },false);
    // 这里省略了其他代码
    btn.removeEventListener("click",function(){
        // 没有用！
    	alert(this.id);
    },false);

在这个例子中，使用addEventListener()添加了一个事件处理程序。虽然调用removeEventListener()是看似使用了相同的参数，但实际上，第二个参数与传入addEventListener()中的那一个是完全不同的函数。

var btn=document.getElementById("myBtn");
    var handler=function(){
        
    	alert(this.id);
    };
    btn.addEventListener("click",handler,false);
    // 这里省略了其他代码
    btn.removeEventListener("click",handler,false);// 有效

**IE事件处理程序：**  
IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        
    	alert("Clicked");
    });

注意，**attachEvent()的第一个参数是“onclick”，而非DOM的addEventListener()方法中的“click”。**

**在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此this等于window。**

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        
    	alert(this===window);//true
    });

在编写跨浏览器的代码时，牢记这一区别非常重要。

与addEventListener()类似，attachEvent()方法也可以用来为一个元素添加多个事件处理程序。

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(){
        
    	alert("Clicked");
    });
    btn.attachEvent("onclick",function(){
        
    	alert("Hello world!");
    });

这里调用了两次attachEvent()，为同一个按钮添加了两个不同的事件处理程序。不过，与DOM方法不同的是，**这些事件处理程序不是以添加它们的顺序这些，而是以相反的顺序被触发**。单击这个例子中的按钮，首先看到的是“Hello world!”，然后才是“Clicked”。

使用attachEvent()添加的事件可以通过detachEvent()来移除，条件是必须提供相同的参数。与DOM方法一样，这也意味着**添加的匿名函数将不能被移除**。

**跨浏览器的事件处理程序**

8.事件对象  
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

**DOM中的事件对象：**  
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0级或DOM2级），都会传入event对象。

var btn=document.getElementById("myBtn");
    btn.onclick=function(event){
        	
    	alert(event.type);//"click"
    };
    btn.addEventListener("click",function(event){
        
    	alert(event.type);//"click"
    },false);

在通过HTML特性指定事件处理程序时，变量event中保存着对象。

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this.currentTarget和target包含相同的值。

var btn=document.getElementById("myBtn");
    btn.onclick=function(event){
         
    	alert(event.currentTarget===this);//true	
    	alert(event.target===this);//true
    };

这个例子检测了currentTarget和target与this的值。由于click事件的目标是按钮，因此这三个值是相等的。如果事件处理程序存在于按钮的父节点中（例如document.body），那么这些值是不相同的。

document.body.onclick=function(event){
        
    	alert(event.currentTarget===document.body);//true
    	alert(this===document.body);//true
    	alert(event.target===document.getElementById("myBtn"));//true
    };

当单击这个例子中的按钮时，this和currentTarget都等于document.body，因为事件处理程序是注册到这个元素上的。然而，target元素却等于按钮元素，因为它是click事件真正的目标。由于按钮上并没有注册事件处理程序，结果click事件就冒泡到了document.body，在那里事件才得到了处理。

要阻止特定事件的默认行为，可以使用preventDefault()方法。

var link=document.getElementById("myLink");
    link.onclick=function(event){
        	
    	event.preventDefault();
    };

只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。  
另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

var btn=document.getElementById("myBtn");
    btn.onclick=function(event){
        
    	alert("Clicked");
    	event.stopPropagation();
    };
    
    document.body.onclick=function(event){
        
    	alert("Body clicked");
    };

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1；如果事件处理程序处于目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase等于3。

只有在事件处理程序执行期间，event对象才会存在；一旦事件处理程序执行完成，event对象就会被销毁。

**IE中的事件对象：**  
与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        
    	var event=window.event;
    	alert(event.type);//"click"
    };

如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中。

var btn=document.getElementById("myBtn");
    btn.attachEvent("onclick",function(event){
        
    	alert(event.type);//"click"
    });

在像这样使用attachEvent()的情况下，也可以通过window对象来访问event对象，就像使用DOM0级方法一样。不过为方便起见，同一个对象也会作为参数传递。

如果通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问event对象（与DOM中的事件模型相同）。

因为事件处理程序的作用域是根据指定它的方式来确定的，所以不能认为this会始终等于事件目标。故而，最好还是使用event.srcElement比较保险。

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        
    	alert(window.event.srcElement===this);//true
    };
    
    btn.attachEvent("onclick",function(event){
        
    	alert(event.srcElement===this);//false
    });

returnValue属性相当于DOM中的preventDefault()方法，它们的作用都是取消给定事件的默认行为。只要将returnValue设置为false，就可以阻止默认行为。

var link=document.getElementById("myLink");
    link.onclick=function(){
        
    	window.event.returnValue=false;
    };

相应的，cancelBubble属性与DOM中的stopPropagation()方法作用相同，都是用来停止事件冒泡的。由于IE不支持事件捕获，因而只能取消事件冒泡；但stopPropagation()可以同时取消事假捕获和冒泡。

var btn=document.getElementById("myBtn");
    btn.onclick=function(){
        
    	alert("Clicked");
    	window.event.cancelBubble=true;
    };
    document.body.onclick=function(){
        
    	alert("Body clicked");
    };

9.文本框脚本  
在HTML中，有两种方式来表现文本框：一种是使用`<input>`元素的单行文本框，另一种是使用`<textarea>`的多行文本框。  
要表现文本框，必须将`<input>`元素的type特性设置为"text"。而通过设置size特性，可以指定文本框中能够显示的字符数。通过value特性，可以设置文本框的初始值，而maxlength特性则用于指定文本框可以接受的最大字符数。

相对而言，`<textarea>`元素则始终会显示为一个多行文本框。要指定文本框的大小，可以使用rows和cols特性。其中，rows特性指定的是文本框的字符行数，而cols特性指定的是文本框的字符列数。与`<input>`元素不同，`<textarea>`的初始值必须要放在`<textarea>`和`</textarea>`之间。

<textarea rows="25" cols="5">initial value</textarea>

另一个与`<input>`的区别在于，不能在HTML中给`<textarea>`指定最大字符数。

无论这两种文本框在标记中有什么区别，它们都会将用户输入的内容保存在value属性中。可以通过这个属性读取和设置文本框的值。

var textbox=document.forms[0].element["textbox1"];
    alert(textbox.value);
    
    textbox.value="Some new value";

建议像上面这样使用value属性读取和设置文本框的值，不建议使用标准的DOM方法，即不要使用setAttribute()设置`<input>`元素的value特性，也不要去修改`<textarea>`元素的第一个子节点。原因很简单：\*\*对value属性所做的修改，不一定会反映在DOM中。因此，在处理文本框的值时，最好不要使用DOM方法。

10.富文本编辑  
这一技术的本质，就是在页面中嵌入一个包含空HTML页面的iframe。通过设置designMode属性，这个空白的HTML页面可以被编辑，而编辑对象则是该页面`<body>`元素的HTML代码。designMode属性有两个可能的值：“off”（默认值）和"on"。在设置为"on"时，整个文档都会变得可以编辑（显示插入符号），然后就可以像使用字处理软件一样，通过键盘将文本内容加粗、变成斜体等等。  
可以给iframe指定一个非常简单的HTML页面作为其内容来源。例如：

<!DOCTYPE html>
    <html>
    	<head>
    		<title>Blank Page for Rich Text Editing</title>
    	</head>
    	<body>
    	</body>
    </html>

这个页面在iframe中可以像其他页面一样被加载。要让它可以编辑，必须要将designMode设置为"on"，但只有在这个页面完全加载之后才能设置这个属性。因此，在包含页面中，需要使用onload事件处理程序来在恰当的时刻设置designMode，如下面的例子所示：

等到以上代码执行之后，你就会在页面中看到一个类似文本框的可编辑区字段。这个区字段具有与其他网页相同的默认样式；不过，通过为空白页面应用CSS样式，可以修改可编辑区字段的外观。

**使用contenteditable属性：**  
另一种编辑富文本内容的方式是使用名为contenteditable的特殊属性，这个属性也是由IE最早实现的。可以把contenteditable属性应用给页面中的任何元素，然后用户立即就可以编辑该元素。这种方法之所以受到欢迎，是因为它不需要iframe、空白页和JS，只要为元素设置contenteditable属性即可。

这样，元素中包含的任何文本内容都可以编辑了，就好像这个元素变成了`<textarea>`元素一样。通过在这个元素上设置contenteditable属性，也能打开或关闭编辑模式。

var div=document.getElementById("richedit");
    div.contentEditable="true";

contenteditable属性有三个可能的值："true"表示打开、"false"表示关闭、"inherit"表示从父元素那里继承（因为可以在contenteditable元素中创建或删除元素）。支持contenteditable属性的元素有IE、Firefox、Chrome、Safari和Opera。在移动设备上，支持contenteditable属性的浏览器有iOS5+中的Safari和Android3+中的WebKit。

11.使用Canvas绘图  
除了具备基本绘图能力的2D上下文，`<canvas>`还建议了一个名为WebGL的3D上下文。  
要使用`<canvas>`元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持`<canvas>`元素，就会显示这些信息。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

要在这块画布（canvas）上绘图，需要取得绘图上下文。而取得绘图上下文对象的引用，需要调用getContext()方法并传入上下文的名字。传入"2d"，就可以取得2D上下文对象。

var drawing=document.getElementById("drawing");
    // 确定浏览器支持
    if(drawing.getContext){
        
    	var context=drawing.getContext("2d");
    	// 更多代码
    }

**2D上下文：**  
2D上下文的坐标开始于`<canvas>`元素的左上角，原点坐标是（0,0）。所有坐标都基于这个原点计算，x值越大表示越靠右，y值越大表示越靠下。默认情况下，width和height表示水平和垂直两个方向上可用的像素数目。

**填充和描边：**  
2D上下文的两种基本绘图操作是填充和描边。

**绘制矩形：**

var drawing=document.getElementById("drawing");
    // 确定浏览器支持<canvas>元素
    if(drawing.getContext){
        
    	var context=drawing.getContext("2d");
    	// 绘制红色矩形
    	context.fillStyle="#ff0000";
    	context.fillRect(10,10,50,50);
    
    	// 绘制半透明的蓝色矩形
    	context.fillStyle="rgba(0,0,255,0.5)";
    	context.fillRect(30,30,50,50);
    }

以上代码首先将fillStyle设置为红色，然后从（10,10）处开始绘制矩形，矩形的宽和高均为50像素。然后通过rgba()格式再将fillStyle设置为半透明的蓝色，在第一个矩形上面绘制第二个矩形。结果就是可以透过蓝色的矩形看到红色的矩形。

var drawing=document.getElementById("drawing");
    // 确定浏览器支持<canvas>元素
    if(drawing.getContext){
        
    	var context=drawing.getContext("2d");
    	// 绘制红色描边矩形
    	context.strokeStyle="#ff0000";
    	context.strokeRect(10,10,50,50);
    	// 绘制半透明的蓝色描边矩形
    	context.strokeStyle="rgba(0,0,255,0.5)";
    	context.strokeRect(30,30,50,50);
    }

以上代码绘制了两个重叠的矩形。不过，这两个矩形都只有框线，内部并没有填充颜色。

最后clearRect()方法用于清除画布上的矩形区域。

**绘制路径：**  
要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。  
创建了路径后，接下来有几种可能的选择。如果想绘制一条连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。  
下面看一个例子，即绘制一个不带数字的时钟表盘。

var drawing=document.getElementById("drawing");
    // 确定浏览器支持<canvas>元素
    if(drawing.getContext){
        
    	var context=drawing.getContext("2d");
    	//开始路径
    	context.beginPath();
    	//绘制外圆
    	context.arc(100,100,99,0,2*Math.PI,false);
    	//绘制内圆
    	context.moveTo(194,100);
    	context.arc(100,100,94,0,2*Math.PI,false);
    	//绘制分针
    	context.moveTo(100,100);
    	context,lineTo(100,15);
    	//绘制时针
    	context.moveTo(100,100);
    	context.lineTo(35,100);
    	//描边路径
    	context.stroke();
    }

这个例子使用arc()方法绘制了两个圆形：一个外圆和一个内圆，构成了表盘的边框。外圆的半径是99像素，圆心位于点（100,100），也是画布的中心点。为了绘制一个完整的圆形，我们从0弧度开始绘制2π弧度（通过Math.PI来计算）。在绘制内圆之前，必须把路径移动到内圆的某一点，以避免绘制出多条线条。第二次调用arc()使用了小一点的半径，以便创造边框的效果。然后，组合使用moveTo()和lineTo()方法来绘制时针和分针。最后一步是调用stroke()方法，这样才能把图形绘制到画布上。

**绘制文本：**  
绘制文本主要有两个方法：fillText()和strokeText()。

// 正常
    context.font="bold 14px Arial";
    context.textAlign="Center";
    context.textBaseline="middle";
    context.fillText("12",100,20);
    
    // 起点对齐
    context.textAlign="start";
    context.fillText("12",100,40);
    
    //终点对齐
    context.textAlign="end";
    context.fillText("12",100,60)

11.JSON  
**语法：**  
JSON的语法可以表示以下三种类型的值。

*  简单值：使用与JS相同的语法，可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JS中的特殊值undefined。
 *  对象：对象作为一种复杂数据类型，表示的是一组无序的键值对N。而每个键值对中的值可以是简单值，也可以是复杂数据类型的值。
 *  数组：数组也是一种复杂数据类型，表示一组有序的值的列表，也可以通过数值索引来访问其中的值。数组的值也可以是任意类型----简单值、对象或数组。

JSON不支持变量、函数或对象实例。它就是一种表示结构化数据的格式，虽然与JS中表示数据的某些语法相同，但它并不局限于JS的范畴。

**对象：**  
JSON中的对象与JS字面量稍微有一些不同。下面是一个JS中的对象字面量：

var person={
        
    	name:"Nicholas",
    	age:29
    };

这虽然是开发人员在JS中创建对象字面量的标准方式，但JSON中的对象要求给属性加引号。实际上，在JS中，前面的对象字面量完全可以写成下面这样：

var object={
        
    	"name":"Nicholas",
    	"age":29
    }

JSON表示上述对象的方式如下：

{
        
    	"name":"Nicholas",
    	"age":29
    }

与JS的对象字面量相比，JSON对象有两个地方不一样。首先，没有声明变量（JSON中没有变量的概念）。其次，没有末尾的分号（因为这不是JS语句，所以不需要分号）。对象的属性必须加双引号，这在JSON中是必须的，属性的值可以是简单值，也可以是复杂类型值。

JSON对象有两个方法：stringify()和parse()。在最简单的情况下，这两个方法分别用于把JS对象序列化为JSON字符串和把JSON字符串解析为原生的JS值，例如：

var book={
        
    	title:"Professional JavaScript",
    	authors:[
    		"Nicholas C Zakas"
    	],
    	edition:3,
    	year:2011
    };
    
    var jsonText=JSON.stringify(book);

这个例子使用JSON.stringify()把一个JS对象序列化为一个JSON字符串，然后将它保存在变量jsonText中。默认情况下，JSON.stringify()输出的JSON字符串不包含任何空格字符或缩进，因此保存在jsonText中的字符串如下所示：

{
        "title":"Professional JavaScript","authors":["Nicholas C Zakas"],"edition":3,"year":2011}

在序列化JS对象时，所有函数及原型成员都会被有意忽略，不体现在结果中。此外，值为undefined的任何属性也都会被跳过。结果中最终都是值为有效JSON数据类型的实例属性。  
将JSON字符串直接传递给JSON.parse()就可以得到相应的JS值。例如，使用下列代码就可以创建与book类似的对象：

var bookCopy=JSON.parse(jsonText);

注意，虽然book与bookCopy具有相同的属性，但它们是两个独立的、没有任何关系的对象。  
如果传给JSON.parse()的字符串不是有效JSON，该方法会抛出错误。

12.JSONP  
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法。JSONP看起来与JSON差不多，只不过是被包含在函数调用中的JSON，就像下面这样。

callback({
        "name":"Nicholas"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面是一个典型的JSONP请求。

http://freegeoip.net/json/?callback=handleResponse

这个URL是在请求一个JSONP地理定位服务。通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示。这里指定的回调函数的名字叫handleResponse()。

JSONP是通过动态`<script>`元素来使用的，使用时可以为src属性指定一个跨域URL。这里的`<script>`元素与`<img>`元素类似，都有能力不受限制的从其他域加载资源。因为JSONP是有效的JS代码，所以在请求完成后即在JSONP响应加载到页面中以后，就会立即执行。

function handleResponse(response){
        
    	alert("You're at IP address"+response.ip+",which is in"+response.city+","+response.region_name);
    }
    
    var script=document.createElement("Script");
    script.src="http://freegeoip.net/json/?callback=handleResponse";
    document.body.insertBefore(script,document.body.firstChild);

JSONP有两点不足：  
首先，JSONP是从其他域中加载代码执行。如果其他域不安全，很可能会在响应中夹带一些恶意代码，，而此时除了完全放弃JSONP调用之外，没有办法追究。因此在使用不是自己运维的Web服务时，一定得保证它安全可靠。  
其次，要确定JSONP请求是否失败并不容易。虽然HTML5给`<script>`元素新增了一个onerror事件处理程序，但目前还没有得到任何浏览器检测指定时间内是否接收到了响应。但就算这样也不能尽如人意，毕竟不是每个用户上网的速度和带宽都一样。

13.安全的类型检测  
typeof操作符有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果。Safai（直至第4版）在对正则表达式应用typeof操作符时会返回"function"，因此很难确定某个值是不是函数。  
instanceof操作符在存在多个全局作用域（像一个页面包含多个frame）的情况下，也是问题多多。一个经典的例子就是像下面这样将对象标识为数组。

var isArray=value instanceof Array;

以上代码要返回true，value必须是一个数组，而且还必须与Array构造函数在同一个全局作用域中（别忘了，Array是window的属性）。如果value是在另一个frame中定义的数组，那么以上代码就会返回false。  
解决上述问题的办法都一样。在任何值上调用Object原生的toString()方法，都会返回一个\[object NativeConstructorName\]格式的字符串。每个类在内部都有一个\[\[Class\]\]属性，这个属性中就指定了上述字符串中的构造函数名。

alert(Object.prototype.toString,call(value));//"[object Array]"

由于原生数组的构造函数名与全局作用域无关，因此使用toString()就能保住返回一致的值。利用这一点，可以创建如下函数：

function isArray(value){
        
    	return Object.prototype.toString.call(value=="[object Array]");
    }

同样，也可以基于这一思路来测试某个值是不是原生函数或正则表达式：

function isFunction(value){
        
    	return Object.prototype.toString.call(value)=="[object Function]";
    }
    
    function isRegExp(value){
        
    	return Object.prototype.toString.call(value)=="[object RegExp]";
    }

不过要注意，对于在IE中以COM对象形式实现的任何函数，isFunction()都将返回false（因为它们并非原生的JS函数）。

14.作用域安全的构造函数  
构造函数其实就是一个使用new操作符调用的函数。当使用new调用时，构造函数内用到的this对象会指向新创建的对象实例，如下面的例子所示：

function Person(name,age,job){
        
    	this.name=name;
    	this.age=age;
    	this.job=job;
    }
    
    var person=new Person("Nicholas",29,"Software Engineer");

上面这个例子中，Person构造函数使用this对象给三个属性赋值：name、age和job。当和new操作符连用时，则会创建一个新的Person对象，同时会给它分配这些属性。问题出在没有使用new操作符来调用该构造函数的情况上。由于该this对象是在运行时绑定的，所以直接调用Person()，this会映射到全局对象window上，导致错误对象属性的意外增加。例如：

var person=Person("Nicholas",29,"Software Engineer");
    alert(window.name);//"Nicholas"
    alert(window.age);//29
    alert(window.job);//"Software Engineer"

这里原本针对Person实例的三个属性增加到了window对象上，因为构造函数是作为普通函数调用的，忽略了new操作符。这个问题是由this对象的晚绑定造成的，在这里this被解析成了window对象。由于window的name属性是用来识别链接目标和frame的，所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数。  
作用域安全的构造函数在进行任何更改前，首先确认this对象是正确类型的实例。如果不是，那么会创建新的实例并返回。

这段代码中的Person构造函数添加了一个检查并确保this对象是Person实例的if语句，它表示要么使用new操作符，要么在现有的Person实例环境中调用构造函数。任何一种情况下，对象初始化都能正常进行。如果this并非Person的实例，那么会再次使用new操作符调用构造函数并返回结果。最后的结果是，调用Person构造函数时无论是否使用new操作符，都会返回一个Person的新实例，这就避免在全局对象上意外设置属性。

15.惰性载入函数  
因为浏览器之间行为的差异，多数JS代码包含了大量的if语句，将执行引导到正确的代码中。

调用creatXHR()的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的XHR，然后测试有没有基于ActiveX的XHR，最后如果都没有发现的话就抛出一个错误，每次调用该函数都是这样，即使每次调用时分支的结果都不变：如果浏览器支持内置XHR，那么它就一直支持，那么这种测试就变得没必要了。即使只有一个if语句的代码，也肯定要比没有if语句的慢，所以如果if语句不必每次执行，那么代码可以运行的更快一些，解决方案就是惰性载入。  
惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会覆盖另一个按合适方式执行的函数，这样任何对原函数的调用都不会再经过执行的分支了。例如，可以用下面的方式使用惰性载入重写createXHR()。

在这个惰性载入的createXHR()中，if语句的每一个分支都会为createXHR变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用createXHR()的时候，就会直接调用被分配的函数，这样就不用再次执行if语句了。  
第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首先加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果。

这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪个函数实现。实际的逻辑都一样，不一样的地方就是第一行代码（使用var定义函数），新增了自执行的匿名函数，另外两个分支都返回正确的函数定义，以便立即将其赋值给createXHR()。  
惰性载入函数的优点是只在执行了分支代码时牺牲了一点性能。至于哪种方式更合适，看具体需求而定。不过这两种方式都能避免执行不必要的代码。

16.函数绑定  
函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。请看以下例子：

var handler={
        
    	message:"Event handled",
    	handleClick:function(event){
        
    		alert(this.message);
    	}
    };
    
    var btn=document.getElementById("myBtn");
    EventUtil.addHandler(btn,"click",handler.handleClick);

在上面这个例子中，创建了一个叫handler的对象。handler.handleClick()方法被分配为一个DOM按钮的事件处理程序。当按下该按钮时，就调用该函数，显示一个警告框。虽然貌似警告框应该显示Event handled，然而实际上显示的是undefined。这个问题在于没有保存handler.handlerClick()的环境，所以this对象最后是指向了DOM按钮而非handler（在IE8中，this指向window）。可以如下面例子所示，使用一个闭包来修正这个问题。

这个解决方案在onclick事件处理程序内使用了一个闭包直接调用handler.handleClick()。当然，这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试。因此，很多JS库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫bind()。  
一个简单的bind()函数接受一个函数和一个环境，并返回一个在给定环境中调用给定函数的函数，并且将所有参数原封不动传递过去。语法如下：

function bind(fn,context){
        
    	return function(){
        
    		return fn.apply(context,arguments);
    	};
    }

这个函数似乎简单，但其功能是非常强大的。在bind()中创建一个闭包，闭包使用apply()调用传入的函数，并给apply()传递context对象和参数。注意这里使用的arguments对象是内部函数的，而非bind()。当调用返回的函数时，它会在给定函数中执行被传入的函数并给出所有参数。bind()函数按如下方式使用：

handler.handleClick()方法和平时一样获得了event对象，因为所有的参数都通过被绑定的函数直接传给了它。  
ES5为所有函数定义了一个原生的bind()方法，进一步简单了操作。不用再自己定义bind()函数了，而是可以直接在函数上调用这个方法。例如：

var handler={
        
    	message:"Event handled",
    	handleClick:function(event){
        
    		alert(this.message+":"+event.type);
    	}
    };
    
    var btn=document.getElementById("myBtn");
    EventUtil.addHandler(btn,"click",handler.handleClick.bind(handler));

原生的bind()方法与前面介绍的自定义bind()方法类似，都是要传入作为this值的对象。支持原生bind()方法的浏览器有IE9+、Firefox4+、Chrome。  
只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于事件处理程序以及setTimeout()和setInterval()。然而被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。

17.防篡改对象  
一旦把对象定义为防篡改，就无法撤销了。

**不可扩展对象：**  
使用Object.preventExtensions()方法可以改变这个行为，不能再给对象添加属性和方法。

var person={
        name:"Nicholas"};
    Object.preventExtensions(person);
    
    person.age=29;
    alert(person.age);//undefined

在调用了Object.preventExtensions()方法后，就不能给person对象添加新属性和方法了。虽然不能给对象添加新成员，但已有的成员则丝毫不受影响。仍然可以修改和删除已有的成员。另外，使用Object.isExtensible()方法还可以确定对象是否可以扩展。

var person={
        name:"Nicholas"};
    alert(Object.isExtensible(person));//true
    
    Object.preventExtensions(person);
    alert(Object.isExtensible(person));//false

**密封的对象：**  
ES5为对象定义的第二个保护级别为密封对象。密封对象不可扩展，而且已有成员的\[\[Configurable\]\]特性将被设置为false。这就意味着不能删除属性和方法，因为不能使用Object.defineProperty()把数据属性修改为访问器属性，或者相反。属性值是可以修改的。  
要密封对象，可以使用Object.seal()方法。

var person={
        name:"Nicholas"};
    Object.seal(person);
    
    person.age=29;
    alert(person.age);//undefined
    
    delete person.name;
    alert(person.name);//"Nicholas"

使用Object.isSeal()方法可以确定对象是否被密封了。因为被密封的对象不可扩展，所以用Object.isExtensible()检测密封的对象也会返回false。

var person={
        name:"Nicholas"};
    alert(Object.isExtensible(person));//true
    alert(Object.isSealed(person));//false
    
    Object.seal(person);
    alert(Object.isExtensible(person));//false
    alert(Object.isSealed(person));//true

**冻结的对象：**  
最严格的的防篡改级别是冻结对象。冻结的对象既不可扩展，又是密封的，而且对象数据属性的\[\[Writable\]\]特性会被设置为false。如果定义\[\[Set\]\]函数，访问器属性仍然是可写的。ES5定义的Object.freeze()方法可以用来冻结对象。

var person={
        name:"Nicholas"};
    Object.freeze(person);
    
    person.age=29;
    alert(person.age);//undefined
    
    delete person.name;
    alert(person.name);//"Nicholas"
    
    person.name="Greg";
    alert(person.name);//"Nicholas"

因为冻结对象既是密封的又是不可扩展的，所以用Object.isExtensible()和Object.isSealed()检测冻结对象将分别返回false和true。

var person={
        name:"Nicholas"};
    alert(Object.isExtensible(person));//true
    alert(Object.isSealed(person));//false
    alert(Object.isFrozen(person));//false
    
    Object.freeze(person);
    alert(Object.isExtensible(person));//false
    alert(Object.isSealed(person));//true
    alert(Object.isFrozen(person));//true

18.拖动功能

diffX和diffY变量是私有的，因为只有handleEvent()函数需要用到它们。当mousedown事件发生时，通过clientX减去目标的offsetLeft，clientY减去目标的offsetTop，可以计算到这两个变量的值。

19.Web存储机制  
Web Storage的目的是克服由Cookie带来的一些限制，当数据需要被严格控制在客户端时，无需持续的将数据发回服务器。Web Storage的两个主要目标是：

提供一种在cookie之外的存储会话数据的途径；
    提供一种存储大量可以跨会话存在的数据的机制

**Storage类型：**  
Storage类型提供最大的存储空间（因浏览器而异）来存储名值对儿。Storage的实例与其他对象类似，有如下方法。

clear()：删除所有值；Firefox中没有实现
    getItem(name):根据指定的名字name获取对应的值
    key(index):获得index位置处的值的名字
    removeItem(name):删除由name指定的名值对儿
    setItem(name,value):为指定的name设置一个对应的值

其中，getItem()、removeItem()和setItem()方法可以直接调用，也可通过Storage对象间接调用。因为每个项目都是作为属性存储在该对象上的，所以可以通过点语法或者方括号语法访问属性来读取值，设置也一样，或者通过delete操作符进行删除。

**sessionStorage对象:**  
sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话cookie，也会在浏览器关闭后消失。存储在sessionStorage中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并长期==重启之后依然可用（Firefox和WebKit都支持，IE则不行）。  
因为sessionStorage对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。  
由于sessionStorage对象其实是Storage的一个实例，所以可以使用setItem()或者直接设置新的属性来存储数据

//使用方法存储数据
    sessionStorage.setItem("name","Nicholas");
    //使用属性存储数据
    sessionStorage.book="Professional JavaScript";

不同浏览器写入数据方式略有不同。Firefox和WebKit实现了同步写入，所以添加到存储空间中的数据是立刻被提交的。而IE的实现则是异步写入数据，所以在设置数据和将数据实际写入磁盘之间可能有一些延迟。对于少量数据而言，这个差异是可以忽略的。对于大量数据，你会发现IE要比其他浏览器更快的恢复执行，因为它会跳过实际的磁盘写入过程。  
在IE8中可以强制把数据写入磁盘：在设置新数据之前使用begin()方法，并且在所有设置完成之后调用commit()方法。看以下例子。

//只适用于IE8
    sessionStorage.begin();
    sessionStorage.name="Nicholas";
    sessionStorage.book="Professional JavaScript";
    sessionStorage.commit();

这段代码确保了name和book的值在调用commit()之后立即被写入磁盘。调用begin()是为了确保在这段代码执行的时候不会发生其他磁盘写入操作。对于少量数据而言，这个过程不是必需的；不过，对于大量数据（如文档之类的）可能就要考虑这种事务形成的方法了。  
sessionStorage中有数据时，可以使用getItem()或者通过直接访问属性名来获取数据。

//使用方法读取数据
    var name=sessionStorage.getItem("name");
    //使用属性读取数据
    var book=sessionStorage.book;

要从sessionStorage中删除数据，可以使用delete操作符删除对象属性，也可以调用removeItem()方法。以下是这些方法的例子。

//使用delete删除一个值----在WebKit中无效
    delete sessionStorage.name;
    //使用方法删除一个值
    sessionStorage.removeItem("book");

sessionStorage对象应该主要用于仅针对会话的小段数据的存储。如果想要跨越会话存储数据，那么globalStorage或者localStorage更为合适。

**globalStorage对象：**  
Firefox2中实现了globalStorage对象，作为最初的Web Storage规范的一部分，这个对象的目的是跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现，如以下例子所示。

//保存数据
    globalStorage["wrox.com"].name="Nicholas";
    //获取数据
    var name=globalStorage["wrox.com"].name;

在这里。访问的是针对域名wrox.com的存储空间。globalStorage对象不是Storage的实例，而具体的globalStorage\[“wrox.com”\]才是。这个存储空间对于wrox.com及其所有子域都是可以访问的。可以像下面这样指定子域名。

//保存数据
    globalStorage["www.wrox.com"].name="Nicholas";
    //获取数据
    var name=globalStorage["www.wrox.com"].name;

这里所指定的存储空间只能由来自www.wrox.com的页面访问，其他子域名都不行。  
globalStorage的每个属性都是Storage的实例。因此，可以像如下代码中这样使用。

globalStorage["www.wrox.com"].name="Nicholas";
    globalStorage["www.wrox.com"].book="Professional JavaScript";
    globalStorage["www.wrox.com"].removeItem("name");
    var book=globalStorage["www.wrox.com"].getItem("book");

如果不使用removeItem()或者delete删除，或者用户未清除浏览器缓存，存储在globalStorage属性中的数据会一直保留在磁盘上。这让globalStorage非常适合在客户端存储文档或者长期保存用户偏好设置。

**localStorage对象：**  
localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问规则；规则事先就设定好了。要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于globalStorage\[location.host\]。  
由于localStorage是Storage的实例，所以可以像使用sessionStorage一样来使用它。

//使用方法存储数据
    localStorage.setItem("name","Nicholas");
    //使用属性存储数据
    localStorage.book="Professional JavaScript";
    //使用方法读取数据
    var name=localStorage.getItem("name");
    //使用属性读取数据
    var book=localStorage.book;

存储在localStorage中的数据和存储在globalStorage中的数据一样，都遵循相同的规则：数据保留到通过JavaScript删除或者是用户清楚浏览器缓存。  
为了兼容只支持globalStorage的浏览器可以使用以下函数。

然后，像下面这样调用一次这个函数，就可以正常的读取数据了。

var storage=getLocalStorage();

**storage事件：**  
对Storage对象进行任何修改。都会在文档上触发storage事件。当通过属性或setItem()方法保存数据，使用的delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件。这个事件的event对象有以下属性：

domain:发生变化的存储空间的域名
    key:设置或者删除的键名
    newValue:如果是设置值，则是新值；如果是删除键，则是null
    oldValue:键被更改之前的值