博客园_雨中无伞-----WEB前端开发

HTML5语音输入（淘宝语音搜索）方法

2012-02-09T01:36:00Z

谷歌的网站是时逛时新啊，今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单
只需要在input添加属性x-webkit-speech即可，例子如下：

<input type="text" x-webkit-speech />

这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示

这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。

语音输入其他属性：

lang

这玩意可以强制输入框里面的语音的语言种类，例如
<input type="text" x-webkit-speech lang="zh-CN"/>
语音事件

目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交
<input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>
这样说完以后就自动搜索了
x-webkit-grammar

这个不是语音搜索用的属性，但是可以控制这个输入的语法，例如在做搜索框的话就可以用
<input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />

使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」

这个功能相当有趣，实用就不敢恭维了，主要是因为适用范围太小啊，所以只能希望HTML5尽快统一并应用了。

本文链接

Flowplayer-一款免费的WEB视频播放器

2012-02-08T02:47:00Z

Flowplayer 是一个开源（GPL 3的）WEB视频播放器。您可以将该播放器嵌入您的网页中，如果您是开发人员，您还可以自由定制和配置播放器相关参数以达到您要的播放效果。本文主要介绍Flowplayer的使用。

Flowplayer支持播放flv、swf等流媒体以及图片文件，能够非常流畅的播放视频文件，支持自定义配置和扩展。

1、加载flowplayer.js

在要播放视频的页面的head之间加入flowplayer.js。

<script type="text/javascript" src="js/flowplayer-3.2.6.min.js"></script>

您可以到flowplyer官网上下载最新版本：http://flowplayer.org/download/index.html

2、XHTML

在需要加入播放器的地方加入如下一段代码：

<a href="flowplayer.flv" style="display:block;width:520px;height:330px" id="player"></a>

将a标签的href属性指向要播放的视频地址，然后设置样式，宽度和高度，以及设置display:block，当然关键的是还要给a标签指定一个id，以便于JS调用。

当然你也可以只在html中指定一个DIV，然后由Javascript来控制播放地址，如：

<div id="player2" style="width:520px; height:330px"> </div>

3、Javascript

在页面底部计入javascript脚本调用播放器：

<script type="text/javascript"> 
flowplayer("player", "flowplayer-3.2.7.swf"); 
</script>

使用flowplayer()函数调用播放器，第一个参数是播放器的id，第二个参数是播放器的路径，它是一个flash文件，一定要保证播放器的路径正确。

如果不是使用a标签调用视频文件，而是使用DIV来调用，则代码如下：

flowplayer( 
    "player2",  
    "flowplayer-3.2.7.swf",{ 
      clip: { 
        url: "flowplayer.flv", 
        autoPlay: false,  
        autoBuffering: true  
      } 
    } 
);

flowplayer()函数的第三个参数是可以进行多项设置的，其实就是高级设置。clip方法里的url：表示视频文件的真实地址，autoPlay：表示是否自动播放，默认是true，autoBuffering：表示是否自动缓冲，即当视频文件设置为不自动播放时，播放器仍然预先下载视频文件内容。

flowplayer还支持播放列表，以及皮肤设置等多项高级设置，具体设置方法，感兴趣的同学可以请访问：http://flowplayer.org/documentation/configuration/index.html。

【http://www.helloweba.com/demo/flowplayer/】

转载：

http://www.helloweba.com/view-blog-154.html

本文链接

jQuery+CSS实现的图片滚动效果

2012-02-08T02:38:00Z

本例实现了一系列图片滚动的效果，适合用在需要展示图片库或合作伙伴友情链接图片之类的网站首页。可以控制图片滚动的速度、自动/手动滚动图片、支持鼠标悬停等。

XHTML

<div class="bx_wrap"> 
   <div class="bx_container"> 
      <ul id="demo1"> 
          <li><img  alt="#" width="140" height="94" src="img/s1.jpg"></li> 
          <!--更多图片--> 
       </ul> 
    </div> 
 </div>

XHTML由一组图片构成的无序列表ul，给ul一个id属性用于JS调用，另外ul的父级div.bx_container和div.bx_wrap是必需的。此外记得在head间载入jquery库和滚动所需的js插件：

<script type="text/javascript" src="js/jquery.js"> </script> 
<script type="text/javascript" src="js/bxCarousel.js"> </script>

CSS

.bx_wrap {margin-left: 10px; margin-top:10px} 
.bx_wrap ul img { border: 2px solid #ddd; } 
.bx_wrap ul li{text-align:center} 
.bx_wrap ul li a:hover{text-decoration:none; color:#f30} 
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0; 
position:absolute; top:45px; left:-2px; text-indent:-999em; background: url(img/arr_left.gif)  
no-repeat;} 
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:626px;position: absolute; 
top:45px; text-indent:-999em; background:url(img/arr_right.gif) no-repeat;}

如果要使用方向按钮导航，则需要设置.bx_wrap a.prev和.bx_wrap a.next的样式。

jQuery

$("#demo1").bxCarousel({ 
    display_num: 4,  
    move: 1,  
    auto: true,  
    controls: false, 
    margin: 10 
});

bxCarousel参数说明：

move：每次滚动移动图片的数量，默认为4。

display_num：展示图片的数量，默认为4。

speed：图片滚动速度，默认为500毫秒。

margin：图片间的间距，默认为0。

auto：是否自动滚动，默认为false。

auto_interval：当设为自动滚动时，每次滚动的时间间隔（毫秒），默认为2000毫秒即2秒。

auto_dir：自动滚动的方向，默认为next，你可以试下prev。

next_image：向右滚方向按钮图片，可以用CSS设置。

prev_image：向左滚方向按钮图片，可以用CSS设置。

auto_hover：滚动时，鼠标滑上图片时是否停止滚动，默认为false。

controls：是否显示左右滚动按钮图片，默认为true。

转载：

http://www.helloweba.com/view-blog-139.html

本文链接

现代浏览器的工作原理

2012-02-06T05:41:00Z

简介

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。

将讨论的浏览器

今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。

本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。

根据W3C（World Wide Web Consortium 万维网联盟）的浏览器统计数据，当前（2011年9月），Firefox、Safari及Chrome的市场占有率综合已快接近50％。（原文为2009年10月，数据没有太大变化）因此，可以说开源浏览器将近占据了浏览器市场的半壁江山。

浏览器的主要功能

浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括 PDF、image及其他格式。用户用URI（Uniform Resource Identifier 统一资源标识符）来指定所请求资源的位置，在网络一章有更多讨论。

HTML和CSS规范中规定了浏览器解释html文档的方式，由 W3C组织对这些规范进行维护，W3C是负责制定web标准的组织。

HTML规范的最新版本是HTML4(http://www.w3.org/TR/html401/)，HTML5还在制定中（译注：两年前），最新的CSS规范版本是2（http://www.w3.org/TR/CSS2），CSS3也还正在制定中（译注：同样两年前）。

这些年来，浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为web开发者带来了严重的兼容性问题。

但是，浏览器的用户界面则差不多，常见的用户界面元素包括：

▲用来输入URI的地址栏

▲前进、后退按钮

▲书签选项

▲用于刷新及暂停当前加载文档的刷新、暂停按钮

▲用于到达主页的主页按钮

奇怪的是，并没有哪个正式公布的规范对用户界面做出规定，这些是多年来各浏览器厂商之间相互模仿和不断改进得结果。

HTML5并没有规定浏览器必须具有的UI元素，但列出了一些常用元素，包括地址栏、状态栏及工具栏。还有一些浏览器有自己专有得功能，比如Firefox得下载管理。更多相关内容将在后面讨论用户界面时介绍。

浏览器的主要构成High Level Structure

浏览器的主要组件包括：

▲用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

▲浏览器引擎－用来查询及操作渲染引擎的接口

▲渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来

▲网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作
UI 后端－用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

▲JS解释器－用来解释执行JS代码

▲数据存储－属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

图1：浏览器主要组件

需要注意的是，不同于大部分浏览器，Chrome为每个Tab分配了各自的渲染引擎实例，每个Tab就是一个独立的进程。

对于构成浏览器的这些组件，后面会逐一详细讨论。

组件间的通信 Communication between the components

Firefox和Chrome都开发了一个特殊的通信结构，后面将有专门的一章进行讨论。

渲染引擎 The rendering engine

渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。

默认情况下，渲染引擎可以显示html、xml文档及图片，它也可以借助插件（一种浏览器扩展）显示其他类型数据，例如使用PDF阅读器插件，可以显示PDF格式，将由专门一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了CSS之后的html及图片。

渲染引擎 Rendering engines

本文所讨论得浏览器——Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。

Webkit是一款开源渲染引擎，它本来是为linux平台研发的，后来由Apple移植到Mac及Windows上，相关内容请参考http://webkit.org。

主流程 The main flow

渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。

下面是渲染引擎在取得内容之后的基本流程：

解析html以构建dom树->构建render树->布局render树->绘制render树

图2：渲染引擎基本流程

渲染引擎开始解析html，并将标签转化为内容树中的dom节点。接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。

Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。

Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

图3：webkit主流程

图4：Mozilla的Geoko 渲染引擎主流程

从图3和4中可以看出，尽管webkit和Gecko使用的术语稍有不同，他们的主要流程基本相同。Gecko称可见的格式化元素组成的树为 frame树，每个元素都是一个frame，webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局，而 Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment，Gecko在html和dom树之间附加了一层，这层称为内容接收器，相当制造dom元素的工厂。下面将讨论流程中的各个阶段。

解析 Parsing－general

既然解析是渲染引擎中一个非常重要的过程，我们将稍微深入的研究它。首先简要介绍一下解析。

解析一个文档即将其转换为具有一定意义的结构——编码可以理解和使用的东西。解析的结果通常是表达文档结构的节点树，称为解析树或语法树。

例如，解析“2＋3－1”这个表达式，可能返回这样一棵树。

图5：数学表达式树节点

文法 Grammars

解析基于文档依据的语法规则——文档的语言或格式。每种可被解析的格式必须具有由词汇及语法规则组成的特定的文法，称为上下文无关文法。人类语言不具有这一特性，因此不能被一般的解析技术所解析。

解析器－词法分析器 Parser－Lexer combination

解析可以分为两个子过程——语法分析及词法分析

词法分析就是将输入分解为符号，符号是语言的词汇表——基本有效单元的集合。对于人类语言来说，它相当于我们字典中出现的所有单词。

语法分析指对语言应用语法规则。

解析器一般将工作分配给两个组件——词法分析器（有时也叫分词器）负责将输入分解为合法的符号，解析器则根据语言的语法规则分析文档结构，从而构建解析树，词法分析器知道怎么跳过空白和换行之类的无关字符。

图6：从源文档到解析树

解析过程是迭代的，解析器从词法分析器处取道一个新的符号，并试着用这个符号匹配一条语法规则，如果匹配了一条规则，这个符号对应的节点将被添加到解析树上，然后解析器请求另一个符号。如果没有匹配到规则，解析器将在内部保存该符号，并从词法分析器取下一个符号，直到所有内部保存的符号能够匹配一项语法规则。如果最终没有找到匹配的规则，解析器将抛出一个异常，这意味着文档无效或是包含语法错误。

转换 Translation

很多时候，解析树并不是最终结果。解析一般在转换中使用——将输入文档转换为另一种格式。编译就是个例子，编译器在将一段源码编译为机器码的时候，先将源码解析为解析树，然后将该树转换为一个机器码文档。

图7：编译流程

解析实例 Parsing example

图5中，我们从一个数学表达式构建了一个解析树，这里定义一个简单的数学语言来看下解析过程。

词汇表：我们的语言包括整数、加号及减号。

语法：

1. 该语言的语法基本单元包括表达式、term及操作符

2. 该语言可以包括多个表达式

3. 一个表达式定义为两个term通过一个操作符连接

4. 操作符可以是加号或减号

5. term可以是一个整数或一个表达式

现在来分析一下“2＋3－1”这个输入

第一个匹配规则的子字符串是“2”，根据规则5，它是一个term，第二个匹配的是“2＋3”，它符合第2条规则——一个操作符连接两个term，下一次匹配发生在输入的结束处。“2＋3－1”是一个表达式，因为我们已经知道“2＋3”是一个term，所以我们有了一个term紧跟着一个操作符及另一个term。“2＋＋”将不会匹配任何规则，因此是一个无效输入。

词汇表及语法的定义

词汇表通常利用正则表达式来定义。

例如上面的语言可以定义为：

INTEGER：0｜［1－9］［0－9］＊

PLUS：＋

MINUS：－

正如看到的，这里用正则表达式定义整数。

语法通常用BNF格式定义，我们的语言可以定义为：

expression :＝ term operation term

operation := PLUS | MINUS

term := INTEGER | expression

如果一个语言的文法是上下文无关的，则它可以用正则解析器来解析。对上下文无关文法的一个直观的定义是，该文法可以用BNF来完整的表达。可查看http://en.wikipedia.org/wiki/Context-free_grammar。

解析器类型 Types of parsers

有两种基本的解析器——自顶向下解析及自底向上解析。比较直观的解释是，自顶向下解析，查看语法的最高层结构并试着匹配其中一个；自底向上解析则从输入开始，逐步将其转换为语法规则，从底层规则开始直到匹配高层规则。

来看一下这两种解析器如何解析上面的例子：

自顶向下解析器从最高层规则开始——它先识别出“2＋3“，将其视为一个表达式，然后识别出”2＋3－1“为一个表达式（识别表达式的过程中匹配了其他规则，但出发点是最高层规则）。

自底向上解析会扫描输入直到匹配了一条规则，然后用该规则取代匹配的输入，直到解析完所有输入。部分匹配的表达式被放置在解析堆栈中。

Stack	Input
	2 + 3 – 1
term	+ 3 – 1
term operation	3 – 1
expression	- 1
expression operation	1
expression

自底向上解析器称为shift reduce 解析器，因为输入向右移动（想象一个指针首先指向输入开始处，并向右移动），并逐渐简化为语法规则。

自动化解析 Generating parse

解析器生成器这个工具可以自动生成解析器，只需要指定语言的文法——词汇表及语法规则，它就可以生成一个解析器。创建一个解析器需要对解析有深入的理解，而且手动的创建一个由较好性能的解析器并不容易，所以解析生成器很有用。Webkit使用两个知名的解析生成器——用于创建语法分析器的Flex及创建解析器的Bison（你可能接触过Lex和Yacc）。Flex的输入是一个包含了符号定义的正则表达式，Bison的输入是用BNF格式表示的语法规则。rs automatically

HTML解析器 HTML Parser

HTML解析器的工作是将html标识解析为解析树。

HTML文法定义 The HTML grammar definition

W3C组织制定规范定义了HTML的词汇表和语法。

非上下文无关文法 Not a context free grammar

正如在解析简介中提到的，上下文无关文法的语法可以用类似BNF的格式来定义。

不幸的是，所有的传统解析方式都不适用于html（当然我提出它们并不只是因为好玩，它们将用来解析css和js），html不能简单的用解析所需的上下文无关文法来定义。

Html 有一个正式的格式定义——DTD（Document Type Definition 文档类型定义）——但它并不是上下文无关文法，html更接近于xml，现在有很多可用的xml解析器，html有个xml的变体——xhtml，它们间的不同在于，html更宽容，它允许忽略一些特定标签，有时可以省略开始或结束标签。总的来说，它是一种soft语法，不像xml呆板、固执。

显然，这个看起来很小的差异却带来了很大的不同。一方面，这是html流行的原因——它的宽容使web开发人员的工作更加轻松，但另一方面，这也使很难去写一个格式化的文法。所以，html的解析并不简单，它既不能用传统的解析器解析，也不能用xml解析器解析。

HTML DTD

Html适用DTD格式进行定义，这一格式是用于定义SGML家族的语言，包括了对所有允许元素及它们的属性和层次关系的定义。正如前面提到的，html DTD并没有生成一种上下文无关文法。

DTD有一些变种，标准模式只遵守规范，而其他模式则包含了对浏览器过去所使用标签的支持，这么做是为了兼容以前内容。最新的标准DTD在http://www.w3.org/TR/html4/strict.dtd

DOM

输出的树，也就是解析树，是由DOM元素及属性节点组成的。DOM是文档对象模型的缩写，它是html文档的对象表示，作为html元素的外部接口供js等调用。

树的根是“document”对象。

DOM和标签基本是一一对应的关系，例如，如下的标签：

<html>

<body>

<p>

Hello DOM

</p>

<div><img src=”example.png” /></div>

</body>

</html>

将会被转换为下面的DOM树：

图8：示例标签对应的DOM树

和html一样，DOM的规范也是由W3C组织制定的。访问http://www.w3.org/DOM/DOMTR，这是使用文档的一般规范。一个模型描述一种特定的html元素，可以在http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.htm 查看html定义。

这里所谓的树包含了DOM节点是说树是由实现了DOM接口的元素构建而成的，浏览器使用已被浏览器内部使用的其他属性的具体实现。

解析算法 The parsing algorithm

正如前面章节中讨论的，hmtl不能被一般的自顶向下或自底向上的解析器所解析。

原因是：

1. 这门语言本身的宽容特性

2. 浏览器对一些常见的非法html有容错机制

3. 解析过程是往复的，通常源码不会在解析过程中发生改变，但在html中，脚本标签包含的“document.write ”可能添加标签，这说明在解析过程中实际上修改了输入

不能使用正则解析技术，浏览器为html定制了专属的解析器。

Html5规范中描述了这个解析算法，算法包括两个阶段——符号化及构建树。

符号化是词法分析的过程，将输入解析为符号，html的符号包括开始标签、结束标签、属性名及属性值。

符号识别器识别出符号后，将其传递给树构建器，并读取下一个字符，以识别下一个符号，这样直到处理完所有输入。

图9：HTML解析流程

符号识别算法 The tokenization algorithm

算法输出html符号，该算法用状态机表示。每次读取输入流中的一个或多个字符，并根据这些字符转移到下一个状态，当前的符号状态及构建树状态共同影响结果，这意味着，读取同样的字符，可能因为当前状态的不同，得到不同的结果以进入下一个正确的状态。

这个算法很复杂，这里用一个简单的例子来解释这个原理。

基本示例——符号化下面的html：

<html>

<body>

Hello world

</body>

</html>

初始状态为“Data State”，当遇到“<”字符，状态变为“Tag open state”，读取一个a－z的字符将产生一个开始标签符号，状态相应变为“Tag name state”，一直保持这个状态直到读取到“>”，每个字符都附加到这个符号名上，例子中创建的是一个html符号。

当读取到“>”，当前的符号就完成了，此时，状态回到“Data state”，“<body>”重复这一处理过程。到这里，html和body标签都识别出来了。现在，回到“Data state”，读取“Hello world”中的字符“H”将创建并识别出一个字符符号，这里会为“Hello world”中的每个字符生成一个字符符号。

这样直到遇到“</body>”中的“<”。现在，又回到了“Tag open state”，读取下一个字符“/”将创建一个闭合标签符号，并且状态转移到“Tag name state”，还是保持这一状态，直到遇到“>”。然后，产生一个新的标签符号并回到“Data state”。后面的“</html>”将和“</body>”一样处理。

图10：符号化示例输入

树的构建算法 Tree construction algorithm

在树的构建阶段，将修改以Document为根的DOM树，将元素附加到树上。每个由符号识别器识别生成的节点将会被树构造器进行处理，规范中定义了每个符号相对应的Dom元素，对应的Dom元素将会被创建。这些元素除了会被添加到Dom树上，还将被添加到开放元素堆栈中。这个堆栈用来纠正嵌套的未匹配和未闭合标签，这个算法也是用状态机来描述，所有的状态采用插入模式。

来看一下示例中树的创建过程：

<html>

<body>

Hello world

</body>

</html>

构建树这一阶段的输入是符号识别阶段生成的符号序列。

首先是“initial mode”，接收到html符号后将转换为“before html”模式，在这个模式中对这个符号进行再处理。此时，创建了一个HTMLHtmlElement元素，并将其附加到根Document对象上。

状态此时变为“before head”，接收到body符号时，即使这里没有head符号，也将自动创建一个HTMLHeadElement元素并附加到树上。

现在，转到“in head”模式，然后是“after head”。到这里，body符号会被再次处理，将创建一个HTMLBodyElement并插入到树中，同时，转移到“in body”模式。

然后，接收到字符串“Hello world”的字符符号，第一个字符将导致创建并插入一个text节点，其他字符将附加到该节点。

接收到body结束符号时，转移到“after body”模式，接着接收到html结束符号，这个符号意味着转移到了“after after body”模式，当接收到文件结束符时，整个解析过程结束。

图11：示例html树的构建过程

解析结束时的处理 Action when the parsing is finished

在这个阶段，浏览器将文档标记为可交互的，并开始解析处于延时模式中的脚本——这些脚本在文档解析后执行。

文档状态将被设置为完成，同时触发一个load事件。

Html5规范中有符号化及构建树的完整算法(http://www.w3.org/TR/html5/syntax.html#html-parser)。

浏览器容错 Browsers error tolerance

你从来不会在一个html页面上看到“无效语法”这样的错误，浏览器修复了无效内容并继续工作。

以下面这段html为例：

<html>

<mytag>

</mytag>

<div>

<p>

</div>

Really lousy HTML

</p>

</html>

这段html违反了很多规则（mytag不是合法的标签，p及div错误的嵌套等等），但是浏览器仍然可以没有任何怨言的继续显示，它在解析的过程中修复了html作者的错误。

浏览器都具有错误处理的能力，但是，另人惊讶的是，这并不是html最新规范的内容，就像书签及前进后退按钮一样，它只是浏览器长期发展的结果。一些比较知名的非法html结构，在许多站点中出现过，浏览器都试着以一种和其他浏览器一致的方式去修复。

Html5规范定义了这方面的需求，webkit在html解析类开始部分的注释中做了很好的总结。

解析器将符号化的输入解析为文档并创建文档，但不幸的是，我们必须处理很多没有很好格式化的html文档，至少要小心下面几种错误情况。

1. 在未闭合的标签中添加明确禁止的元素。这种情况下，应该先将前一标签闭合

2. 不能直接添加元素。有些人在写文档的时候会忘了中间一些标签（或者中间标签是可选的），比如HTML HEAD BODY TR TD LI等

3. 想在一个行内元素中添加块状元素。关闭所有的行内元素，直到下一个更高的块状元素

4. 如果这些都不行，就闭合当前标签直到可以添加该元素。

下面来看一些webkit容错的例子：

</br>替代

一些网站使用</br>替代<br>，为了兼容IE和Firefox，webkit将其看作<br>。

代码：

if (t->isCloseTag(brTag) && m_document->inCompatMode()) {

reportError(MalformedBRError);

t->beginTag = true;

}

Note－这里的错误处理在内部进行，用户看不到。

迷路的表格

这指一个表格嵌套在另一个表格中，但不在它的某个单元格内。

比如下面这个例子：

<table>

<tr><td>inner table</td></tr>

</table>

<tr><td>outer table</td></tr>

</table>

webkit将会将嵌套的表格变为两个兄弟表格：

<table>

<tr><td>outer table</td></tr>

</table>

<table>

<tr><td>inner table</td></tr>

</table>

代码：

1 2	`if` `(m_inStrayTableContent && localName == tableTag)` `popBlock(tableTag);`

webkit使用堆栈存放当前的元素内容，它将从外部表格的堆栈中弹出内部的表格，则它们变为了兄弟表格。

嵌套的表单元素

用户将一个表单嵌套到另一个表单中，则第二个表单将被忽略。

代码：

if (!m_currentFormElement) {

m_currentFormElement = new HTMLFormElement(formTag, m_document);

}

太深的标签继承

www.liceo.edu.mx是一个由嵌套层次的站点的例子，最多只允许20个相同类型的标签嵌套，多出来的将被忽略。

代码：

bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName)

{

unsigned i = 0;

for (HTMLStackElem* curr = m_blockStack;

i < cMaxRedundantTagDepth && curr && curr->tagName == tagName;

curr = curr->next, i++) { }

return i != cMaxRedundantTagDepth;

}

放错了地方的html、body闭合标签

又一次不言自明。

支持不完整的html。我们从来不闭合body，因为一些愚蠢的网页总是在还未真正结束时就闭合它。我们依赖调用end方法去执行关闭的处理。

代码：

1 2	`if` `(t->tagName == htmlTag \|\| t->tagName == bodyTag )` `return;`

所以，web开发者要小心了，除非你想成为webkit容错代码的范例，否则还是写格式良好的html吧。

CSS解析 CSS parsing

还记得简介中提到的解析的概念吗，不同于html，css属于上下文无关文法，可以用前面所描述的解析器来解析。Css规范定义了css的词法及语法文法。

看一些例子：

每个符号都由正则表达式定义了词法文法（词汇表）：

comment ///*[^*]*/*+([^/*][^*]*/*+)*//

num [0-9]+|[0-9]*”.”[0-9]+

nonascii [/200-/377]

nmstart [_a-z]|{nonascii}|{escape}

nmchar [_a-z0-9-]|{nonascii}|{escape}

name {nmchar}+

ident {nmstart}{nmchar}*

“ident”是识别器的缩写，相当于一个class名，“name”是一个元素id（用“＃”引用）。

语法用BNF进行描述：

ruleset

: selector [ ',' S* selector ]*

‘{’ S* declaration [ ';' S* declaration ]* ‘}’ S*

;

selector

: simple_selector [ combinator selector | S+ [ combinator selector ] ]

;

simple_selector

: element_name [ HASH | class | attrib | pseudo ]*

| [ HASH | class | attrib | pseudo ]+

;

class

: ‘.’ IDENT

;

element_name

: IDENT | ‘*’

;

attrib

: ‘[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*

[ IDENT | STRING ] S* ] ‘]’

;

pseudo

: ‘:’ [ IDENT | FUNCTION S* [IDENT S*] ‘)’ ]

;

说明：一个规则集合有这样的结构

div.error , a.error {

color:red;

font-weight:bold;

}

div.error和a.error时选择器，大括号中的内容包含了这条规则集合中的规则，这个结构在下面的定义中正式的定义了：

ruleset

: selector [ ',' S* selector ]*

‘{’ S* declaration [ ';' S* declaration ]* ‘}’ S*

;

这说明，一个规则集合具有一个或是可选个数的多个选择器，这些选择器以逗号和空格（S表示空格）进行分隔。每个规则集合包含大括号及大括号中的一条或多条以分号隔开的声明。声明和选择器在后面进行定义。

Webkit CSS 解析器 Webkit CSS parser

Webkit使用Flex和Bison解析生成器从CSS语法文件中自动生成解析器。回忆一下解析器的介绍，Bison创建一个自底向上的解析器，Firefox使用自顶向下解析器。它们都是将每个css文件解析为样式表对象，每个对象包含css规则，css规则对象包含选择器和声明对象，以及其他一些符合css语法的对象。

图12：解析css

脚本解析 Parsing scripts

本章将介绍Javascript。

处理脚本及样式表的顺序 The order of processing scripts and style sheets

脚本

web的模式是同步的，开发者希望解析到一个script标签时立即解析执行脚本，并阻塞文档的解析直到脚本执行完。如果脚本是外引的，则网络必须先请求到这个资源——这个过程也是同步的，会阻塞文档的解析直到资源被请求到。这个模式保持了很多年，并且在html4及html5中都特别指定了。开发者可以将脚本标识为defer，以使其不阻塞文档解析，并在文档解析结束后执行。Html5增加了标记脚本为异步的选项，以使脚本的解析执行使用另一个线程。

预解析 Speculative parsing

Webkit和Firefox都做了这个优化，当执行脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变Dom树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。

样式表 Style sheets

样式表采用另一种不同的模式。理论上，既然样式表不改变Dom树，也就没有必要停下文档的解析等待它们，然而，存在一个问题，脚本可能在文档的解析过程中请求样式信息，如果样式还没有加载和解析，脚本将得到错误的值，显然这将会导致很多问题，这看起来是个边缘情况，但确实很常见。Firefox在存在样式表还在加载和解析时阻塞所有的脚本，而chrome只在当脚本试图访问某些可能被未加载的样式表所影响的特定的样式属性时才阻塞这些脚本。

渲染树的构造 Render tree construction

当Dom树构建完成时，浏览器开始构建另一棵树——渲染树。渲染树由元素显示序列中的可见元素组成，它是文档的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。

Firefox将渲染树中的元素称为frames，webkit则用renderer或渲染对象来描述这些元素。

一个渲染对象直到怎么布局及绘制自己及它的children。

RenderObject是Webkit的渲染对象基类，它的定义如下：

class RenderObject{

virtual void layout();

virtual void paint(PaintInfo);

virtual void rect repaintRect();

Node* node; //the DOM node

RenderStyle* style; // the computed style

RenderLayer* containgLayer; //the containing z-index layer

}

每个渲染对象用一个和该节点的css盒模型相对应的矩形区域来表示，正如css2所描述的那样，它包含诸如宽、高和位置之类的几何信息。盒模型的类型受该节点相关的display样式属性的影响（参考样式计算章节）。下面的webkit代码说明了如何根据display属性决定某个节点创建何种类型的渲染对象。

RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)

{

Document* doc = node->document();

RenderArena* arena = doc->renderArena();

…

RenderObject* o = 0;

switch (style->display()) {

case NONE:

break;

case INLINE:

o = new (arena) RenderInline(node);

break;

case BLOCK:

o = new (arena) RenderBlock(node);

break;

case INLINE_BLOCK:

o = new (arena) RenderBlock(node);

break;

case LIST_ITEM:

o = new (arena) RenderListItem(node);

break;

…

}

return o;

}

元素的类型也需要考虑，例如，表单控件和表格带有特殊的框架。

在webkit中，如果一个元素想创建一个特殊的渲染对象，它需要复写“createRenderer”方法，使渲染对象指向不包含几何信息的样式对象。

渲染树和Dom树的关系 The render tree relation to the DOM tree

渲染对象和Dom元素相对应，但这种对应关系不是一对一的，不可见的Dom元素不会被插入渲染树，例如head元素。另外，display属性为none的元素也不会在渲染树中出现（visibility属性为hidden的元素将出现在渲染树中）。

还有一些Dom元素对应几个可见对象，它们一般是一些具有复杂结构的元素，无法用一个矩形来描述。例如，select元素有三个渲染对象——一个显示区域、一个下拉列表及一个按钮。同样，当文本因为宽度不够而折行时，新行将作为额外的渲染元素被添加。另一个多个渲染对象的例子是不规范的html，根据css规范，一个行内元素只能仅包含行内元素或仅包含块状元素，在存在混合内容时，将会创建匿名的块状渲染对象包裹住行内元素。

一些渲染对象和所对应的Dom节点不在树上相同的位置，例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。

图12：渲染树及对应的Dom树

创建树的流程 The flow of constructing the tree

Firefox中，表述为一个监听Dom更新的监听器，将frame的创建委派给Frame Constructor，这个构建器计算样式（参看样式计算）并创建一个frame。

Webkit中，计算样式并生成渲染对象的过程称为attachment，每个Dom节点有一个attach方法，attachment的过程是同步的，调用新节点的attach方法将节点插入到Dom树中。

处理html和body标签将构建渲染树的根，这个根渲染对象对应被css规范称为containing block的元素——包含了其他所有块元素的顶级块元素。它的大小就是viewport——浏览器窗口的显示区域，Firefox称它为 viewPortFrame，webkit称为RenderView，这个就是文档所指向的渲染对象，树中其他的部分都将作为一个插入的Dom节点被创建。

样式计算 Style Computation

创建渲染树需要计算出每个渲染对象的可视属性，这可以通过计算每个元素的样式属性得到。

样式包括各种来源的样式表，行内样式元素及html中的可视化属性（例如bgcolor），可视化属性转化为css样式属性。

样式表来源于浏览器默认样式表，及页面作者和用户提供的样式表——有些样式是浏览器用户提供的（浏览器允许用户定义喜欢的样式，例如，在Firefox中，可以通过在Firefox Profile目录下放置样式表实现）。

计算样式的一些困难：

1. 样式数据是非常大的结构，保存大量的样式属性会带来内存问题

2. 如果不进行优化，找到每个元素匹配的规则会导致性能问题，为每个元素查找匹配的规则都需要遍历整个规则表，这个过程有很大的工作量。选择符可能有复杂的结构，匹配过程如果沿着一条开始看似正确，后来却被证明是无用的路径，则必须去尝试另一条路径。

例如，下面这个复杂选择符

1	`div div div div｛…｝`

这意味着规则应用到三个div的后代div元素，选择树上一条特定的路径去检查，这可能需要遍历节点树，最后却发现它只是两个div的后代，并不使用该规则，然后则需要沿着另一条路径去尝试

3. 应用规则涉及非常复杂的级联，它们定义了规则的层次

我们来看一下浏览器如何处理这些问题：

共享样式数据

webkit节点引用样式对象（渲染样式），某些情况下，这些对象可以被节点间共享，这些节点需要是兄弟或是表兄弟节点，并且：

▲这些元素必须处于相同的鼠标状态（比如不能一个处于hover，而另一个不是）

▲不能有元素具有id

▲标签名必须匹配

▲class属性必须匹配

▲对应的属性必须相同

▲链接状态必须匹配

▲焦点状态必须匹配

▲不能有元素被属性选择器影响

▲元素不能有行内样式属性

▲不能有生效的兄弟选择器，webcore在任何兄弟选择器相遇时只是简单的抛出一个全局转换，并且在它们显示时使整个文档的样式共享失效，这些包括＋选择器和类似:first-child和:last-child这样的选择器。

Firefox规则树 Firefox rule tree

Firefox用两个树用来简化样式计算－规则树和样式上下文树，webkit也有样式对象，但它们并没有存储在类似样式上下文树这样的树中，只是由Dom节点指向其相关的样式。

图14：Firefox样式上下文树

样式上下文包含最终值，这些值是通过以正确顺序应用所有匹配的规则，并将它们由逻辑值转换为具体的值，例如，如果逻辑值为屏幕的百分比，则通过计算将其转化为绝对单位。样式树的使用确实很巧妙，它使得在节点中共享的这些值不需要被多次计算，同时也节省了存储空间。

所有匹配的规则都存储在规则树中，一条路径中的底层节点拥有最高的优先级，这棵树包含了所找到的所有规则匹配的路径（译注：可以取巧理解为每条路径对应一个节点，路径上包含了该节点所匹配的所有规则）。规则树并不是一开始就为所有节点进行计算，而是在某个节点需要计算样式时，才进行相应的计算并将计算后的路径添加到树中。

我们将树上的路径看成辞典中的单词，假如已经计算出了如下的规则树：

假如需要为内容树中的另一个节点匹配规则，现在知道匹配的规则（以正确的顺序）为B-E-I，因为我们已经计算出了路径A-B-E-I-L，所以树上已经存在了这条路径，剩下的工作就很少了。

现在来看一下树如何保存。

结构化

样式上下文按结构划分，这些结构包括类似border或color这样的特定分类的样式信息。一个结构中的所有特性不是继承的就是非继承的，对继承的特性，除非元素自身有定义，否则就从它的parent继承。非继承的特性（称为reset特性）如果没有定义，则使用默认的值。

样式上下文树缓存完整的结构（包括计算后的值），这样，如果底层节点没有为一个结构提供定义，则使用上层节点缓存的结构。

使用规则树计算样式上下文

当为一个特定的元素计算样式时，首先计算出规则树中的一条路径，或是使用已经存在的一条，然后使用路径中的规则去填充新的样式上下文，从样式的底层节点开始，它具有最高优先级（通常是最特定的选择器），遍历规则树，直到填满结构。如果在那个规则节点没有定义所需的结构规则，则沿着路径向上，直到找到该结构规则。

如果最终没有找到该结构的任何规则定义，那么如果这个结构是继承型的，则找到其在内容树中的parent的结构，这种情况下，我们也成功的共享了结构；如果这个结构是reset型的，则使用默认的值。

如果特定的节点添加了值，那么需要做一些额外的计算以将其转换为实际值，然后在树上的节点缓存该值，使它的children可以使用。

当一个元素和它的一个兄弟元素指向同一个树节点时，完整的样式上下文可以被它们共享。

来看一个例子：假设有下面这段html

<html>

<body>

<div class=”err” id=”div1″>

<p>this is a

<span class=”big”> big error </span>

this is also a

<span class=”big”> very big error</span>

error

</p>

</div>

<div class=”err” id=”div2″>another error</div>

</body>

</html>

以及下面这些规则

1. div {margin:5px;color:black}

2. .err {color:red}

3. .big {margin-top:3px}

4. div span {margin-bottom:4px}

5. #div1 {color:blue}

6. #div2 {color:green}

简化下问题，我们只填充两个结构——color和margin，color结构只包含一个成员－颜色，margin结构包含四边。

生成的规则树如下（节点名：指向的规则）

上下文树如下（节点名：指向的规则节点）

假设我们解析html，遇到第二个div标签，我们需要为这个节点创建样式上下文，并填充它的样式结构。

我们进行规则匹配，找到这个div匹配的规则为1、2、6，我们发现规则树上已经存在了一条我们可以使用的路径1、2，我们只需为规则6新增一个节点添加到下面（就是规则树中的F）。

然后创建一个样式上下文并将其放到上下文树中，新的样式上下文将指向规则树中的节点F。

现在我们需要填充这个样式上下文，先从填充margin结构开始，既然最后一个规则节点没有添加margin结构，沿着路径向上，直到找到缓存的前面插入节点计算出的结构，我们发现B是最近的指定margin值的节点。因为已经有了color结构的定义，所以不能使用缓存的结构，既然color只有一个属性，也就不需要沿着路径向上填充其他属性。计算出最终值（将字符串转换为RGB等），并缓存计算后的结构。

第二个span元素更简单，进行规则匹配后发现它指向规则G，和前一个span一样，既然有兄弟节点指向同一个节点，就可以共享完整的样式上下文，只需指向前一个span的上下文。

因为结构中包含继承自parent的规则，上下文树做了缓存（color特性是继承来的，但Firefox将其视为reset并在规则树中缓存）。

例如，如果我们为一个paragraph的文字添加规则：

p {font-family:Verdana;font size:10px;font-weight:bold}

那么这个p在内容树中的子节点div，会共享和它parent一样的font结构，这种情况发生在没有为这个div指定font规则时。

Webkit中，并没有规则树，匹配的声明会被遍历四次，先是应用非important的高优先级属性（之所以先应用这些属性，是因为其他的依赖于它们－比如display），其次是高优先级important的，接着是一般优先级非important的，最后是一般优先级important的规则。这样，出现多次的属性将被按照正确的级联顺序进行处理，最后一个生效。

总结一下，共享样式对象（结构中完整或部分内容）解决了问题1和3，Firefox的规则树帮助以正确的顺序应用规则。

对规则进行处理以简化匹配过程

样式规则有几个来源：

· 外部样式表或style标签内的css规则

· 行内样式属性

· html可视化属性（映射为相应的样式规则）

后面两个很容易匹配到元素，因为它们所拥有的样式属性和html属性可以将元素作为key进行映射。

就像前面问题2所提到的，css的规则匹配可能很狡猾，为了解决这个问题，可以先对规则进行处理，以使其更容易被访问。

解析完样式表之后，规则会根据选择符添加一些hash映射，映射可以是根据id、class、标签名或是任何不属于这些分类的综合映射。如果选择符为id，规则将被添加到id映射，如果是class，则被添加到class映射，等等。

这个处理是匹配规则更容易，不需要查看每个声明，我们能从映射中找到一个元素的相关规则，这个优化使在进行规则匹配时减少了95＋％的工作量。

来看下面的样式规则：

p.error {color:red}

#messageDiv {height:50px}

div {margin:5px}

第一条规则将被插入class映射，第二条插入id映射，第三条是标签映射。

下面这个html片段：

<p class=”error”>an error occurred </p>

<div id=” messageDiv”>this is a message</div>

我们首先找到p元素对应的规则，class映射将包含一个“error”的key，找到p.error的规则，div在id映射和标签映射中都有相关的规则，剩下的工作就是找出这些由key对应的规则中哪些确实是正确匹配的。

例如，如果div的规则是

table div {margin:5px}

这也是标签映射产生的，因为key是最右边的选择符，但它并不匹配这里的div元素，因为这里的div没有table祖先。

Webkit和Firefox都会做这个处理。

以正确的级联顺序应用规则

样式对象拥有对应所有可见属性的属性，如果特性没有被任何匹配的规则所定义，那么一些特性可以从parent的样式对象中继承，另外一些使用默认值。

这个问题的产生是因为存在不止一处的定义，这里用级联顺序解决这个问题。

样式表的级联顺序

一个样式属性的声明可能在几个样式表中出现，或是在一个样式表中出现多次，因此，应用规则的顺序至关重要，这个顺序就是级联顺序。根据css2的规范，级联顺序为（从低到高）：

1. 浏览器声明

2. 用户声明

3. 作者的一般声明

4. 作者的important声明

5. 用户important声明

浏览器声明是最不重要的，用户只有在声明被标记为important时才会覆盖作者的声明。具有同等级别的声明将根据specifity以及它们被定义时的顺序进行排序。Html可视化属性将被转换为匹配的css声明，它们被视为最低优先级的作者规则。

Specifity

Css2规范中定义的选择符specifity如下：

· 如果声明来自style属性，而不是一个选择器的规则，则计1，否则计0（＝a）

· 计算选择器中id属性的数量（＝b）

· 计算选择器中class及伪类的数量（＝c）

· 计算选择器中元素名及伪元素的数量（＝d）

连接a－b－c－d四个数量（用一个大基数的计算系统）将得到specifity。这里使用的基数由分类中最高的基数定义。例如，如果a为14，可以使用16进制。不同情况下，a为17时，则需要使用阿拉伯数字17作为基数，这种情况可能在这个选择符时发生html body div div …（选择符中有17个标签，一般不太可能）。

一些例子：

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */

ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */

h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */

#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */

style=”" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

规则排序

规则匹配后，需要根据级联顺序对规则进行排序，webkit先将小列表用冒泡排序，再将它们合并为一个大列表，webkit通过为规则复写“>”操作来执行排序：

static bool operator >(CSSRuleData& r1, CSSRuleData& r2)

{

int spec1 = r1.selector()->specificity();

int spec2 = r2.selector()->specificity();

return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2;

}

逐步处理 Gradual process

webkit使用一个标志位标识所有顶层样式表都已加载，如果在attch时样式没有完全加载，则放置占位符，并在文档中标记，一旦样式表完成加载就重新进行计算。

布局 Layout

当渲染对象被创建并添加到树中，它们并没有位置和大小，计算这些值的过程称为layout或reflow。

Html使用基于流的布局模型，意味着大部分时间，可以以单一的途径进行几何计算。流中靠后的元素并不会影响前面元素的几何特性，所以布局可以在文档中从右向左、自上而下的进行。也存在一些例外，比如html tables。

坐标系统相对于根frame，使用top和left坐标。

布局是一个递归的过程，由根渲染对象开始，它对应html文档元素，布局继续递归的通过一些或所有的frame层级，为每个需要几何信息的渲染对象进行计算。

根渲染对象的位置是0,0，它的大小是viewport－浏览器窗口的可见部分。

所有的渲染对象都有一个layout或reflow方法，每个渲染对象调用需要布局的children的layout方法。

Dirty bit 系统

为了不因为每个小变化都全部重新布局，浏览器使用一个dirty bit系统，一个渲染对象发生了变化或是被添加了，就标记它及它的children为dirty－需要layout。存在两个标识－dirty及 children are dirty，children are dirty说明即使这个渲染对象可能没问题，但它至少有一个child需要layout。

全局和增量 layout

当layout在整棵渲染树触发时，称为全局layout，这可能在下面这些情况下发生：

1. 一个全局的样式改变影响所有的渲染对象，比如字号的改变

2. 窗口resize

layout也可以是增量的，这样只有标志为dirty的渲染对象会重新布局（也将导致一些额外的布局）。增量 layout会在渲染对象dirty时异步触发，例如，当网络接收到新的内容并添加到Dom树后，新的渲染对象会添加到渲染树中。

图20：增量 layout

异步和同步layout

增量layout的过程是异步的，Firefox为增量layout生成了reflow队列，以及一个调度执行这些批处理命令。Webkit也有一个计时器用来执行增量layout－遍历树，为dirty状态的渲染对象重新布局。

另外，当脚本请求样式信息时，例如“offsetHeight”，会同步的触发增量布局。

全局的layout一般都是同步触发。

有些时候，layout会被作为一个初始layout之后的回调，比如滑动条的滑动。

优化

当一个layout因为resize或是渲染位置改变（并不是大小改变）而触发时，渲染对象的大小将会从缓存中读取，而不会重新计算。

一般情况下，如果只有子树发生改变，则layout并不从根开始。这种情况发生在，变化发生在元素自身并且不影响它周围元素，例如，将文本插入文本域（否则，每次击键都将触发从根开始的重排）。

layout过程

layout一般有下面这几个部分：

1. parent渲染对象决定它的宽度

2. parent渲染对象读取chilidren，并：

1. 放置child渲染对象（设置它的x和y）

2. 在需要时（它们当前为dirty或是处于全局layout或者其他原因）调用child渲染对象的layout，这将计算child的高度

3. parent渲染对象使用child渲染对象的累积高度，以及margin和padding的高度来设置自己的高度－这将被parent渲染对象的parent使用

4. 将dirty标识设置为false

Firefox使用一个“state”对象（nsHTMLReflowState）做为参数去布局（firefox称为reflow），state包含parent的宽度及其他内容。

Firefox布局的输出是一个“metrics”对象（nsHTMLReflowMetrics）。它包括渲染对象计算出的高度。

宽度计算

渲染对象的宽度使用容器的宽度、渲染对象样式中的宽度及margin、border进行计算。例如，下面这个div的宽度：

1	`<div` `style=”width:30%”/>`

webkit中宽度的计算过程是（RenderBox类的calcWidth方法）：

· 容器的宽度是容器的可用宽度和0中的最大值，这里的可用宽度为：contentWidth=clientWidth()-paddingLeft()-paddingRight()，clientWidth和 clientHeight代表一个对象内部的不包括border和滑动条的大小

· 元素的宽度指样式属性width的值，它可以通过计算容器的百分比得到一个绝对值

· 加上水平方向上的border和padding

到这里是最佳宽度的计算过程，现在计算宽度的最大值和最小值，如果最佳宽度大于最大宽度则使用最大宽度，如果小于最小宽度则使用最小宽度。最后缓存这个值，当需要layout但宽度未改变时使用。

Line breaking

当一个渲染对象在布局过程中需要折行时，则暂停并告诉它的parent它需要折行，parent将创建额外的渲染对象并调用它们的layout。

绘制 Painting

绘制阶段，遍历渲染树并调用渲染对象的paint方法将它们的内容显示在屏幕上，绘制使用UI基础组件，这在UI的章节有更多的介绍。

全局和增量

和布局一样，绘制也可以是全局的－绘制完整的树－或增量的。在增量的绘制过程中，一些渲染对象以不影响整棵树的方式改变，改变的渲染对象使其在屏幕上的矩形区域失效，这将导致操作系统将其看作dirty区域，并产生一个paint事件，操作系统很巧妙的处理这个过程，并将多个区域合并为一个。 Chrome中，这个过程更复杂些，因为渲染对象在不同的进程中，而不是在主进程中。Chrome在一定程度上模拟操作系统的行为，表现为监听事件并派发消息给渲染根，在树中查找到相关的渲染对象，重绘这个对象（往往还包括它的children）。

绘制顺序

css2定义了绘制过程的顺序－http://www.w3.org/TR/CSS21/zindex.html。这个就是元素压入堆栈的顺序，这个顺序影响着绘制，堆栈从后向前进行绘制。

一个块渲染对象的堆栈顺序是：

1. 背景色

2. 背景图

3. border

4. children

5. outline

Firefox显示列表

Firefox读取渲染树并为绘制的矩形创建一个显示列表，该列表以正确的绘制顺序包含这个矩形相关的渲染对象。

用这样的方法，可以使重绘时只需查找一次树，而不需要多次查找——绘制所有的背景、所有的图片、所有的border等等。

Firefox优化了这个过程，它不添加会被隐藏的元素，比如元素完全在其他不透明元素下面。

Webkit矩形存储

重绘前，webkit将旧的矩形保存为位图，然后只绘制新旧矩形的差集。

动态变化

浏览器总是试着以最小的动作响应一个变化，所以一个元素颜色的变化将只导致该元素的重绘，元素位置的变化将大致元素的布局和重绘，添加一个Dom节点，也会大致这个元素的布局和重绘。一些主要的变化，比如增加html元素的字号，将会导致缓存失效，从而引起整数的布局和重绘。

渲染引擎的线程

渲染引擎是单线程的，除了网络操作以外，几乎所有的事情都在单一的线程中处理，在Firefox和Safari中，这是浏览器的主线程，Chrome中这是tab的主线程。

网络操作由几个并行线程执行，并行连接的个数是受限的（通常是2－6个）。

事件循环

浏览器主线程是一个事件循环，它被设计为无限循环以保持执行过程的可用，等待事件（例如layout和paint事件）并执行它们。下面是Firefox的主要事件循环代码。

1 2	`while` `(!mExiting)` `NS_ProcessNextEvent(thread);`

CSS2 可视模型 CSS2 visual module

画布 The Canvas

根据CSS2规范，术语canvas用来描述格式化的结构所渲染的空间——浏览器绘制内容的地方。画布对每个维度空间都是无限大的，但浏览器基于viewport的大小选择了一个初始宽度。

根据http://www.w3.org/TR/CSS2/zindex.html的定义，画布如果是包含在其他画布内则是透明的，否则浏览器会指定一个颜色。

CSS盒模型

CSS盒模型描述了矩形盒，这些矩形盒是为文档树中的元素生成的，并根据可视的格式化模型进行布局。每个box包括内容区域（如图片、文本等）及可选的四周padding、border和margin区域。

每个节点生成0－n个这样的box。

所有的元素都有一个display属性，用来决定它们生成box的类型，例如：

block－生成块状box

inline－生成一个或多个行内box

none－不生成box

默认的是inline，但浏览器样式表设置了其他默认值，例如，div元素默认为block。可以访问http://www.w3.org/TR/CSS2/sample.html查看更多的默认样式表示例。

定位策略 Position scheme

这里有三种策略：

1. normal－对象根据它在文档的中位置定位，这意味着它在渲染树和在Dom树中位置一致，并根据它的盒模型和大小进行布局

2. float－对象先像普通流一样布局，然后尽可能的向左或是向右移动

3. absolute－对象在渲染树中的位置和Dom树中位置无关

static和relative是normal，absolute和fixed属于absolute。

在static定位中，不定义位置而使用默认的位置。其他策略中，作者指定位置——top、bottom、left、right。

Box布局的方式由这几项决定：box的类型、box的大小、定位策略及扩展信息（比如图片大小和屏幕尺寸）。

Box类型

Block box：构成一个块，即在浏览器窗口上有自己的矩形

Inline box：并没有自己的块状区域，但包含在一个块状区域内

block一个挨着一个垂直格式化，inline则在水平方向上格式化。

Inline盒模型放置在行内或是line box中，每行至少和最高的box一样高，当box以baseline对齐时——即一个元素的底部和另一个box上除底部以外的某点对齐，行高可以比最高的box高。当容器宽度不够时，行内元素将被放到多行中，这在一个p元素中经常发生。

定位 Position

Relative

相对定位——先按照一般的定位，然后按所要求的差值移动。

Floats

一个浮动的box移动到一行的最左边或是最右边，其余的box围绕在它周围。下面这段html：

<p>

<img

style=”float:right” src=”images/image.gif” width=”100″ height=”100″>Lorem ipsum dolor sit amet, consectetuer…

</p>

将显示为：

Absolute和Fixed

这种情况下的布局完全不顾普通的文档流，元素不属于文档流的一部分，大小取决于容器。Fixed时，容器为viewport（可视区域）。

图17：fixed

注意－fixed即使在文档流滚动时也不会移动。

Layered representation

这个由CSS属性中的z-index指定，表示盒模型的第三个大小，即在z轴上的位置。Box分发到堆栈中（称为堆栈上下文），每个堆栈中靠后的元素将被较早绘制，栈顶靠前的元素离用户最近，当发生交叠时，将隐藏靠后的元素。堆栈根据z-index属性排序，拥有z-index属性的box形成了一个局部堆栈，viewport有外部堆栈，例如：

<STYLE type=”text/css”>

div {

position: absolute;

left: 2in;

top: 2in;

}

</STYLE>

<P>

<DIV

style=”z-index: 3;background-color:red; width: 1in; height: 1in; “>

</DIV>

<DIV

style=”z-index: 1;background-color:green;width: 2in; height: 2in;”>

</DIV>

</p>

结果是：

虽然绿色div排在红色div后面，可能在正常流中也已经被绘制在后面，但z-index有更高优先级，所以在根box的堆栈中更靠前。

国外也有网友根据浏览器的工作原理绘制了几张工作流程图，方便大家通过简易的图片来了解这个辛苦的过程：

原文：http://taligarsiel.com/Projects/howbrowserswork1.htm

http://blog.jobbole.com/12749/

本文链接

JavaScript 作用域链解析

2012-02-03T08:54:00Z

最近看了下JavaScript方面的几本书，把里面的一些核心概念按照自己的理解做个总结。

JavaScript中有Scope(作用域)，Scope chain(作用域链)，Execute context(执行上下文)，Active Object (活动对象),Dynamic Scope(动态作用域)，Closure(闭包)这些概念，要理解这些概念，我们从静态和动态两个方面去分析一下。

首先我们写一个简单的function来做一个例子：

function add(num1, num2){

var sum = num1 + num2;

return sum;

}

我们定义了一个具有两个形参的add函数。

静态方面：

当创建add函数的时候，Javascript引擎会创建add函数的Scope chain,这个作用域链指向了Global Context(全局上下文)。如果用图形形象化的表述如下图所示：

从上图可以看出，当add函数创建的时候，作用域链就已经创建了，因此可以得出一个结论，函数的作用域链是创建函数的时候就已经创建了，而不是动态运行期。下面就来看看动态运行期的时候会发生什么事情。

动态方面：

当执行add函数的时候，JavaScript会创建一个Execute context（执行上下文），执行上下文中就包含了add函数运行期所需要的所有信息。Execute context也有自己的Scope chain,当函数运行的时候，JavaScript引擎会首先从用add函数的作用域链来初始化执行上下文的作用域链，然后JavaScript引擎又会创建一个Active Object,这个对象里面包含了函数运行期的所有局部变量，参数以及this等变量。

如果形象的描述add函数动态运行期会发生什么，可以用如下图来描述：

从上图可以看出，执行上下文是一个动态的概念，它是当函数运行的时候创建的，同时Active Object对象也是一个动态的概念，它是被执行上下文的作用域链引用的。因此可以得出一个结论：执行上下文和活动对象都是动态概念，并且执行上下文的作用域链是由函数作用域链初始化的。

上面说了函数作用域和执行上下文作用域，下面接着说一下动态作用域的问题，当在JavaScript通过with语句，try-catch的catch子句，以及eval方法的时候，JavaScript引擎就会动态的改变执行上下文的作用域。下面还是通过一个例子来看看：

function initUI(){

with (document){ //avoid!

var bd = body,

links = getElementsByTagName("a"),

i= 0,

len = links.length;

while(i < len){

update(links[i++]);

}

getElementById("go-btn").onclick = function(){

start();

};

bd.className = "active";

}

当执行上面的initUI函数的时候，JavaScript会动态的创建一个with 语句对应的作用域放到执行上下文作用域链的最前端，通过下图可以形象的描述上述过程，下图红色标注的区域就显示了with语句产生的作用域。

最后，我们来看看JavaScript最神秘的Closure（闭包），闭包在JavaScript其实就是一个函数，闭包是在函数运行期被创建的，下面还是以一个实例来看看：

function assignEvents(){

var id = "xdi9592";

document.getElementById("save-btn").onclick = function(event){

saveDocument(id);

};

}

当上面的assignEvents函数被执行的时候，会创建一个闭包，而这个闭包会引用assignEvents作用域中的id变量，如果按照传统的编程语言的方式，id是存储在堆栈上的一个变量，当函数执行完了以后id就消失，那么怎么可能再次引用呢？显然这里JavaScript采用了另外的方式。下面就来看看JavaScript是如何来实现闭包的。当执行assignEvents函数的时候，JavaScript引擎会创建函数作用域链，这个作用域链包含了assignEvents执行时的活动对象，而同时JavaScript引擎也会创建一个闭包，而闭包的作用域链也会引用assignEvent执行时候的活动对象，这样当assignEvents执行完的时候，虽然它本身执行上下文的作用域链不再引用活动对象了，但是闭包还是引用着assignEvents运行期对应的活动对象，这就解释了JavaScipt内部的闭包机制。可以用下图形象的表述上面assignEvents函数运行期的情形：

从上面可以看出，当assignEvents函数执行完毕以后，document.getElementById("save-btn").onclick 引用了闭包，这样当用户点击save-btn的时候，就会触发闭包的执行，那么下面就来看看闭包执行时的情形。前面也说了JavaScript中闭包其实就是函数，因此闭包执行和函数执行时的情形是一致的，通过下图来形象的描述上述onclick事件所关联的闭包。

从上图可以看出JavaScript引擎首先创建了闭包的执行上下文，然后用闭包作用域链来初始化闭包的执行上下文作用域链，最后再将闭包执行时对应的活动对象放入到作用域的最前端，这也进一步验证了闭包就是函数的论断。

参考资料：

1.High Performance JavaScript. http://book.douban.com/subject/5362856/

2.JavaScript高级程序设计. http://book.douban.com/subject/4886879/

转载：

http://www.starming.com/index.php?action=plugin&v=wave&tpl=union&ac=viewgrouppost&gid=119&tid=17313

本文链接

转载：Javascript作用域原理

2012-02-03T08:53:00Z

问题的提出

首先看一个例子:

var name = 'laruence';
function echo() {
     alert(name);
     var name = 'eve';
     alert(name);
     alert(age);
}
echo();

运行结果是什么呢?

上面的问题, 我相信会有很多人会认为是:

laruence
eve
[脚本出错]

因为会以为在echo中, 第一次alert的时候, 会取到全局变量name的值, 而第二次值被局部变量name覆盖, 所以第二次alert是’eve’. 而age属性没有定义, 所以脚本会出错.

但其实, 运行结果应该是:

undefined
eve
[脚本出错]

为什么呢?

JavaScript的作用域链

首先让让我们来看看Javasript(简称JS, 不完全代表JScript)的作用域的原理: JS权威指南中有一句很精辟的描述:　”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”　

为了接下来的知识, 你能顺利理解, 我再提醒一下, 在JS中:”一切皆是对象, 函数也是”.

在JS中，作用域的概念和其他语言差不多，在每次调用一个函数的时候，就会进入一个函数内的作用域，当从函数返回以后，就返回调用前的作用域.

JS的语法风格和C/C++类似, 但作用域的实现却和C/C++不同，并非用“堆栈”方式，而是使用列表，具体过程如下(ECMA262中所述):
任何执行上下文时刻的作用域, 都是由作用域链(scope chain, 后面介绍)来实现.
在一个函数被定义的时候, 会将它定义时刻的scope chain链接到这个函数对象的[[scope]]属性.
在一个函数对象被调用的时候，会创建一个活动对象(也就是一个对象), 然后对于每一个函数的形参，都命名为该活动对象的命名属性, 然后将这个活动对象做为此时的作用域链(scope chain)最前端, 并将这个函数对象的[[scope]]加入到scope chain中.

看个例子:

     var func = function(lps, rps){
          var name = 'laruence';
          ........
     }
     func();

在执行func的定义语句的时候, 会创建一个这个函数对象的[[scope]]属性(内部属性,只有JS引擎可以访问, 但FireFox的几个引擎(SpiderMonkey和Rhino)提供了私有属性__parent__来访问它), 并将这个[[scope]]属性, 链接到定义它的作用域链上(后面会详细介绍), 此时因为func定义在全局环境, 所以此时的[[scope]]只是指向全局活动对象window active object.

在调用func的时候, 会创建一个活动对象(假设为aObj, 由JS引擎预编译时刻创建, 后面会介绍)，并创建arguments属性, 然后会给这个对象添加俩个命名属性aObj.lps, aObj.rps; 对于每一个在这个函数中申明的局部变量和函数定义, 都作为该活动对象的同名命名属性.

然后将调用参数赋值给形参数，对于缺少的调用参数，赋值为undefined。

然后将这个活动对象做为scope chain的最前端, 并将func的[[scope]]属性所指向的,定义func时候的顶级活动对象, 加入到scope china.

有了上面的作用域链, 在发生标识符解析的时候, 就会逆向查询当前scope chain列表的每一个活动对象的属性，如果找到同名的就返回。找不到，那就是这个标识符没有被定义。

注意到, 因为函数对象的[[scope]]属性是在定义一个函数的时候决定的, 而非调用的时候, 所以如下面的例子:

     var name = 'laruence';
     function echo() {
          alert(name);
     }
     function env() {
          var name = 'eve';
          echo();
     }
     env();

运行结果是:

laruence

结合上面的知识, 我们来看看下面这个例子:

function factory() {
     var name = 'laruence';
     var intro = function(){
          alert('I am ' + name);
     }
     return intro;
}
function app(para){
     var name = para;
     var func = factory();
     func();
}
app('eve');

当调用app的时候, scope chain是由: {window活动对象(全局)}->{app的活动对象} 组成.

在刚进入app函数体时, app的活动对象有一个arguments属性, 俩个值为undefined的属性: name和func. 和一个值为’eve’的属性para;

此时的scope chain如下:

[[scope chain]] = [
{
     para : 'eve',
     name : undefined,
     func : undefined,
     arguments : []
}, {
     window call object
}
]

当调用进入factory的函数体的时候, 此时的factory的scope chain为:

[[scope chain]] = [
{
     name : undefined,
     intor : undefined
}, {
     window call object
}
]

注意到, 此时的作用域链中, 并不包含app的活动对象.

在定义intro函数的时候, intro函数的[[scope]]为:

[[scope chain]] = [
{
     name : 'laruence',
     intor : undefined
}, {
     window call object
}
]

从factory函数返回以后,在app体内调用intor的时候, 发生了标识符解析, 而此时的sope chain是:

[[scope chain]] = [
{
     intro call object
}, {
     name : 'laruence',
     intor : undefined
}, {
     window call object
}
]

因为scope chain中,并不包含factory活动对象. 所以, name标识符解析的结果应该是factory活动对象中的name属性, 也就是’laruence’.

所以运行结果是:

I am laruence

现在, 大家对”JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里.”这句话, 应该有了个全面的认识了吧?

Javascript的预编译

我们都知道,JS是一种脚本语言, JS的执行过程, 是一种翻译执行的过程.
那么JS的执行中, 有没有类似编译的过程呢?

首先, 我们来看一个例子:

     <script>
     alert(typeof eve); //function
          function eve() {
               alert('I am Laruence');
          };
     </script>

诶? 在alert的时候, eve不是应该还是未定义的么? 怎么eve的类型还是function呢?

恩, 对, 在JS中, 是有预编译的过程的, JS在执行每一段JS代码之前, 都会首先处理var关键字和function定义式(函数定义式和函数表达式).
如上文所说, 在调用函数执行之前, 会首先创建一个活动对象, 然后搜寻这个函数中的局部变量定义,和函数定义, 将变量名和函数名都做为这个活动对象的同名属性, 对于局部变量定义,变量的值会在真正执行的时候才计算, 此时只是简单的赋为undefined.

而对于函数的定义,是一个要注意的地方:

<script>
     alert(typeof eve); //结果:function
     alert(typeof walle); //结果:undefined
     function eve() { //函数定义式
          alert('I am Laruence');
     };
     var walle = function() { //函数表达式
     }
     alert(typeof walle); //结果:function
</script>

这就是函数定义式和函数表达式的不同, 对于函数定义式, 会将函数定义提前. 而函数表达式, 会在执行过程中才计算.

说到这里, 顺便说一个问题 :

     var name = 'laruence';
     age = 26;

我们都知道不使用var关键字定义的变量, 相当于是全局变量, 联系到我们刚才的知识:

在对age做标识符解析的时候, 因为是写操作, 所以当找到到全局的window活动对象的时候都没有找到这个标识符的时候, 会在window活动对象的基础上, 返回一个值为undefined的age属性.

也就是说, age会被定义在顶级作用域中.

现在, 也许你注意到了我刚才说的: JS在执行每一段JS代码..
对, 让我们看看下面的例子:

<script>
     alert(typeof eve); //结果:undefined
</script>
<script>
     function eve() {
          alert('I am Laruence');
     }
</script>

明白了么? 也就是JS的预编译是以段为处理单元的…

揭开谜底

现在让我们回到我们的第一个问题:

当echo函数被调用的时候, echo的活动对象已经被预编译过程创建, 此时echo的活动对象为:

[callObj] = {
name : undefined
}

当第一次alert的时候, 发生了标识符解析, 在echo的活动对象中找到了name属性, 所以这个name属性, 完全的遮挡了全局活动对象中的name属性.

现在你明白了吧?

未找到出处，请知道的人告之。

本文链接

JavaScript中的值类型和引用类型

2012-02-02T02:58:00Z

一、拥抱JavaScript

曾经名不经传的JavaScript随着AJAX的流行而身价倍增，现在JavaScript不再仅仅是WEB开发中一个可有可无的辅助工具，甚至有了专门属于它的职位“JavaScript工程师”，那怕你仅仅是一名WEB后台开发程序员，你都必须了解JavaScript，至少在一些相关招聘职位要求上你可以看到“熟悉JavaScript优先”的字眼。甚至我还要告诉你，你将可以用JavaScript开发桌面软件，这得益于Adobe AIR的另外一种开发模式，即用HTML+CSS+JavaScript开发AIR。

二、值类型和引用类型话题

随着部分有大型面向对象语言基础朋友的介入，他们试着用JavaScript去模拟面像对象的各种特征，尽管有些模拟显得较为牵强，但也让我们见识到了JavaScript的强大与灵活性。本文暂不探讨JavaScript面向对象编程技术。就讲讲JavaScript中的两种变量类型：即值类型和引用类型，这通常又会让你联想到“堆栈”，另外还有“引用地址”或“指针”相关概念，有过Java或C#编程经验的人相信对这两种类型不陌生。下面就举例讲一下这两种类型在JavaScript中的体现、用法及注意事项。

三、JavaScript值类型和引用类型有哪些

（1）值类型：数值、布尔值、null、undefined。

（2）引用类型：对象、数组、函数。

四、如何理解值类型和引用类型及举例

我们可以用“连锁店”和“连锁店钥匙”来理解，不知道以下比喻合不合适，^-^。

（1）值类型理解：变量的交换等于在一个新的地方按照连锁店的规范标准（统一店面理解为相同的变量内容）新开一个分店，这样新开的店与其它旧店互不相关、各自运营。

【值类型例子】

function chainStore()
{
    var store1='Nike China';
    var store2=store1;
    store1='Nike U.S.A.';
    alert(store2); //Nike China
}
chainStore();
//把一个值类型（也可以叫基本类型）store2传递给另一个变量（赋值）时，其实是分配了一块新的内存空间，因此改变store1的值对store2没有任何影响，因为它不像引用类型，变量的交换其实是交换了指像同一个内容的地址。

（2）引用类型理解：变量的交换等于把现有一间店的钥匙（变量引用地址）复制一把给了另外一个老板，此时两个老板同时管理一间店，两个老板的行为都有可能对一间店的运营造成影响。

【引用类型例子】

function chainStore()
{
    var store1=['Nike China'];
    var store2=store1;
    alert(store2[0]); //Nike China
    store1[0]='Nike U.S.A.';
    alert(store2[0]); //Nike U.S.A.
}
chainStore();
//在上面的代码中，store2只进行了一次赋值，理论上它的值已定，但后面通过改写store1的值，发现store2的值也发生了改变，这正是引用类型的特征，也是我们要注意的地方。

转载：

http://www.cnblogs.com/webflash/archive/2009/08/22/1552042.html

本文链接

JavaScript 秘密花园 http://bonsaiden.github.com/JavaScript-Garden/zh/

2012-02-01T08:22:00Z

简介

JavaScript 秘密花园是一个不断更新，主要关心 JavaScript 一些古怪用法的文档。对于如何避免常见的错误，难以发现的问题，以及性能问题和不好的实践给出建议，初学者可以籍此深入了解 JavaScript 的语言特性。

JavaScript 秘密花园不是用来教你 JavaScript。为了更好的理解这篇文章的内容，你需要事先学习 JavaScript 的基础知识。在 Mozilla 开发者网络中有一系列非常棒的 JavaScript 学习向导。

关于作者

这篇文章的作者是两位 Stack Overflow 用户, 伊沃·韦特泽尔 Ivo Wetzel（写作）和张易江 Zhang Yi Jiang（设计）。

贡献者

Caio Romão （拼写检查）
Andreas Blixt （语言修正）

中文翻译

三生石上

此中文翻译由三生石上独立完成，博客园首发，转载请注明出处。

许可

JavaScript 秘密花园在 MIT license 许可协议下发布，并存放在 GitHub 开源社区。如果你发现错误或者打字错误，请新建一个任务单或者发一个抓取请求。你也可以在 Stack Overflow 的 JavaScript 聊天室找到我们。

对象

对象使用和属性

JavaScript 中所有变量都是对象，除了两个例外 null 和 undefined。

false.toString() // 'false'
[1, 2, 3].toString(); // '1,2,3'

function Foo(){}
Foo.bar = 1;
Foo.bar; // 1

一个常见的误解是数字的字面值（literal）不是对象。这是因为 JavaScript 解析器的一个错误，它试图将点操作符解析为浮点数字面值的一部分。

2.toString(); // 出错：SyntaxError

有很多变通方法可以让数字的字面值看起来像对象。

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算

对象作为数据类型

JavaScript 的对象可以作为哈希表使用，主要用来保存命名的键与值的对应关系。

使用对象的字面语法 - {} - 可以创建一个简单对象。这个新创建的对象从 Object.prototype 继承下面，没有任何自定义属性。

var foo = {}; // 一个空对象

// 一个新对象，拥有一个值为12的自定义属性'test'
var bar = {test: 12};

访问属性

有两种方式来访问对象的属性，点操作符或者中括号操作符。

var foo = {name: 'Kitten'}
foo.name; // kitten
foo['name']; // kitten

var get = 'name';
foo[get]; // kitten

foo.1234; // SyntaxError
foo['1234']; // works

两种语法是等价的，但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名（译者注：比如属性名中包含空格，或者属性名是 JS 的关键词）

删除属性

删除属性的唯一方法是使用 delete 操作符；设置属性为 undefined 或者 null 并不能真正的删除属性，而仅仅是移除了属性和值的关联。

var obj = {
    bar: 1,
    foo: 2,
    baz: 3
};
obj.bar = undefined;
obj.foo = null;
delete obj.baz;

for(var i in obj) {
    if (obj.hasOwnProperty(i)) {
        console.log(i, '' + obj[i]);
    }
}

上面的输出结果有 bar undefined 和 foo null - 只有 baz 被真正的删除了，所以从输出结果中消失。

属性名的语法

var test = {
    'case': 'I am a keyword so I must be notated as a string',
    delete: 'I am a keyword too so me' // 出错：SyntaxError
};

对象的属性名可以使用字符串或者普通字符声明。但是由于 JavaScript 解析器的另一个错误设计，上面的第二种声明方式在 ECMAScript 5 之前会抛出 SyntaxError 的错误。

这个错误的原因是 delete 是 JavaScript 语言的一个关键词；因此为了在更低版本的 JavaScript 引擎下也能正常运行，必须使用字符串字面值声明方式。

原型

JavaScript 不包含传统的类继承模型，而是使用 prototypal 原型模型。

虽然这经常被当作是 JavaScript 的缺点被提及，其实基于原型的继承模型比传统的类继承还要强大。实现传统的类继承模型是很简单，但是实现 JavaScript 中的原型继承则要困难的多。 (It is for example fairly trivial to build a classic model on top of it, while the other way around is a far more difficult task.)

由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言，所以理解两种继承模式的差异是需要一定时间的。

第一个不同之处在于 JavaScript 使用原型链的继承方式。

function Foo() {
    this.value = 42;
}
Foo.prototype = {
    method: function() {}
};

function Bar() {}

// 设置Bar的prototype属性为Foo的实例对象
Bar.prototype = new Foo();
Bar.prototype.foo = 'Hello World';

// 修正Bar.prototype.constructor为Bar本身
Bar.prototype.constructor = Bar;

var test = new Bar() // 创建Bar的一个新实例

// 原型链
test [Bar的实例]
    Bar.prototype [Foo的实例] 
        { foo: 'Hello World' }
        Foo.prototype
            {method: ...};
            Object.prototype
                {toString: ... /* etc. */};

上面的例子中，test 对象从 Bar.prototype 和 Foo.prototype 继承下来；因此，它能访问 Foo 的原型方法 method。同时，它也能够访问那个定义在原型上的 Foo 实例属性 value。需要注意的是 new Bar() 不会创造出一个新的 Foo 实例，而是重复使用它原型上的那个实例；因此，所有的 Bar 实例都会共享相同的 value 属性。

属性查找

当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。

到查找到达原型链的顶部 - 也就是 Object.prototype - 但是仍然没有找到指定的属性，就会返回 undefined。

原型属性

当原型属性用来创建原型链时，可以把任何类型的值赋给它（prototype）。然而将原子类型赋给 prototype 的操作将会被忽略。

function Foo() {}
Foo.prototype = 1; // 无效

而将对象赋值给 prototype，正如上面的例子所示，将会动态的创建原型链。

性能

如果一个属性在原型链的上端，则对于查找时间将带来不利影响。特别的，试图获取一个不存在的属性将会遍历整个原型链。

并且，当使用 for in 循环遍历对象的属性时，原型链上的所有属性都将被访问。

扩展内置类型的原型

一个错误特性被经常使用，那就是扩展 Object.prototype 或者其他内置类型的原型对象。

这种技术被称之为 monkey patching 并且会破坏封装。虽然它被广泛的应用到一些 JavaScript 类库中比如 Prototype, 但是我仍然不认为为内置类型添加一些非标准的函数是个好主意。

扩展内置类型的唯一理由是为了和新的 JavaScript 保持一致，比如 Array.forEach。

总结

在写复杂的 JavaScript 应用之前，充分理解原型链继承的工作方式是每个 JavaScript 程序员必修的功课。要提防原型链过长带来的性能问题，并知道如何通过缩短原型链来提高性能。更进一步，绝对不要扩展内置类型的原型，除非是为了和新的 JavaScript 引擎兼容。

hasOwnProperty 函数

为了判断一个对象是否包含自定义属性而不是原型链上的属性，我们需要使用继承自 Object.prototype 的 hasOwnProperty 方法。

hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型链的函数。

// 修改Object.prototype
Object.prototype.bar = 1; 
var foo = {goo: undefined};

foo.bar; // 1
'bar' in foo; // true

foo.hasOwnProperty('bar'); // false
foo.hasOwnProperty('goo'); // true

只有 hasOwnProperty 可以给出正确和期望的结果，这在遍历对象的属性时会很有用。没有其它方法可以用来排除原型链上的属性，而不是定义在对象自身上的属性。

hasOwnProperty 作为属性

JavaScript 不会保护 hasOwnProperty 被非法占用，因此如果一个对象碰巧存在这个属性，就需要使用外部的 hasOwnProperty 函数来获取正确的结果。

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 总是返回 false

// 使用其它对象的 hasOwnProperty，并将其上下为设置为foo
{}.hasOwnProperty.call(foo, 'bar'); // true

结论

当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。同时在使用 for in loop 遍历对象时，推荐总是使用 hasOwnProperty 方法，这将会避免原型对象扩展带来的干扰。

for in 循环

和 in 操作符一样，for in 循环同样在查找对象属性时遍历原型链上的所有属性。

// 修改 Object.prototype
Object.prototype.bar = 1;

var foo = {moo: 2};
for(var i in foo) {
    console.log(i); // 输出两个属性：bar 和 moo
}

由于不可能改变 for in 自身的行为，因此有必要过滤出那些不希望出现在循环体中的属性，这可以通过 Object.prototype 原型上的 hasOwnProperty 函数来完成。

使用 hasOwnProperty 过滤

// foo 变量是上例中的
for(var i in foo) {
    if (foo.hasOwnProperty(i)) {
        console.log(i);
    }
}

这个版本的代码是唯一正确的写法。由于我们使用了 hasOwnProperty，所以这次只输出 moo。如果不使用 hasOwnProperty，则这段代码在原生对象原型（比如 Object.prototype）被扩展时可能会出错。

一个广泛使用的类库 Prototype 就扩展了原生的 JavaScript 对象。因此，但这个类库被包含在页面中时，不使用 hasOwnProperty 过滤的 for in 循环难免会出问题。

总结

推荐总是使用 hasOwnProperty。不要对代码运行的环境做任何假设，不要假设原生对象是否已经被扩展了。

函数

函数声明与表达式

函数是JavaScript中的一等对象，这意味着可以把函数像其它值一样传递。一个常见的用法是把匿名函数作为回调函数传递对异步函数中。

函数声明

function foo() {}

上面的方法会在执行前被解析(hoisted)，因此它存在于当前上下文的任意一个地方，即使在函数定义体的上面被调用也是对的。

foo(); // 正常运行，因为foo在代码运行前已经被创建
function foo() {}

函数赋值表达式

var foo = function() {};

这个例子把一个匿名的函数赋值给变量 foo。

foo; // 'undefined'
foo(); // 出错：TypeError
var foo = function() {};

由于 var 定义了一个声明语句，对变量 foo 的解析是在代码运行之前，因此 foo 变量在代码运行时已经被定义过了。

但是由于赋值语句只在运行时执行，因此在相应代码执行之前， foo 的值缺省为 undefined。

命名函数的赋值表达式

另外一个特殊的情况是将命名函数赋值给一个变量。

var foo = function bar() {
    bar(); // 正常运行
}
bar(); // 出错：ReferenceError

bar 函数声明外是不可见的，这是因为我们已经把函数赋值给了 foo；然而在 bar 内部依然可见。这是由于 JavaScript 的命名处理所致，函数名在函数内总是可见的。

this 的工作原理

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。在五种不同的情况下，this 指向的各不相同。

全局范围内

this;

当在全部范围内使用 this，它将会指向全局对象。

函数调用

foo();

这里 this 也会指向全局对象。

方法调用

test.foo();

这个例子中，this 指向 test 对象。

调用构造函数

new foo();

如果函数倾向于和 new 关键词一块使用，则我们称这个函数是构造函数。在函数内部，this 指向新创建的对象。

显式的设置 this

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

当使用 Function.prototype 上的 call 或者 apply 方法时，函数内的 this 将会被 显式设置为函数调用的第一个参数。

因此函数调用的规则在上例中已经不适用了，在foo 函数内 this 被设置成了 bar。

常见误解

尽管大部分的情况都说的过去，不过第一个规则（译者注：这里指的应该是第二个规则，也就是直接调用函数时，this 指向全局对象）被认为是JavaScript语言另一个错误设计的地方，因为它从来就没有实际的用途。

Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象（译者注：浏览器环境中也就是 window 对象）
    }
    test();
}

一个常见的误解是 test 中的 this 将会指向 Foo 对象，实际上不是这样子的。

为了在 test 中获取对 Foo 对象的引用，我们需要在 method 函数内部创建一个局部变量指向 Foo 对象。

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}

that 只是我们随意起的名字，不过这个名字被广泛的用来指向外部的 this 对象。在闭包一节，我们可以看到 that 可以作为参数传递。

方法的赋值表达式

另一个看起来奇怪的地方是函数别名，也就是将一个方法赋值给一个变量。

var test = someObject.methodTest;
test();

上例中，test 就像一个普通的函数被调用；因此，函数内的 this 将不再被指向到 someObject 对象。

虽然 this 的晚绑定特性似乎并不友好，但是这确实基于原型继承赖以生存的土壤。

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

当 method 被调用时，this 将会指向 Bar 的实例对象。

闭包和引用

闭包是 JavaScript 一个非常重要的特性，这意味着当前作用域总是能够访问外部作用域中的变量。因为函数是 JavaScript 中唯一拥有自身作用域的结构，因此闭包的创建依赖于函数。

模拟私有变量

function Counter(start) {
    var count = start;
    return {
        increment: function() {
            count++;
        },

        get: function() {
            return count;
        }
    }
}

var foo = Counter(4);
foo.increment();
foo.get(); // 5

这里，Counter 函数返回两个闭包，函数 increment 和函数 get。这两个函数都维持着对外部作用域 Counter 的引用，因此总可以访问此作用域内定义的变量 count.

为什么不可以在外部访问私有变量

因为 JavaScript 中不可以对作用域进行引用或赋值，因此没有办法在外部访问 count 变量。唯一的途径就是通过那两个闭包。

var foo = new Counter(4);
foo.hack = function() {
    count = 1337;
};

上面的代码不会改变定义在 Counter 作用域中的 count 变量的值，因为 foo.hack 没有定义在那个作用域内。它将会创建或者覆盖全局变量 count。

循环中的闭包

一个常见的错误出现在循环中使用闭包，假设我们需要在每次循环中调用循环序号

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

上面的代码不会输出数字 0 到 9，而是会输出数字 10 十次。

当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for循环已经结束， i 的值被修改成了 10.

为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。

避免引用错误

为了正确的获得循环序号，最好使用匿名包裹器（译者注：其实就是我们通常说的自执行匿名函数）。

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

外部的匿名函数会立即执行，并把 i 作为它的参数，此时函数内 e 变量就拥有了 i 的一个拷贝。

当传递给 setTimeout 的匿名函数执行时，它就拥有了对 e 的引用，而这个值是不会被循环改变的。

有另一个方法完成同样的工作；那就是从匿名包装器中返回一个函数。这和上面的代码效果一样。

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

arguments 对象

JavaScript 中每个函数内都能访问一个特别变量 arguments。这个变量维护着所有传递到这个函数中的参数列表。

arguments 变量不是一个数组（Array）。尽管在语法上它有数组相关的属性 length，但它不从 Array.prototype 继承，实际上它是一个对象（Object）。

因此，无法对 arguments 变量使用标准的数组方法，比如 push, pop 或者 slice。虽然使用 for 循环遍历也是可以的，但是为了更好的使用数组方法，最好把它转化为一个真正的数组。

转化为数组

下面的代码将会创建一个新的数组，包含所有 arguments 对象中的元素。

Array.prototype.slice.call(arguments);

这个转化比较慢，在性能不好的代码中不推荐这种做法。

传递参数

下面将参数从一个函数传递到另一个函数，是推荐的做法。

function foo() {
    bar.apply(null, arguments);
}
function bar(a, b, c) {
    // do stuff here
}

另一个技巧是同时使用 call 和 apply，创建一个快速的解绑定包装器。

function Foo() {}

Foo.prototype.method = function(a, b, c) {
    console.log(this, a, b, c);
};

// Create an unbound version of "method" 
// 输入参数为: this, arg1, arg2...argN
Foo.method = function() {

    // 结果: Foo.prototype.method.call(this, arg1, arg2... argN)
    Function.call.apply(Foo.prototype.method, arguments);
};

译者注：上面的 Foo.method 函数和下面代码的效果是一样的:

Foo.method = function() {
    var args = Array.prototype.slice.call(arguments);
    Foo.prototype.method.apply(args[0], args.slice(1));
};

自动更新

arguments 对象为其内部属性以及函数形式参数创建 getter 和 setter 方法。

因此，改变形参的值会影响到 arguments 对象的值，反之亦然。

function foo(a, b, c) {
    arguments[0] = 2;
    a; // 2                                                           

    b = 4;
    arguments[1]; // 4

    var d = c;
    d = 9;
    c; // 3
}
foo(1, 2, 3);

性能真相

arguments 对象总会被创建，除了两个特殊情况 - 作为局部变量声明和作为形式参数。而不管它是否有被使用。

arguments 的 getters 和 setters 方法总会被创佳；因此使用 arguments 对性能不会有什么影响。除非是需要对 arguments 对象的属性进行多次访问。

译者注：在 MDC 中对 strict mode 模式下 arguments 的描述有助于我们的理解，请看下面代码：

// 阐述在 ES5 的严格模式下 `arguments` 的特性
function f(a) {
  "use strict";
  a = 42;
  return [a, arguments[0]];
}
var pair = f(17);
assert(pair[0] === 42);
assert(pair[1] === 17);

然而，的确有一种情况会显著的影响现代 JavaScript 引擎的性能。这就是使用 arguments.callee。

function foo() {
    arguments.callee; // do something with this function object
    arguments.callee.caller; // and the calling function object
}

function bigLoop() {
    for(var i = 0; i < 100000; i++) {
        foo(); // Would normally be inlined...
    }
}

上面代码中，foo 不再是一个单纯的内联函数 inlining（译者注：这里指的是解析器可以做内联处理），因为它需要知道它自己和它的调用者。这不仅抵消了内联函数带来的性能提升，而且破坏了封装，因此现在函数可能要依赖于特定的上下文。

因此强烈建议大家不要使用 arguments.callee 和它的属性。

构造函数

JavaScript 中的构造函数和其它语言中的构造函数是不同的。通过 new 关键字方式调用的函数都被认为是构造函数。

在构造函数内部 - 也就是被调用的函数内 - this 指向新创建的对象 Object。这个新创建的对象的 prototype 被指向到构造函数的 prototype。

如果被调用的函数没有显式的 return 表达式，则隐式的会返回 this 对象 - 也就是新创建的对象。

function Foo() {
    this.bla = 1;
}

Foo.prototype.test = function() {
    console.log(this.bla);
};

var test = new Foo();

上面代码把 Foo 作为构造函数调用，并设置新创建对象的 prototype 为 Foo.prototype。

显式的 return 表达式将会影响返回结果，但仅限于返回的是一个对象。

function Bar() {
    return 2;
}
new Bar(); // 返回新创建的对象

function Test() {
    this.value = 2;

    return {
        foo: 1
    };
}
new Test(); // 返回的对象

译者注：new Bar() 返回的是新创建的对象，而不是数字的字面值 2。因此 new Bar().constructor === Bar，但是如果返回的是数字对象，结果就不同了，如下所示

function Bar() {
    return new Number(2);
}
new Bar().constructor === Number

译者注：这里得到的 new Test()是函数返回的对象，而不是通过new关键字新创建的对象，因此：

(new Test()).value === undefined
(new Test()).foo === 1

如果 new 被遗漏了，则函数不会返回新创建的对象。

function Foo() {
    this.bla = 1; // 获取设置全局参数
}
Foo(); // undefined

虽然上例在有些情况下也能正常运行，但是由于 JavaScript 中 this 的工作原理，这里的 this 指向全局对象。

工厂模式

为了不使用 new 关键字，构造函数必须显式的返回一个值。

function Bar() {
    var value = 1;
    return {
        method: function() {
            return value;
        }
    }
}
Bar.prototype = {
    foo: function() {}
};

new Bar();
Bar();

上面两种对 Bar 函数的调用返回的值完全相同，一个新创建的拥有 method 属性的对象被返回，其实这里创建了一个闭包。

还需要注意， new Bar() 并不会改变返回对象的原型（译者注：也就是返回对象的原型不会指向 Bar.prototype）。因为构造函数的原型会被指向到刚刚创建的新对象，而这里的 Bar 没有把这个新对象返回（译者注：而是返回了一个包含 method 属性的自定义对象）。

在上面的例子中，使用或者不使用 new 关键字没有功能性的区别。

译者注：上面两种方式创建的对象不能访问 Bar 原型链上的属性，如下所示：

var bar1 = new Bar();
typeof(bar1.method); // "function"
typeof(bar1.foo); // "undefined"

var bar2 = Bar();
typeof(bar2.method); // "function"
typeof(bar2.foo); // "undefined"

通过工厂模式创建新对象

我们常听到的一条忠告是不要使用 new 关键字来调用函数，因为如果忘记使用它就会导致错误。

为了创建新对象，我们可以创建一个工厂方法，并且在方法内构造一个新对象。

function Foo() {
    var obj = {};
    obj.value = 'blub';

    var private = 2;
    obj.someMethod = function(value) {
        this.value = value;
    }

    obj.getPrivate = function() {
        return private;
    }
    return obj;
}

虽然上面的方式比起 new 的调用方式不容易出错，并且可以充分利用私有变量带来的便利，但是随之而来的是一些不好的地方。

会占用更多的内存，因为新创建的对象不能共享原型上的方法。
为了实现继承，工厂方法需要从另外一个对象拷贝所有属性，或者把一个对象作为新创建对象的原型。
放弃原型链仅仅是因为防止遗漏 new 带来的问题，这似乎和语言本身的思想相违背。

总结

虽然遗漏 new 关键字可能会导致问题，但这并不是放弃使用原型链的借口。最终使用哪种方式取决于应用程序的需求，选择一种代码书写风格并坚持下去才是最重要的。

作用域与命名空间

尽管 JavaScript 支持一对花括号创建的代码段，但是并不支持块级作用域；而仅仅支持 函数作用域。

function test() { // 一个作用域
    for(var i = 0; i < 10; i++) { // 不是一个作用域
        // count
    }
    console.log(i); // 10
}

译者注：如果 return 对象的左括号和 return 不在一行上就会出错。

// 译者注：下面输出 undefined
function add(a, b) {
    return 
        a + b;
}
console.log(add(1, 2));

JavaScript 中没有显式的命名空间定义，这就意味着所有对象都定义在一个全局共享的命名空间下面。

每次引用一个变量，JavaScript 会向上遍历整个作用域直到找到这个变量为止。如果到达全局作用域但是这个变量仍未找到，则会抛出 ReferenceError 异常。

隐式的全局变量

// 脚本 A
foo = '42';

// 脚本 B
var foo = '42'

上面两段脚本效果不同。脚本 A 在全局作用域内定义了变量 foo，而脚本 B 在当前作用域内定义变量 foo。

再次强调，上面的效果完全不同，不使用 var 声明变量将会导致隐式的全局变量产生。

// 全局作用域
var foo = 42;
function test() {
    // 局部作用域
    foo = 21;
}
test();
foo; // 21

在函数 test 内不使用 var 关键字声明 foo 变量将会覆盖外部的同名变量。起初这看起来并不是大问题，但是当有成千上万行代码时，不使用 var 声明变量将会带来难以跟踪的 BUG。

// 全局作用域
var items = [/* 数组 */];
for(var i = 0; i < 10; i++) {
    subLoop();
}

function subLoop() {
    // subLoop 函数作用域
    for(i = 0; i < 10; i++) { // 没有使用 var 声明变量
        // 干活
    }
}

外部循环在第一次调用 subLoop 之后就会终止，因为 subLoop 覆盖了全局变量 i。在第二个 for 循环中使用 var 声明变量可以避免这种错误。声明变量时绝对不要遗漏 var 关键字，除非这就是期望的影响外部作用域的行为。

局部变量

JavaScript 中局部变量只可能通过两种方式声明，一个是作为函数参数，另一个是通过 var 关键字声明。

// 全局变量
var foo = 1;
var bar = 2;
var i = 2;

function test(i) {
    // 函数 test 内的局部作用域
    i = 5;

    var foo = 3;
    bar = 4;
}
test(10);

foo 和 i 是函数 test 内的局部变量，而对 bar 的赋值将会覆盖全局作用域内的同名变量。

变量声明提升（Hoisting）

JavaScript 会提升变量声明。这意味着 var 表达式和 function 声明都将会被提升到当前作用域的顶部。

bar();
var bar = function() {};
var someValue = 42;

test();
function test(data) {
    if (false) {
        goo = 1;

    } else {
        var goo = 2;
    }
    for(var i = 0; i < 100; i++) {
        var e = data[i];
    }
}

上面代码在运行之前将会被转化。JavaScript 将会把 var 表达式和 function 声明提升到当前作用域的顶部。

// var 表达式被移动到这里
var bar, someValue; // 缺省值是 'undefined'

// 函数声明也会提升
function test(data) {
    var goo, i, e; // 没有块级作用域，这些变量被移动到函数顶部
    if (false) {
        goo = 1;

    } else {
        goo = 2;
    }
    for(i = 0; i < 100; i++) {
        e = data[i];
    }
}

bar(); // 出错：TypeError，因为 bar 依然是 'undefined'
someValue = 42; // 赋值语句不会被提升规则（hoisting）影响
bar = function() {};

test();

没有块级作用域不仅导致 var 表达式被从循环内移到外部，而且使一些 if 表达式更难看懂。

在原来代码中，if 表达式看起来修改了全部变量 goo，实际上在提升规则被应用后，却是在修改局部变量。

如果没有提升规则（hoisting）的知识，下面的代码看起来会抛出异常 ReferenceError。

// 检查 SomeImportantThing 是否已经被初始化
if (!SomeImportantThing) {
    var SomeImportantThing = {};
}

实际上，上面的代码正常运行，因为 var 表达式会被提升到全局作用域的顶部。

var SomeImportantThing;

// 其它一些代码，可能会初始化 SomeImportantThing，也可能不会

// 检查是否已经被初始化
if (!SomeImportantThing) {
    SomeImportantThing = {};
}

译者注：在 Nettuts+ 网站有一篇介绍 hoisting 的文章，其中的代码很有启发性。

// 译者注：来自 Nettuts+ 的一段代码，生动的阐述了 JavaScript 中变量声明提升规则
var myvar = 'my value';  

(function() {  
    alert(myvar); // undefined  
    var myvar = 'local value';  
})();

名称解析顺序

JavaScript 中的所有作用域，包括全局作用域，都有一个特别的名称 this 指向当前对象。

函数作用域内也有默认的变量 arguments，其中包含了传递到函数中的参数。

比如，当访问函数内的 foo 变量时，JavaScript 会按照下面顺序查找：

当前作用域内是否有 var foo 的定义。
函数形式参数是否有使用 foo 名称的。
函数自身是否叫做 foo。
回溯到上一级作用域，然后从 #1 重新开始。

命名空间

只有一个全局作用域导致的常见错误是命名冲突。在 JavaScript中，这可以通过 匿名包装器 轻松解决。

(function() {
    // 函数创建一个命名空间

    window.foo = function() {
        // 对外公开的函数，创建了闭包
    };

})(); // 立即执行此匿名函数

匿名函数被认为是表达式；因此为了可调用性，它们首先会被执行。

( // 小括号内的函数首先被执行
function() {}
) // 并且返回函数对象
() // 调用上面的执行结果，也就是函数对象

有一些其他的调用函数表达式的方法，比如下面的两种方式语法不同，但是效果一模一样。

// 另外两种方式
+function(){}();
(function(){}());

结论

推荐使用匿名包装器（译者注：也就是自执行的匿名函数）来创建命名空间。这样不仅可以防止命名冲突，而且有利于程序的模块化。

另外，使用全局变量被认为是不好的习惯。这样的代码倾向于产生错误和带来高的维护成本。

数组

数组遍历与属性

虽然在 JavaScript 中数组是是对象，但是没有好的理由去使用 for in 循环遍历数组。相反，有一些好的理由不去使用 for in 遍历数组。

由于 for in 循环会枚举原型链上的所有属性，唯一过滤这些属性的方式是使用 hasOwnProperty 函数，因此会比普通的 for 循环慢上好多倍。

遍历

为了达到遍历数组的最佳性能，推荐使用经典的 for 循环。

var list = [1, 2, 3, 4, 5, ...... 100000000];
for(var i = 0, l = list.length; i < l; i++) {
    console.log(list[i]);
}

上面代码有一个处理，就是通过 l = list.length 来缓存数组的长度。

虽然 length 是数组的一个属性，但是在每次循环中访问它还是有性能开销。可能最新的 JavaScript 引擎在这点上做了优化，但是我们没法保证自己的代码是否运行在这些最近的引擎之上。

实际上，不使用缓存数组长度的方式比缓存版本要慢很多。

length 属性

length 属性的 getter 方式会简单的返回数组的长度，而 setter 方式会截断数组。

var foo = [1, 2, 3, 4, 5, 6];
foo.length = 3;
foo; // [1, 2, 3]

foo.length = 6;
foo; // [1, 2, 3]

译者注： 在 Firebug 中查看此时 foo 的值是： [1, 2, 3, undefined, undefined, undefined] 但是这个结果并不准确，如果你在 Chrome 的控制台查看 foo 的结果，你会发现是这样的： [1, 2, 3] 因为在 JavaScript 中 undefined 是一个变量，注意是变量不是关键字，因此上面两个结果的意义是完全不相同的。

// 译者注：为了验证，我们来执行下面代码，看序号 5 是否存在于 foo 中。
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 false
foo[5] = undefined;
5 in foo; // 不管在 Firebug 或者 Chrome 都返回 true

为 length 设置一个更小的值会截断数组，但是增大 length 属性值不会对数组产生影响。

结论

为了更好的性能，推荐使用普通的 for 循环并缓存数组的 length 属性。使用 for in 遍历数组被认为是不好的代码习惯并倾向于产生错误和导致性能问题。

Array 构造函数

由于 Array 的构造函数在如何处理参数时有点模棱两可，因此总是推荐使用数组的字面语法 - [] - 来创建数组。

[1, 2, 3]; // 结果: [1, 2, 3]
new Array(1, 2, 3); // 结果: [1, 2, 3]

[3]; // 结果: [3]
new Array(3); // 结果: [] 
new Array('3') // 结果: ['3']

// 译者注：因此下面的代码将会使人很迷惑
new Array(3, 4, 5); // 结果: [3, 4, 5] 
new Array(3) // 结果: []，此数组长度为 3

由于只有一个参数传递到构造函数中（译者注：指的是 new Array(3); 这种调用方式），并且这个参数是数字，构造函数会返回一个 length 属性被设置为此参数的空数组。需要特别注意的是，此时只有 length 属性被设置，真正的数组并没有生成。

var arr = new Array(3);
arr[1]; // undefined
1 in arr; // false, 数组还没有生成

这种优先于设置数组长度属性的做法只在少数几种情况下有用，比如需要循环字符串，可以避免 for 循环的麻烦。

new Array(count + 1).join(stringToRepeat);

结论

应该尽量避免使用数组构造函数创建新数组。推荐使用数组的字面语法。它们更加短小和简洁，因此增加了代码的可读性。

类型

相等与比较

JavaScript 有两种方式判断两个值是否相等。

等于操作符

等于操作符由两个等号组成：==

JavaScript 是弱类型语言，这就意味着，等于操作符会为了比较两个值而进行强制类型转换。

""           == "0"           // false
0            == ""            // true
0            == "0"           // true
false        == "false"       // false
false        == "0"           // true
false        == undefined     // false
false        == null          // false
null         == undefined     // true
" \t\r\n"    == 0             // true

上面的表格展示了强类型转换，这也是使用 == 被广泛认为是不好编程习惯的主要原因，由于它的复杂转换规则，会导致难以跟踪的问题。

此外，强制类型转换也会带来性能消耗，比如一个字符串为了和一个数组进行比较，必须事先被强制转换为数字。

严格等于操作符

严格等于操作符由三个等号组成：===

不想普通的等于操作符，严格等于操作符不会进行强制类型转换。

""           === "0"           // false
0            === ""            // false
0            === "0"           // false
false        === "false"       // false
false        === "0"           // false
false        === undefined     // false
false        === null          // false
null         === undefined     // false
" \t\r\n"    === 0             // false

上面的结果更加清晰并有利于代码的分析。如果两个操作数类型不同就肯定不相等也有助于性能的提升。

比较对象

虽然 == 和 === 操作符都是等于操作符，但是当其中有一个操作数为对象时，行为就不同了。

{} === {};                   // false
new String('foo') === 'foo'; // false
new Number(10) === 10;       // false
var foo = {};
foo === foo;                 // true

这里等于操作符比较的不是值是否相等，而是是否属于同一个身份；也就是说，只有对象的同一个实例才被认为是相等的。这有点像 Python 中的 is 和 C 中的指针比较。

结论

强烈推荐使用严格等于操作符。如果类型需要转换，应该在比较之前显式的转换，而不是使用语言本身复杂的强制转换规则。

typeof 操作符

typeof 操作符（和 instanceof 一起）或许是 JavaScript 中最大的设计缺陷，因为几乎不可能从它们那里得到想要的结果。

尽管 instanceof 还有一些极少数的应用场景，typeof 只有一个实际的应用（译者注：这个实际应用是用来检测一个对象是否已经定义或者是否已经赋值），而这个应用却不是用来检查对象的类型。

JavaScript 类型表格

Value               Class      Type
-------------------------------------
"foo"               String     string
new String("foo") String     object
1.2                 Number     number
new Number(1.2)     Number     object
true                Boolean    boolean
new Boolean(true) Boolean    object
new Date()          Date       object
new Error()         Error      object
[1,2,3]             Array      object
new Array(1, 2, 3) Array      object
new Function("")    Function function
/abc/g              RegExp     object (function in Nitro/V8)
new RegExp("meow") RegExp     object (function in Nitro/V8)
{}                  Object     object
new Object()        Object     object

上面表格中，Type 一列表示 typeof 操作符的运算结果。可以看到，这个值在大多数情况下都返回 "object"。

Class 一列表示对象的内部属性 [[Class]] 的值。

为了获取对象的 [[Class]]，我们需要使用定义在 Object.prototype 上的方法 toString。

对象的类定义

JavaScript 标准文档只给出了一种获取 [[Class]] 值的方法，那就是使用 Object.prototype.toString。

function is(type, obj) {
    var clas = Object.prototype.toString.call(obj).slice(8, -1);
    return obj !== undefined && obj !== null && clas === type;
}

is('String', 'test'); // true
is('String', new String('test')); // true

上面例子中，Object.prototype.toString 方法被调用，this 被设置为了需要获取 [[Class]] 值的对象。

译者注：Object.prototype.toString 返回一种标准格式字符串，所以上例可以通过 slice 截取指定位置的字符串，如下所示：

Object.prototype.toString.call([]) // "[object Array]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call(2) // "[object Number]"

译者注：这种变化可以从 IE8 和 Firefox 4 中看出区别，如下所示：

// IE8
Object.prototype.toString.call(null)    // "[object Object]"
Object.prototype.toString.call(undefined) // "[object Object]"

// Firefox 4
Object.prototype.toString.call(null)    // "[object Null]"
Object.prototype.toString.call(undefined) // "[object Undefined]"

测试为定义变量

typeof foo !== 'undefined'

上面代码会检测 foo 是否已经定义；如果没有定义而直接使用会导致 ReferenceError 的异常。这是 typeof 唯一有用的地方。

结论

为了检测一个对象的类型，强烈推荐使用 Object.prototype.toString 方法；因为这是唯一一个可依赖的方式。正如上面表格所示，typeof 的一些返回值在标准文档中并未定义，因此不同的引擎实现可能不同。

除非为了检测一个变量是否已经定义，我们应尽量避免使用 typeof 操作符。

instanceof 操作符

instanceof 操作符用来比较两个操作数的构造函数。只有在比较自定义的对象时才有意义。如果用来比较内置类型，将会和 typeof 操作符一样用处不大。

比较自定义对象

function Foo() {}
function Bar() {}
Bar.prototype = new Foo();

new Bar() instanceof Bar; // true
new Bar() instanceof Foo; // true

// 如果仅仅设置 Bar.prototype 为函数 Foo 本省，而不是 Foo 构造函数的一个实例
Bar.prototype = Foo;
new Bar() instanceof Foo; // false

instanceof 比较内置类型

new String('foo') instanceof String; // true
new String('foo') instanceof Object; // true

'foo' instanceof String; // false
'foo' instanceof Object; // false

有一点需要注意，instanceof 用来比较属于不同 JavaScript 上下文的对象（比如，浏览器中不同的文档结构）时将会出错，因为它们的构造函数不会是同一个对象。

结论

instanceof 操作符应该仅仅用来比较来自同一个 JavaScript 上下文的自定义对象。正如 typeof 操作符一样，任何其它的用法都应该是避免的。

类型转换

JavaScript 是弱类型语言，所以会在任何可能的情况下应用强制类型转换。

// 下面的比较结果是：true
new Number(10) == 10; // Number.toString() 返回的字符串被再次转换为数字

10 == '10';           // 字符串被转换为数字
10 == '+10 ';         // 同上
10 == '010';          // 同上 
isNaN(null) == false; // null 被转换为数字 0
                      // 0 当然不是一个 NaN（译者注：否定之否定）

// 下面的比较结果是：false
10 == 010;
10 == '-10';

为了避免上面复杂的强制类型转换，强烈推荐使用严格的等于操作符。虽然这可以避免大部分的问题，但 JavaScript 的弱类型系统仍然会导致一些其它问题。

内置类型的构造函数

内置类型（比如 Number 和 String）的构造函数在被调用时，使用或者不使用 new 的结果完全不同。

new Number(10) === 10;     // False, 对象与数字的比较
Number(10) === 10;         // True, 数字与数字的比较
new Number(10) + 0 === 10; // True, 由于隐式的类型转换

使用内置类型 Number 作为构造函数将会创建一个新的 Number 对象，而在不使用 new 关键字的 Number 函数更像是一个数字转换器。

另外，在比较中引入对象的字面值将会导致更加复杂的强制类型转换。

最好的选择是把要比较的值显式的转换为三种可能的类型之一。

转换为字符串

'' + 10 === '10'; // true

将一个值加上空字符串可以轻松转换为字符串类型。

转换为数字

+'10' === 10; // true

使用一元的加号操作符，可以把字符串转换为数字。

译者注：字符串转换为数字的常用方法：

+'010' === 10
Number('010') === 10
parseInt('010', 10) === 10 // 用来转换为整数

+'010.2' === 10.2
Number('010.2') === 10.2
parseInt('010.2', 10) === 10

转换为布尔型

通过使用否操作符两次，可以把一个值转换为布尔型。

!!'foo'; // true
!!'';      // false
!!'0';     // true
!!'1';     // true
!!'-1'     // true
!!{};      // true
!!true;    // true

核心

为什么不要使用 eval

eval 函数会在当前作用域中执行一段 JavaScript 代码字符串。

var foo = 1;
function test() {
    var foo = 2;
    eval('foo = 3');
    return foo;
}
test(); // 3
foo; // 1

但是 eval 只在被直接调用并且调用函数就是 eval 本身时，才在当前作用域中执行。

var foo = 1;
function test() {
    var foo = 2;
    var bar = eval;
    bar('foo = 3');
    return foo;
}
test(); // 2
foo; // 3

译者注：上面的代码等价于在全局作用域中调用 eval，和下面两种写法效果一样：

// 写法一：直接调用全局作用域下的 foo 变量
var foo = 1;
function test() {
    var foo = 2;
    window.foo = 3;
    return foo;
}
test(); // 2
foo; // 3

// 写法二：使用 call 函数修改 eval 执行的上下文为全局作用域
var foo = 1;
function test() {
    var foo = 2;
    eval.call(window, 'foo = 3');
    return foo;
}
test(); // 2
foo; // 3

在任何情况下我们都应该避免使用 eval 函数。99.9% 使用 eval 的场景都有不使用 eval 的解决方案。

伪装的 eval

定时函数 setTimeout 和 setInterval 都可以接受字符串作为它们的第一个参数。这个字符串总是在全局作用域中执行，因此 eval 在这种情况下没有被直接调用。

安全问题

eval 也存在安全问题，因为它会执行任意传给它的代码，在代码字符串未知或者是来自一个不信任的源时，绝对不要使用 eval 函数。

结论

绝对不要使用 eval，任何使用它的代码都会在它的工作方式，性能和安全性方面受到质疑。如果一些情况必须使用到 eval 才能正常工作，首先它的设计会受到质疑，这不应该是首选的解决方案，一个更好的不使用 eval 的解决方案应该得到充分考虑并优先采用。

undefined 和 null

JavaScript 有两个表示‘空’的值，其中比较有用的是 undefined。

undefined 的值

undefined 是一个值为 undefined 的类型。

这个语言也定义了一个全局变量，它的值是 undefined，这个变量也被称为 undefined。但是这个变量不是一个常量，也不是一个关键字。这意味着它的值可以轻易被覆盖。

下面的情况会返回 undefined 值：

访问未修改的全局变量 undefined。
由于没有定义 return 表达式的函数隐式返回。
return 表达式没有显式的返回任何内容。
访问不存在的属性。
函数参数没有被显式的传递值。
任何被设置为 undefined 值的变量。

处理 undefined 值的改变

由于全局变量 undefined 只是保存了 undefined 类型实际值的副本，因此对它赋新值不会改变类型 undefined 的值。

然而，为了方便其它变量和 undefined 做比较，我们需要事先获取类型 undefined 的值。

为了避免可能对 undefined 值的改变，一个常用的技巧是使用一个传递到匿名包装器的额外参数。在调用时，这个参数不会获取任何值。

var undefined = 123;
(function(something, foo, undefined) {
    // 局部作用域里的 undefined 变量重新获得了 `undefined` 值

})('Hello World', 42);

另外一种达到相同目的方法是在函数内使用变量声明。

var undefined = 123;
(function(something, foo) {
    var undefined;
    ...

})('Hello World', 42);

这里唯一的区别是，在压缩后并且函数内没有其它需要使用 var 声明变量的情况下，这个版本的代码会多出 4 个字节的代码。

null 的用处

JavaScript 中的 undefined 的使用场景类似于其它语言中的 null，实际上 JavaScript 中的 null 是另外一种数据类型。

它在 JavaScript 内部有一些使用场景（比如声明原型链的终结 Foo.prototype = null），但是大多数情况下都可以使用 undefined 来代替。

自动分号插入

尽管 JavaScript 有 C 的代码风格，但是它不强制要求在代码中使用分号，实际上可以省略它们。

JavaScript 不是一个没有分号的语言，恰恰相反上它需要分号来就解析源代码。因此 JavaScript 解析器在遇到由于缺少分号导致的解析错误时，会自动在源代码中插入分号。

var foo = function() {
} // 解析错误，分号丢失
test()

自动插入分号，解析器重新解析。

var foo = function() {
}; // 没有错误，解析继续
test()

自动的分号插入被认为是 JavaScript 语言最大的设计缺陷之一，因为它能改变代码的行为。

工作原理

下面的代码没有分号，因此解析器需要自己判断需要在哪些地方插入分号。

(function(window, undefined) {
    function test(options) {
        log('testing!')

        (options.list || []).forEach(function(i) {

        })

        options.value.test(
            'long string to pass here',
            'and another long string to pass'
        )

        return
        {
            foo: function() {}
        }
    }
    window.test = test

})(window)

(function(window) {
    window.someLibrary = {}
})(window)

下面是解析器"猜测"的结果。

(function(window, undefined) {
    function test(options) {

        // 没有插入分号，两行被合并为一行
        log('testing!')(options.list || []).forEach(function(i) {

        }); // <- 插入分号

        options.value.test(
            'long string to pass here',
            'and another long string to pass'
        ); // <- 插入分号

        return; // <- 插入分号, 改变了 return 表达式的行为
        { // 作为一个代码段处理
            foo: function() {} 
        }; // <- 插入分号
    }
    window.test = test; // <- 插入分号

// 两行又被合并了
})(window)(function(window) {
    window.someLibrary = {}; // <- 插入分号
})(window); //<- 插入分号

解析器显著改变了上面代码的行为，在另外一些情况下也会做出错误的处理。

前置括号

在前置括号的情况下，解析器不会自动插入分号。

log('testing!')
(options.list || []).forEach(function(i) {})

上面代码被解析器转换为一行。

log('testing!')(options.list || []).forEach(function(i) {})

log 函数的执行结果极大可能不是函数；这种情况下就会出现 TypeError 的错误，详细错误信息可能是 undefined is not a function。

结论

建议绝对不要省略分号，同时也提倡将花括号和相应的表达式放在一行，对于只有一行代码的 if 或者 else 表达式，也不应该省略花括号。这些良好的编程习惯不仅可以提到代码的一致性，而且可以防止解析器改变代码行为的错误处理。

其它

setTimeout 和 setInterval

由于 JavaScript 是异步的，可以使用 setTimeout 和 setInterval 来计划执行函数。

function foo() {}
var id = setTimeout(foo, 1000); // 返回一个大于零的数字

当 setTimeout 被调用时，它会返回一个 ID 标识并且计划在将来大约 1000 毫秒后调用 foo 函数。 foo 函数只会被执行一次。

基于 JavaScript 引擎的计时策略，以及本质上的单线程运行方式，所以其它代码的运行可能会阻塞此线程。因此没法确保函数会在 setTimeout 指定的时刻被调用。

作为第一个参数的函数将会在全局作用域中执行，因此函数内的 this 将会指向这个全局对象。

function Foo() {
    this.value = 42;
    this.method = function() {
        // this 指向全局对象
        console.log(this.value); // 输出：undefined
    };
    setTimeout(this.method, 500);
}
new Foo();

setInterval 的堆调用

setTimeout 只会执行回调函数一次，不过 setInterval - 正如名字建议的 - 会每隔 X 毫秒执行函数一次。但是却不鼓励使用这个函数。

当回调函数的执行被阻塞时，setInterval 仍然会发布更多的毁掉指令。在很小的定时间隔情况下，这会导致回调函数被堆积起来。

function foo(){
    // 阻塞执行 1 秒
}
setInterval(foo, 1000);

上面代码中，foo 会执行一次随后被阻塞了一分钟。

在 foo 被阻塞的时候，setInterval 仍然在组织将来对回调函数的调用。因此，当第一次 foo 函数调用结束时，已经有 10 次函数调用在等待执行。

处理可能的阻塞调用

最简单也是最容易控制的方案，是在回调函数内部使用 setTimeout 函数。

function foo(){
    // 阻塞执行 1 秒
    setTimeout(foo, 1000);
}
foo();

这样不仅封装了 setTimeout 回调函数，而且阻止了调用指令的堆积，可以有更多的控制。 foo 函数现在可以控制是否继续执行还是终止执行。

手工清空定时器

可以通过将定时时产生的 ID 标识传递给 clearTimeout 或者 clearInterval 函数来清除定时，至于使用哪个函数取决于调用的时候使用的是 setTimeout 还是 setInterval。

var id = setTimeout(foo, 1000);
clearTimeout(id);

清除所有定时器

由于没有内置的清除所有定时器的方法，可以采用一种暴力的方式来达到这一目的。

// 清空"所有"的定时器
for(var i = 1; i < 1000; i++) {
    clearTimeout(i);
}

可能还有些定时器不会在上面代码中被清除（译者注：如果定时器调用时返回的 ID 值大于 1000），因此我们可以事先保存所有的定时器 ID，然后一把清除。

隐藏使用 eval

setTimeout 和 setInterval 也接受第一个参数为字符串的情况。这个特性绝对不要使用，因为它在内部使用了 eval。

function foo() {
    // 将会被调用
}

function bar() {
    function foo() {
        // 不会被调用
    }
    setTimeout('foo()', 1000);
}
bar();

由于 eval 在这种情况下不是被直接调用，因此传递到 setTimeout 的字符串会自全局作用域中执行；因此，上面的回调函数使用的不是定义在 bar 作用域中的局部变量 foo。

建议不要在调用定时器函数时，为了向回调函数传递参数而使用字符串的形式。

function foo(a, b, c) {}

// 不要这样做
setTimeout('foo(1,2, 3)', 1000)

// 可以使用匿名函数完成相同功能
setTimeout(function() {
    foo(a, b, c);
}, 1000)

结论

绝对不要使用字符串作为 setTimeout 或者 setInterval 的第一个参数，这么写的代码明显质量很差。当需要向回调函数传递参数时，可以创建一个匿名函数，在函数内执行真实的回调函数。

另外，应该避免使用 setInterval，因为它的定时执行不会被 JavaScript 阻塞。

本文链接

面向对象的 Javascript （声明篇）

2012-02-01T08:14:00Z

有时间重新审视了遍 Javascript 的面向对象机制。与其他的语言不同，Javascript 可以说提供了更灵活的面向对象机制（比如 function 在完成其自身功能的同时也是对象）。

由于才疏学浅，我不得不将《Javascript 高级程序设计》中的部分内容摘抄过来，这些同时也算是我的读书笔记吧。由于 Javascript 面向对象机制及其的重要，而且内容非常的繁多，在这里就分篇章逐个介绍。

使用对象首先就是声明它（内置的对象当然就不需要了）。该死的 Javascript 总是会让我们死去很多的脑细胞，这篇文章主要说明下声明 Javascript 类的几种方法。

工厂模式

工厂模式可能是很多开发人员使用的一种模式，简单的说这种方法先定义「地基」，然后在往上面扔（绑定）各种功能和属性。下面的代码可能看起来会非常的熟悉：

var oCar = new Object; oCar.color = "red"; oCar.showColor = function() {     alert(this.color); } oCar.showColor();

当然，既然包装成一个类，就要重用它（上面的方法从语法上说仅仅是变量）。可以使用返回特定对象的工厂函数（factory function）将其封装起来：

function createCar() {     var oCar = new Object;     oCar.color = "red";     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = createCar(); oCar.showColor();

当然，变通一下，可以在 createCar 函数上加入些参数，这样看起来已经非常地专业了：

function createCar(sColor) {     var oCar = new Object;     oCar.color = sColor;     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = createCar(); oCar.showColor();

匿名函数总是让人感觉非常的高深，但是有时候也会迷惑了自己。如果不考虑篇幅，可以外部定义它：

function showColor() {     alert(this.color); }  function createCar(sColor) {     var oCar = new Object;     oCar.color = sColor;     oCar.showColor = showColor;      return oCar; } oCar = createCar(); oCar.showColor();

这样做还有一个好处，就是不用重复定义 oCar.showColor 了（高效率的程序每个人都喜欢）。

构造函数模式

构造函数其实和工厂方式差不多。从代码量上来说，就是省略了构造函数内部没有创建一个对象。

function Car(sColor) {     this.color = sColor;     this.showColor = function () {         alert(this.color);     } } oCar = new Car("red"); oCar.showColor();

其实此隐含的对象已经在 new 以后就被实例化了。默认情况下，构造函数返回的就是其 this 的值（所以不必使用 return 返回）。但构造函数模式和工厂模式一样可能会重复定义方法，这点可以参考上述工厂模式的做法避免它（始终看起来不完美）。

原型模式

已经受够重复定义的问题了，那么有没有完美的解决办法呢？当然有。使用原型方法可以有效的避免此类的问题。

function Car() {} Car.prototype.color = new Array("red", "green", "blue"); Car.prototype.showColor = function() {     alert(this.color); } oCar = new Car(); oCar.showColor();

但是使用此模式需要注意的是类中的所有属性和方法都是共用的（其实就是指针）。这意味着虽然被实例化的两个变量，如果其中一处的值被更改，那么另外一个就也会被更改。

注：此段内容有更改，详细请参见这里和这里（感谢 fish 兄弟提出）。

混合模式

看起来越来越完美了，结合上述学到的方法就很容易解决原型模式的问题，这样看起来就更像是专业的程序员了。

function Car(sColor) {     this.color = sColor; } Car.prototype.showColor = function() {     alert(this.color); } oCar = new Car("red"); oCar.showColor();

上述的方法声明的类， showColor 方法是原型（仅创建了一个实例），其他的都是构造（互不干扰）。

动态原型模式

把自己的方法仍在外面总不是件非常环保的事情，下面的方法就非常的「绿色」：

function Car() {     this.color = "red";     if (typeof Car._initialized == "undefined") {         Car.prototype.showColor = function() {             alert(this.color);         };         Car._initialized = true;     } } oCar = new Car("red"); oCar.showColor();

此方法于上述的混合模式效果一致，即在构造函数内定义属性，而方法则使用原型模式。唯一的区别就是赋予对象方法的位置。

混合工厂模式

混合工厂模式可以认为是构造模式与混合模式的整合，因为 function 本身就是一个对象，所以可以使用 new 来实例化（请允许我这样描述）。

function Car() {     var oCar = new Object;     oCar.color = "red";     oCar.showColor = function() {         alert(this.color);     }      return oCar; } oCar = new Car(); oCar.showColor();

不过建议避免使用此方法定义，因为于上述的工厂模式一样，它存在重复声明的问题。

选用何种模式？

其实通过上面的描述已经有所结果，通常使用的是混合模式与动态原型模式（我个人投动态原型模式一票）。不过不要单独使用工厂模式与构造模式（或者其两者的结合体），因为这样会造成不必要的浪费。

附，上述的代码打包下载。

转载：

http://www.gracecode.com/archives/934/

本文链接

插件：Firebug扩展插件FireQuery

2012-01-31T01:51:00Z

之前也不知道看了哪篇文章的介绍，在火狐上装了FireQuery插件，一直没去注意它的用途。就只发现在FireBug的HTML Tab下的HTML代码层次上多了些事件代码，可以点击查看对应的绑定事件。最近的一些使用，发现了FireQuery的好处，特别是在测试动态生成 DOM以及数据测试上很是方便。

关于FireQuery的简介和安装就不多说了，访问：http://firequery.binaryage.com/。

1. 标签绑定事件查看

打开Firebug的HTML Tab，在一些绑定了事件的HTML标签上可以看到一些事件数据：点击后跳转到DOM Tab，可以查看对应的一些信息：

2. 查看jQuery的.data()函数添加的数据

jQuery的.data()函数是用来给HTML上添加数据的，一般用在插件或数据处理上。一般情况下执行了.data()后，无法确认是否给该标签正确地绑定了数据。此时通过FireQuery就可以查看，同样支持点击后跳转到DOM Tab查看，这在给HTML标签绑定一些对象数据时非常实用。[下图中黄色counter=33为data数据]

[你可简单测试这个：

]

3. 引入jQuery.Lint.js对页面代码测试

在Console Tab的下拉菜单中启用引入，重新刷新页面后会动态地引入jQuery.Lint.js插件，此时对页面中出现的错误进行输出提示。

FireQuery对于前端开发和测试来说绝对是一大助手，更多的好处还是在实际中可以体会出来。

官方测试页面：http://firequery.binaryage.com/test

本文链接