用正则表达式字面量创建的RegExp对象来共享同一个单实例：
function make_a_matcher(  ) {
    return /a/gi;
}

var x = make_a_matcher(  );
var y = make_a_matcher(  );

// 注意：x 和 y 是同一个对象！

x.lastIndex = 10;

document.writeln(y.lastIndex);    // 10

当你在浏览器中运行这段代码时，你会发现IE6-IE9、FireFox4、Chrome10、Safari5输出都是0，Firefox 3.6.16输出是10，原因可以在ECMAScript5规范第24页和第247页找到：

A regular expression literal is an input element that is converted to a RegExp object (see 15.10) each time the literal is evaluated. Two regular expression literals in a program evaluate to regular expression objects that never compare as === to each other even if the two literals’ contents are identical. A RegExp object may also be created at runtime by new RegExp (see 15.10.4) or calling the RegExp constructor as a function (15.10.3).

7.8.5: Regular expression literals now return a unique object each time the literal is evaluated. This change is detectable by any programs that test the object identity of such literal values or that are sensitive to the shared side effects.

也就是说在ECMAScript3规范中，用正则表达式创建的RegExp对象会共享同一个实例，而在ECMAScript5中则是两个独立的实例。《JavaScript语言精粹》出版时ECMAScript5还没有发布，在这个问题上书和ECMAScript3标准保持了一致。FireFox3.6遵循了ECMAScript3标准，所以结果与书中一致，而最新的Firefox4、Chrome和Safari5都遵循ECMAScript5标准，至于IE6-IE8都没有很好的遵循ECMAScript3标准，不过在这个问题上反而处理对了。很明显ECMAScript5的规范更符合开发者的期望，那就是相同的正则表达式字面量创建独立的RegExp对象会有不同的lastIndex，才方便分别处理。

在ECMAScript5规范的第247页还有两条来说明ECMAScript5和ECMAScript3在正则表达式字面量上的改变：

7.8.5: Edition 5 requires early reporting of any possible RegExp constructor errors that would be produced when converting a RegularExpressionLiteral to a RegExp object. Prior to Edition 5 implementations were permitted to defer the reporting of such errors until the actual execution time creation of the object.
7.8.5: In Edition 5 unescaped “/” characters may appear as a CharacterClass in a regular expression literal. In Edition 3 such a character would have been interpreted as the final character of the literal.

第1个是在ECMAScript5中正则表达式字面量转化为RegExp对象时，任何RegExp构造器的错误都会尽早报告，而在之前的规范中是只有对象创建真正执行时才会报错。

第2个是说在ECMAScript5的正则表达式字面量中，未转义的正斜杠“/”可以直接用在正则表达式字符类中。而在ECMAScript3中它只能作为正则表达式字面量的开始和结束字符。从IE6-IE9、Firefox3.6-Firefox4.0、Chrome和Safari都可以直接把未转义的正斜杠“/”用在正则表达式字符类中。如：

var my_regexp = /([8/5+4]*).{3}/g;
var str = '8/5+4 is what!';

var result = my_regexp.exec(str); // the same in IE6-9,FF3.6-4.0,Chrome,Safari

for(var i = 0,n = result.length; i < n; ++i){
  document.writeln(result[i]);
}
result[0] = 8/5+4 is
result[1] = 8/5+4

在《JavaScript语言精粹》第76页也指明在正则表达式的字符类中使用正斜杠“/”需要转义，也是基于ECMAScript3规范。由于正则表达式中需要转义的特殊字符比较多，当心存疑虑时对任何特殊字符都可以使用反斜杠“\”来使其字面化确保安全，不过这个规则不适宜字母和数字。

正则表达式字面量从ECMAScript3到ECMAScript5的改变也蛮符合HTML5设计原理中提到的2条。一条是“一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满”，另一条是“支持已有内容”。

最后推荐一下XRegExp，它是一个非常优秀的正则表达式JavaScript库，兼容多个主流浏览器、ECMAScript3和ECMAScript5。
]]> http://dancewithnet.com/2011/05/11/what-is-new-about-regular-expression-literals-at-es5/feed/ 3 http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/ http://dancewithnet.com/2010/06/08/minify-js-and-css-files-in-server/#comments Mon, 07 Jun 2010 17:50:57 +0000 秦歌 http://dancewithnet.com/?p=1507 Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了，但由于IE6和IE7不支持Data URI以及性能问题，这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致，少量的网页会根据实际情况采取本地合并，这些合并中相当多的是有选择地手动完成，每次新的合并都需要重新在本地完成并上传到服务器，比较的随意和繁琐，同样文件的压缩也有类似的情况。而利用服务端的合并和压缩，我们就可以按照开发的逻辑尽可能让文件的颗粒度变小，利用网页中URL的规则来自动实现文件的合并和压缩，这会相当的灵活和高效。

YUI Combo Handler

2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块，它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件，从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件，常用方式如下：

<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/
yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/
container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>

而使用Combo Handler服务之后，则上述的代码可以写为：

<script src="http://yui.yahooapis.com/combo?
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&
2.8.0r4/build/container/container_core-min.js&
2.8.0r4/build/menu/menu-min.js&
2.8.0r4/build/element/element-min.js&
2.8.0r4/build/button/button-min.js&
2.8.0r4/build/editor/editor-min.js"></script>

除了代码的可读性稍稍有一点点降低外，使用Combo Handler服务大大的降低了HTTP请求数，同时也减少了URL代码量，这对于Web性能优化来讲至关重要。所以，随后YUI从2.6.0开始，其核心组件YUI Loader内置了Combo Handling功能，即使用YUI Loader时，通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来，这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时，CDN默认是使用Yahoo! CDN（http://yui.yahooapis.com），所以没有任何问题。这正是YUI最迷人的地方之一。

遗憾的是http://yui.yahooapis.com在中国的速度并不佳，本来中国雅虎提供了http://cn.yui.yahooapis.com/ ，但尚未提供Combo Handler服务，同时因种种原因，其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源，但至少现在依旧是私有技术，要使用就需要自己实现类似功能，所以国内类似技术的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify，它可以合并、精简、Gzip压缩和缓存JavaScript和CSS文件。其文件合并功能就非常类似Combo Handler，只不过URL的语法稍微有点不同。如果Yahoo! CDN安装了Minify，那么上面Rich Text Editor的代码用Minify的默认格式来写就是：

<script src="http://yui.yahooapis.com/min/f=
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js,
2.8.0r4/build/container/container_core-min.js,
2.8.0r4/build/menu/menu-min.js,
2.8.0r4/build/element/element-min.js,
2.8.0r4/build/button/button-min.js,
2.8.0r4/build/editor/editor-min.js"></script>

本地使用Minify很简单，只需要Apache + PHP环境就OK了：

1. 安装好Apache + PHP (Windows、Mac)。
2. 下载Minify源码，解压，然后把min文件夹复制到指定的根目录下，比如localhost。这时URL的写法大概是http://localhost/min/f=...
3. 启用Apache的Mod Rewrite模块，然后在min文件夹下新建.htaccess文件，并添加如下Rewrite规则：

   <IfModule mod_rewrite.c>
   RewriteEngine on
   
   # You may need RewriteBase on some servers
   # 如果做了所有的开启Mod Rewrite的设置依旧无效，请城市尝试启用下面这句
   #RewriteBase /min
   
   # rewrite URLs like "/min/f=..." to "/min/?f=..."
   RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
   </IfModule>

   如果不启用Mod Rewrite功能，则Minify的URL会类似http://localhost/min/index.php?f=…，这对客户端和中间服务器的缓存不利，而启用了Mod Rewrite之后的URL类似http://localhost/min/f=…，不仅解决前面问题且更短。

4. 配置Minify，即编辑min/config.php文件

   $min_enableBuilder = true;
   //本地使用时可以通过http://dwn/min/builder/来进行配置，外部使用时请设置为false
   
   //$min_cachePath = 'c:\\WINDOWS\\Temp';
   //$min_cachePath = '/tmp';
   //$min_cachePath = preg_replace('/^\\d+;/', '', session_save_path());
   //选择其一，去掉注释设置临时缓存目录，这样可以减少程序运算提高性能
   
   $min_serveOptions['maxAge'] = 1800;
   //设置浏览器缓存的时间，为了提升性能建议这个时间设置尽可能的长，比如315360000
   //如果需要在不改变URL的情况下更新静态文件，可以采用类似时间戳的方式，
   //如http://localhost/min/f=example/example.css&20100601.css
   //建议静态文件采用版本号管理，每次修改都需要升级版本号，这样就无需时间戳了，
   //如http://localhost/min/f=example/example_1_0_1.css
   
   $min_serveOptions['minApp']['maxFiles'] = 10;
   //参数f获取参数的个数，即合并的文件个数，这个数量完全可以增大，比如50，
   //当然可能会遇到URL最大值问题，后会有解释
   
   $min_documentRoot = '';
   //$min_documentRoot = substr(__FILE__, 0, strlen(__FILE__) - 15);
   //$min_documentRoot = $_SERVER['SUBDOMAIN_DOCUMENT_ROOT'];
   //当$min_documentRoot为空时，其值就是$_SERVER['DOCUMENT_ROOT']，
   //但合并的文件不在$_SERVER['DOCUMENT_ROOT']下，会导致400错误，
   //这个时候可以启用第2行或第3行
   
   

5. 使用Minify

   比如，有两个JavaScript文件，http://localhost/example/a.js,http://localhost/example/b.js，那么使用Minify合并的URL是http://localhost/min/f=/example/a.js,/example/b.js，直接把这个URL放到页面中就可以使用了。

实际上Minify不仅仅实现了合并功能，同时默认在合并的同时还会对文件进行精简压缩，如果你在本地本身就对文件进行压缩了，比如使用YUI Compressor，那么可以在config.php中进行如下设置取消Minify的压缩以提升性能：

$min_serveOptions['minifiers']['application/x-javascript'] = '';
$min_serveOptions['minifiers']['text/css'] = '';

如果服务端支持Java，那么也可以对Minify进行简单配置而实现利用YUI Compressor压缩JavaScript和CSS文件。

直接在服务端进行合并和压缩，这非常的灵活，也极大的减轻了前端开发成果的部署过程，真使事半功倍。更多配置请看Minify CookBook和Wiki

小提示：Minify使用的New BSD License，这就意味着使用者可以几乎自由的使用该代码。BSD协议鼓励代码共享，但需要尊重代码作者的著作权。BSD由于允许使用者修改和重新发布代码，也允许使用或在BSD代码上开发商业软件发布和销售，因此是对商业集成很友好的协议。而很多的公司企业在选用开源产品的时候都首选BSD协议，因为可以完全控制这些第三方的代码，在必要的时候可以修改或者二次开发。更多中文信息请看《BSD协议》。

在YUI3中使用Minify

在YUI2中，合并机制只支持库本身的文件，自定义的文件会单独一一加载。从YUI3开始，模块变得更小，这样就导致使用合并时URL会变长，但在IE下URL的最大值是2083，Apache默认的URL最大值是8192，所以当URL在对应浏览器下超出最大值时，YUI3会自动根据浏览器判断进行拆分成多个合并的URL，并且还提供了maxURLLength来设置最大值。而从YUI3.1.0开始，不仅仅支持自定义文件的合并，还支持可以使用多个提供合并服务的CDN，即可以对YUI组件使用http://yui.yahooapis.com这个CDN，其余文件使用其他支持合并的CDN，这样非常的实用、方便和灵活。示例在YUI3中使用Minify就说明了这点。

由于YUI默认URL的合并形式和Minify的不相同，所以在YUI实例化时需要利用正则替换来实现YUI3支持Minify的URL合并形式，但这种方式既不灵活，且有风险，不友好又效率低。比较简单的方式是直接修改YUI 3的源码，如示例在修改后的YUI3中使用Minify。同时，YUI 3.1.*的版本有一个bug，即同时合并JavaScript和CSS时，较短的那个URL结尾处多一个&符号，如示例在YUI3中使用Minify中：

http://yui.yahooapis.com/combo?3.1.1/build/widget/assets/skins/sam/widget.css&
3.1.1/build/console/assets/skins/sam/console.css&

http://dancewithnet.com/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css&

这两种都可以使用，虽然在早期的IE浏览器版本（如IE6）中会有无法解析的风险，且影响某些特定情况下的缓存，但当使用修改后的YUI时，合并的URL变成类似/min/b=yui&f=3.1.1/tabview/assets/skins/sam/tabview.css,的样子，就会出现bug了。对于YUI的Combo Handler来说这是一个小bug，所以YUI3把这个bug设置为P5。但当我们改造YUI3来更好的支持Minify时，还要解决这个问题，具体方案请看示例在修改后的YUI3中使用Minify。

在CDN上使用Minify

CDN的全称是Content Delivery Network，即内容分发网络。其最常应用就是通过位于不同地理位置的服务器把静态资源部署到用户最近的边缘，这样能有效解决Web服务中大量静态资源的速度和性能问题。由于实施成本比较高，所以在实际的应用中，大型公司一般会组建自己的CDN，而小型公司只能租借第三方的CDN，但不管怎样这两种方式都不会影响在服务端实施合并和压缩程序。一般情况下，静态资源也并不是直接上传到CDN，而是先传到一台后台服务器，然后各地CDN的前端Cache服务器按需索取。YUI CDN的Combo Handler就是部署在其后台服务器上的，Minify也应如此。简单图示如下：

当一个资源请求到CDN时，CDN会先检查本地是否存在这个资源，如果有则会直接返回该资源，如果没有则会请求其后台服务器，后台服务器会依据资源URL的信息进行相应的处理，然后返回给CDN，CDN就会存储这个资源，再次出现这个资源请求时就无需请求后台服务器了。所以，虽然合并特别是压缩JavaScript和CSS文件是消耗时间的，但是由于只需要第一次，并且第一次基本上由我们自己访问掉（我们可以创建程序自动进行一次访问来保证，实际上图片优化也可以采用这种方式），所以基本上很安全。这正是目前在口碑网实施的JavaScript和CSS合并方案，在第4届D2的《前端性能优化和自动化》中也介绍了它。

YUI的Get就专门提供了一套动态加载的机制，是YUI最基础的功能之一。在YUI中利用Get加载JavaScript和CSS资源会在HTML的head节点中插入如下代码：

<script id="..." type="text/javascript" src="some.js"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css">

当页面编码和JavaScript或CSS资源编码不一致时，常见的方法是通过charset属性声明其编码，比如页面是gb2312，而资源文件为utf-8，则设置编码后其插入的代码是

//YUI3.0.0 和 YUI 2.8.0中
<script id="..." type="text/javascript" src="some.js" charset="utf-8"></script>
<link id="..." type="text/css" rel="stylesheet" href="some.css" charset="utf-8">

然而，在IE的一些特殊情况下加载JavaScript时，当你刷新页面时会看到状态栏上有如下的错误提示：

当你通过随机参数让JavaScript文件不缓存时，或者让script元素中的charset属性位于src属性之前（比如利用YUI2.8.0之前版本加载）就不会有这个错误提示。所以，这个问题可能是IE的缓存解码机制的bug，也可以看着是YUI的bug（已经提交给YUI开发团队，将在3.1.0中解决）。

因此，动态添加script或CSS资源时，把charset放在资源路径前面是最佳实践。对于YUI，暂时可以这样修改源码来修复。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

相对URL：
    example.php
    demo/example.php
    ./example.php
    ../../example.php
    /example.php
绝对URL：

http://dancewithnet.com/example.php

http://dancewithnet.com:80/example.php

https://dancewithnet.com/example.php

同时HTML中有大量的元素属性值为URL，一般利用JavaScript获取这些URL属性值有两种方法：

<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a>
<script>
var oA = document.getElementById('example-a');
oA.href ==  'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'example.php';
</script>

我们希望通过直接访问属性的方式得到完整绝对URL，通过getAttribute方法得到其原始的属性值，实际上这是一个比较理想的结果，在所有的A级浏览器中，能顺利得到这个结果的只有Firefox和IE8，其他浏览器都或多或少特殊情况，具体哪些元素的属性存在什么样的情况请看演示实例。

在大部分浏览器中存在的问题是，两种方式都返回的是原始属性值，而实际应用中往往需要的是其绝对的URL，《Dealing with unqualified HREF values》中的解决方案太过于复杂，这里提供一种相对简单的解决方案，如果不考虑区别浏览器代码会非常简单：

<form action="example.php" id="example-form">
此时页面绝对URL是http://dancewithnet.com/</form>
<script>
var oForm = document.getElementById('example-form');

//IE6、IE7、Safari、Chrome、Opera
oForm.action ==  'example.php';
oForm.getAttribute('action') == 'example.php';

//获取绝对URL的通用解决方案
getQualifyURL(oForm,'action') == 'http://dancewithnet.com/example.php';

getQualifyURL = function(oEl,sAttr){
  var sUrl = oEl[sAttr],
      oD,
      bDo = false;
  //是否是IE8之前版本
  //http://www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
  //http://msdn.microsoft.com/en-us/library/7kx09ct1%28VS.80%29.aspx
  /*@cc_on
    try{
      bDo = @_jscript_version < 5.8 ?true : @false;
    }catch(e){
      bDo = false;
    }
  @*/
  //如果是Safari、Chrome和Opera
  if(/a/.__proto__=='//' || /source/.test((/a/.toString+''))
                               || /^function \(/.test([].sort)){
    bDo = true;
  }
  if(bDo){
    oD = document.createElement('div');
    /*
    //DOM 操作得到的结果不会改变
    var oA = document.createElement('a');
    oA.href = oEl[sAttr];
    oD.appendChild(oA);
    */
    oD.innerHTML = ['<a href="',sUrl,'"></a>'].join('');
    sUrl = oD.firstChild.href;
  }
  return sUrl;
}
</script>

在IE6和IE7这两个史前的浏览器身上还有一些更有意思的事情，两种方法在HTML元素A、AREA和IMG获取的属性值都是绝对URL，幸好微软为getAttribute提供了第二个参数可以解决这个问题，同时还可以对IFEAM和LINK元素解决前面提到的两种方法都返回原始属性的问题：

<link href="../../example.css" id="example-link">
<a href="example.php" id="example-a">此时页面绝对URL是http://dancewithnet.com/</a>

<script>
var oA = document.getElementById('example-a'),
     oLink = document.getElementById('example-link');

oA.href ==  'http://dancewithnet.com/example.php';
oA.getAttribute('href') == 'http://dancewithnet.com/example.php';
oA.getAttribute('href',2) == 'example.php';

oLink.href ==  'example.php';
oLink.getAttribute('href') == 'example.php';
oLink.getAttribute('href',4) == 'http://dancewithnet.com/example.php';
</script>

今天突然看到getAttribute(‘href’,2)还能解决获取IE6下中文URL的乱码问题，虽然以前没有遇到过，但作为针对IE6怪癖的记录还是值得了解的。

JavaScript曾是“世界上最被误解的语言”，因为它担负太多的特性，包括糟糕的交互和失败的设计，但随着Ajax的到来，JavaScript“从最受误解的编程语言演变为最流行的语言”，这除了幸运之外，至少还说明它是一个不错的语言。Douglas Crockford在这本书中剥除JavaScript糟糕的外衣，抽离出一个具有更好可靠性、可读性和可维护性的JavaScript子集，让你看到一门优雅的、轻量级的和非常富有表现力的语言。他从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9个方面来呈现这门语言真正的精华，这是语言最本质最优雅的部分，通过它们完全可以构建出高效的代码。他还通过附录列出了这门语言的糟粕和鸡肋部分，且告诉你如何避免它们。最后还介绍了JSLint，通过它的检验，能有效的保障我们写出优美高效的代码。

这是一本厚积薄发“薄”大精深的书籍，Douglas Crockford仅仅用了160页来道出JavaScript的语言本质，值得任何正在或者想从事JavaScript开发的人阅读，并且非常需要反复阅读。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越大师，这本书就是开始。

我很高兴和淘宝UED的前端主管小马（赵泽欣）一起来翻译这本书，去年近5个月的翻译时间是一个非常艰苦而又痛快的学习过程。我们冒着“犯罪”的危险完成了翻译，现在我也很惶恐的推荐给大家，希望我们的努力能让读者读出本书的精华，更要读懂JavaScript的语言精华。

感谢你的关注、阅读、建议和批评。

1. 购买《JavaScript语言精粹》
2. 样章阅读
   1. 第一章. 精华
   2. 第十章. 优美的特性
3. 勘误表
4. 淘宝UED Blog：《JavaScript语言精粹》译者序及样章试读
5. JavaScript大牛：Douglas Crockford

Douglas Crockford现在是Yahoo的资深JavaScript架构师，曾在Atari公司（视频游戏工业的领袖）开发了办公自动化系统，同时也完成了对于游戏和音乐的研究；曾任Lucasfilm（卢卡斯）电影公司技术总监；在Paramount（派拉蒙）公司任职过新媒体执行主管；在电气社区，通常为人所知的是communities.com的创始人兼首席执行官；他还创办了State软件公司并作为该公司CTO，这也是他发现JSON时所在的地方。他同时也对Blissymbolics非常感兴趣，这是一种图形、象征性的语言，并且对永久减肥（Permanent Weight Loss）做过研究。

YUI团队2008年底的合影，中间的长者即为Douglas Crockford：

Douglas Crockford作为JavaScript开发社区的Guru，其众多的在JavaScript开发方面的研究成果被广泛的应用，而他的思想也深深的影响了整个JavaScript应用和发展。学习、理解、实践大师的思想，我们才可能站在巨人的肩上，才有机会超越，所以下面列表是一个开始：

1. JavaScript: The Wrrrld’s Most Misunderstood Programming Language
   中文：JavaScript:世界上最被误解的语言
2. The World’s Most Misunderstood Programming Language Has Become the World’s Most Popular Programming Language
   中文：JavaScript：从最受误解的编程语言演变为最流行的语言
3. A Survey of the JavaScript Programming Language
   中文：纵览 JavaScript语言
4. Code Conventions for the JavaScript Programming Language
   中文：JavaScript程序编码规范
5. The Little JavaScripter
   对《The Little Schemer》一书的讨论，并作了以JavaScript代替Scheme的尝试
6. Private Members in JavaScript
   中文：JavaScript中的私有成员
7. Prototypal Inheritance in JavaScript
   中文：在JavaScript实现基于原型的继承
8. Classical Inheritance in JavaScript
   中文：在JavaScript中实现基于类模式的继承
9. Remedial JavaScript
   过快的标准化导致JavaScript在开发过程中未得到足够的优化，当前它仍存在一些问题，本文提出了一些补救的措施
10. JavaScript and HTML Script Tags
    中文：JavaScript与HTML的Script标签
11. JScript Memory Leaks
    中文：JScript的内存泄漏
12. Top Down Operator Precedence
    自顶向下的运算符优先级，这是Douglas Crockford为《Beautiful Code（代码之美）》而写，位于书中第九章
13. The Elements of JavaScript Style, Parts One and Two
    中文：JavaScript的风格要素1和2
14. Minification v. Obfuscation
15. Synchronous v. Asynchronous
16. with Statement Considered Harmful
17. Global Domination
18. Global Domination, Part Two
19. for in Intrigue
20. JavaScript, We Hardly new Ya
    中文：JavaScript的new，好久不见啊
21. JSON and Browser Security
    中文：JSON和浏览器安全
22. I’d Rather switch Than Fight!
23. The Only Thing We Have To Fear Is Premature Standardization
    中文：不成熟的标准化是我们唯一惧怕的
24. When You Can’t Count On Your Numbers
25. Fixing HTML    中文
26. HTML4.2
27. Ajax security^幻灯片
28. JavaScript: The Good Parts^{视频，2009.03在Google的演讲}：
    1. 38 minutes^{视频位于Youtube上}
    2. 幻灯片^{和ajax world 2008版本一样}
29. The Mashup Problem and Google Gears^视频
    1. 44 minutes | MP4 download
30. The JavaScript Programming Language^视频：
    1. Part 1: 31 minutes | M4V download
    2. Part 2: 31 minutes | M4V download
    3. Part 3: 29 minutes | M4V download
    4. Part 4: 20 minutes | M4V download
    5. 幻灯片
31. An Inconvenient API: The Theory of the Dom^视频：
    1. Part 1 (31 minutes)
    2. Part 2 (21 minutes)
    3. Part 3 (26 minutes)
    4. 幻灯片
32. Advanced JavaScript^视频：
    1. Part 1: 31 minutes
    2. Part 2: 25 minutes
    3. Part 3: 11 minutes
    4. 幻灯片
33. Quality^{视频，YAHOO Frontend Summit 2007}：
    1. 48 minutes | M4V download
34. JavaScript: The Good Stuff^视频：
    1. 39 minutes | M4V download
35. The State of Ajax^视频：
    1. 38 minutes | M4V download
36. Ajax Performance^视频：
    1. 38 minutes | M4V download
    2. 幻灯片
    3. 誊本：英文、中文
37. The JSON Saga
    1. 38 minutes | M4V download
    2. 幻灯片
    3. 誊本
38. The State and Future of JavaScript
    1. 55 minutes | M4V download
    2. 幻灯片
39. On JavaScript
    1. Volume One: The Early Years ^{(Monday, January 25, 2010)}
       1. 90 minutes | M4V download
       2. 幻灯片
    2. Chapter 2: And Then There Was JavaScript ^{(Friday, February 5, 2010)}
       1. 90 minutes | M4V download
       2. 幻灯片
    3. Act III: Function the Ultimate ^{(Wednesday, February 17, 2010)}
       1. 73 minutes | M4V download
       2. 幻灯片
    4. Episode IV: The Metamorphosis of Ajax ^{(Wednesday, March 3, 2010)}
       1. 93 minutes | M4V download
       2. 幻灯片
    5. Part 5: The End of All Things ^{(Wednesday, March 31, 2010)}
       1. 94 minutes | M4V download
       2. 幻灯片

YUI Doc和JavaDoc、JSDoc和JsDoc Toolkit相似。YUI Doc是由注解驱动（comment-driven ）的系统，它通过解析代码中描述结构的注解来生成文档。由于它纯粹的依赖于注解，所以并不像一些模拟系统一样需要有惯用语和代码模式。更详细的介绍可以看YUI Doc的官方文档和YUI blog上的《YUI Doc: A New Tool for Generating JavaScript API Documentation》（由于YUI blog咱们无法访问，比较好的解决方案就是在Google Reader中订阅它的Feed，直接输入 http://yuiblog.com即可。）

YUI Doc是基于Python开发，且依赖几个扩展库，加之其Getting Started写的也比较含糊，所以如何使用这个工具反而成为第一道门槛，尤其对于那些对Python不熟悉的同学来说。所以，下面的重点是介绍如何在Windows上使用YUI Doc：

1. 下载Python2.5.2安装之。
   虽然Python3.0和Python2.6都已经出来很久了，但之所以依旧选择Python2.5.2，是因为后面要用到的安装Python扩展库的工具setuptools在Windows下的最新版本对应的是Python2.5。我不知道它是否支持2.5以上，有兴趣的可以试试。
2. 下载setuptools-0.6c9.win32-py2.5.exe并安装之，setuptools会自动安装到Python所在安装目录的Scripts目录下。
   setuptools为Python提供了简单的包管理和发行功能。后面的扩展库的安装就是利用它的easy_install，非常方便。有兴趣的可以看看《可爱的 Python: 使用 setuptools 孵化 Python egg》。
3. 为了使用方便需要配置一下“环境变量”，即在“我的电脑 》右键 》属性 》高级 》环境变量 》系统变量 》 选中Path 》 编辑”，在弹出框中加入：

   ;D:\Program Files\python;D:\Program Files\python\Scripts

   然后应用即可。前面的两个路径分别是我的Python和setuptools的安装路径，你需要修改成你自己的。

4. 开始 》运行 》(Win + R)输入“cmd”，输入：

   python -c "import pkg_resources"

   没有任何输出，即表示setuptools安装成功。接着依次输入运行：

   easy_install Pygments
   easy_install simplejson
   easy_install Cheetah
   

   setuptools会自动寻找并下载Pygments、SimpleJSON和Cheetah这三个扩展库，并安装它。

5. 下载最新版本YUI Doc，并解压在某个目录下。复制其bin目录下的example.bat文件，重命名为test.bat，然后用记事本或其他编辑器打开并配置它:

   SET yuidoc_home="D:\yui\yuidoc"
   REM YUI Doc的路径
   SET parser_in="D:\yui\src"
   REM 要生成文档的JS文件路径，比如为了测试就我临时建一个，里面就放着YUI 的 dom.js
   SET parser_out="D:\yui\src\parser"
   REM YUI Doc会把解析的JS文件提取出来所要存放的位置
   SET generator_out="D:\yui\src\generator"
   REM 生成文档存放的位置
   

   保存并运行test.bat后，就会发现D:\yui\src中多了parser和generator两个目录，而generator中正是你要的文档。

支持中文注释的解决方案

1. 下载最新版本YUI Doc，解决方案在yuidoc-27中验证通过
2. 把所有.js文件都转成不带BOM的UTF-8编码
3. 修改文件/bin/yuidoc_highlight.py：

   from pygments.formatters import HtmlFormatter
   #新增下行
   import codecs
   ...
   #f=open(os.path.join(path, file))
   #fileStr=StringIO(f.read()).getvalue()
   #f.close()
   fileStr = codecs.open( os.path.join(path, file), "r", "utf-8" ).read()
   log.info("highlighting " + file)
   
   #highlighted = highlightString(fileStr)
   highlighted = highlightString(unicode(fileStr))
   

4. 在Python的\Lib\site-packages\下增加一个名为sitecustomize.py的文件，其内容为：

   import sys
   sys.setdefaultencoding('utf-8')
   

谢谢小马提供中文注释的解决方案

学会使用工具仅仅是开始了一小步，仔细看看YUI Doc的官方文档吧，利用其来促使我们写出更高效优雅的前端代码并惠及更多的人才是一大步。

在CSS3草案中，对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题：

1. {word-break:break-all;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开
2. {word-wrap:break-word;}： 内容将在边界内换行，如需要则词内换行（word-break）也行发生

下面是常见浏览器的支持情况：

• [1] 在MSDN的CSS Compatibility and Internet Explorer中可以看出，IE8会像IE6和IE7一样支持word-wrap和word-break这两个属性，但我在IE8beta2上测试来看却不支持这两项，由于IE8还处于beta阶段，且我相信IE8最终会支持的，所以在页头声明<meta content="IE=7" http-equiv="X-UA-Compatible" />使IE8按照IE7来解释页面是一个不错的办法。IE8正式版支持
• [2] Firefox3.1将会支持word-wrap属性Firefox3.5beta4已经支持

由于{word-break:break-all;}导致英文和数字可读性严重下降且无法使连续符号换行，所以{word-wrap:break-word;}是一个相对较好的选择。需要注意的是各个浏览器中word-wrap在td上实现不一致，所以避免直接在td上使用。

但面对浏览器的如此糟糕支持，所以不能不借助JavaScript来解决这个问题，即当浏览器不支持CSS解决方案时，在连续字符串的适当位置插入​字符（当然还可以用<wbr />和­，这三个字符在浏览器中的支持情况请看ppk的《The wbr tag》），这些字符写在浏览器中不会显示，却使长字符串换行。​和­都会导致复制用其处理过的文本时有大量不可打印的字符，导致字符数急剧增大，更严重的是导致复制的链接字符串不可用，所以用<wbr />是比较好的方案，虽然<wbr />在IE8中不被支持且在Safari中有bug，但这些浏览器可以直接用CSS{word-wrap:break-word}来实现无需用<wbr />处理。Opera下要兼容<wbr />，需要设置CSS：wbr:after { content: "\00200B" }。

2009.05.28重写了实现方法，尽可能减少对浏览器探测的依赖，同时考虑对同一个页面多次执行该方法的效率，同时为了偷懒直接基于YUI。请看DEMO

具体实现代码如下：

function fnBreakWordAll(o){
var o = o || {},
  iWord = o.word || 13,
  iRe = o.re || '[a-zA-Z0-9]',
  bAll = o.all || false,
  sClassName = o.className || 'word-break-all',
  aEls = o.els || (function(){
    var aEls = [],
      aAllEls = document.getElementsByTagName('*'),
      re = new RegExp('(?:^|\\s+)' + sClassName + '(?:\\s+|$)');
    for(var i =0,iLen = aAllEls.length; i < iLen ; ++i){
      if(re.test(aAllEls[i].className)){
        aEls[aEls.length] = aAllEls[i];
      }
    }
    return aEls;
  })() || [],
  fnBreakWord = function(oEl){
    // 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改
    if(!oEl || oEl.nodeType !== 1){
      return false;
    }else if(oEl.currentStyle && typeof oEl.currentStyle.wordWrap==='string'){
      breakWord = function(oEl){
        oEl.runtimeStyle.wordWrap = 'break-word';
        return true;
      }
      return breakWord(oEl);
    }else if(document.createTreeWalker){
      var trim = function  (str) {
        str = str.replace(/^\s\s*/, '');
        var ws = /\s/,
        i = str.length;
        while (ws.test(str.charAt(--i)));
        return str.slice(0, i + 1);
      }
      breakWord = function(oEl){
        var dWalker=document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);
        var node,s,c = String.fromCharCode('8203'),
          //re = /([a-zA-Z0-9]{0,13})/;
          re = new RegExp('('+ iRe +'{0,' + iWord + '})');
        while (dWalker.nextNode()){
          node = dWalker.currentNode;
          s = trim(node.nodeValue).split(re).join(c);
          node.nodeValue = s;
        }
        return true;
      }
      return breakWord(oEl);
    }
  };
for(var i=0,n=aEls.length; i<n; ++i){
  var sUa = navigator.userAgent,
    sTn = aEls[i].tagName.toLowerCase() ;
  if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &&
  (sTn === 'td' || sTn === 'th')) || bAll){
    fnBreakWord(aEls[i]);
  }
}
}

具体应用请看演示实例

fnWordBreakAll函数提供一些定制参数，使用方法和参数含义如下：

fnWordBreakAll({word:15,re:'[\\w]',all:true});

这个函数的核心部分修改自Hedger Wang 整理了一个JavaScript解决方案《Cross Browser Word Breaker》，其利用document.createTreeWalker和split方法给非IE浏览器的每个字符间加入了​，它用在纯中文文本基本上没有什么问题，但是如果你仔细观察他给出的例子就会发现文本中有英文或数字时，虽然解决了换行问题，但是使文本难以阅读，且增大了字符间的间距，所以我在此基础上做了上面的改进。

1. 区分大小写：变量名、属性和方法全部都区分大小写
2. 不匹配的引号、圆括号或花括号将抛出错误
3. 条件语句：3个常见陷阱
4. 换行：一直用分号结束语句来避免常见的换行问题
5. 标点法：在对象声明的尾部逗号将导致出错
6. HTML id 冲突
7. 变量作用域：全局变量对局部变量
8. 函数重载：当重载不存在时，覆盖函数
9. 区分string.replace()函数不是全局的
10. parseInt应该包含两个参数
11. “this”和绑定问题
12. 为参数设置默认值，以免你遗漏它们
13. for each循环是用于对象而不是数组
14. switch语句需要点技巧
15. 如果你要检查null，应该先检查undefined
16. 时间处理陷阱

区分大小写

变量名和函数名都是区分大小写的。就像配错的引号一样，这些大家都知道。但是，由于错误是不作声的，所以这是一个提醒。为自己选择一个命名规则，并坚持它。而且，记住JavaScript中的原生函数和CSS属性都是骆驼拼写法（camelCase）。

getElementById(’myId’) != getElementByID(’myId’); //它应该是“Id”而不是“ID”
getElementById(’myId‘) != getElementById(’myID‘); // “Id”也不等于“ID”

document.getElementById('myId').style.Color; //返回 "undefined"

不匹配的引号、圆括号或花括号

避免陷入不匹配的引号、圆括号或花括号陷阱的最好方式是编码时一直同时写出打开和关闭这两个元素符号，然后在其中间加入代码。开始：

var myString = ""; //在输入字符串值之前写入这对引号
function myFunction(){
 if(){//关闭每个打开的括弧
 }
}
//统计所有的左括号和右括号数量，并且确保它们相等
alert(parseInt(var1)*(parseInt(var2)+parseInt(var3))); //关闭每个打开的圆括号

每当你打开一个元素，请关闭它。当你添加了关闭圆括号后，你再把函数的参数放进圆括号中。如果有一串圆括号，统计所有打开的圆括号和所有关闭的圆括号，并且确保这两个数字相等。

条件语句（3个陷阱）

1. 所有的条件语句都必须位于圆括号中。执行语句主体不管是一句还是多句都强烈建议用花括号包围起来，这样能避免很多因修改或嵌套而产生的潜在错误。

   if(var1 == var2){//statement}

2. 不要犯无意地使用赋值运算符的错误：把第二个参数的值赋给第一个参数。因为它是一个逻辑问题，它将一直返回true且不会报错。

   if(var1 = var2){} // 返回true。把var2赋值给var1

3. JavaScript是弱类型，除了在switch语句中。当JavaScript在case比较时，它是非弱类型。

   var myVar = 5;
   if(myVar == '5'){ //返回true，因为JavaScript是弱类型
    alert("hi");  //这个alert将执行，因为JavaScript通常不在意数据类型
   }
   switch(myVar){
    case '5':
    alert("hi"); //这个alert将不会执行，因为数据类型不匹配
   }
   

换行

当心JavaScript中的硬换行。换行被解释为表示行结束的分号。即使在字符串中，如果在引号中包括了一个硬换行，那么你会得到一个解析错误（未结束的字符串）。

var bad  = '<ul id="myId">
  <li>some text</li>
  <li>more text</li>
  </ul>'; // 未结束的字符串错误

var good = '<ul id="myId">' +
 ‘<li>some text</li>‘ +
 ‘<li>more text</li>‘ +
 ‘</ul>’; // 正确

前面讨论过的换行被解释为分号的规则并不适用于控制结构这种情况：条件语句关闭圆括号后的换行并不是给其一个分号。

一直使用分号和圆括号，那么你不会因换行而出错，你的代码易于阅读，且除了那些不使用分号的怪异源码外你会少一些顾虑：所以当移动代码且最终导致两个语句在一行时，你无需担心第一个语句是否正确结束。

多余的逗号

在任何JavaScript对象定义中，最后一个属性决不能以一个逗号结尾。Firefox不会出错，而IE会报语法错误。

var theObj = {
        city : "Boston",
        state : "MA",//IE6和IE7中有“缺少标识符、字符串或数字”的错误，IE8 beta2修正了它
  }

HTML id 冲突

JavaScript DOM绑定（JavaScript DOM bindings）允许通过HTML id索引。在JavaScript中函数和属性共享同一个名字空间。所以，当在HTML中的一个id和函数或属性有相同的名字时，你会得到难以跟踪的逻辑错误。然而这更多是一个CSS最佳实践的问题，当你不能解决你的JavaScript问题时，想起它是很重要的。

<ul>
<li id="length">1</li>
<li id="thisLength">2</li>
<li id="thatLength">3</li>
</ul>
<script>
var listitems = document.getElementsByTagName('li');
var liCount = listitems.length; //IE下返回的是<li id="length">1</li>这个节点而不是所有<li的数量

var thisLength = document.getElementById('thisLength');
    thatLength = document.getElementById('thatLength');
    //IE下会出现“对象不支持此属性和方法”的错误，IE8 beta2下首次加载页面会出错，刷新页面则不会
    //在IE中thisLength和thatLength直接表示以其为id值的DOM节点，
    //所以赋值时会出错，当有var声明时，IE会把其当着变量，这个时候就正常了。
</script>

如果你要标记(X)HTML，绝不要使用JavaScript方法或属性名作为id的值。并且，当你写JavaScript时，避免使用 (X)HTML中的id值作为变量名。

变量作用域

JavaScript中的许多问题都来自于变量作用域：要么认为局部变量是全局的，要么用函数中的局部变量覆盖了全局变量。为了避免这些问题，最佳方案是根本没有任何全局变量。但是，如果你有一堆，那么你应该知道这些陷阱。

不用var关键字声明的变量是全局的。记住使用var关键字声明变量，防止变量具有全局作用域。在下面例子中，在函数中声明的变量具有全局变量，因为没有使用var关键字声明：

anonymousFuntion1 = function(){
 globalvar = 'global scope'; //全局声明，因为“var”遗漏了
 return localvar;
}();
alert(globalvar); //弹出“global scope”，因为函数中的变量是全局声明

anonymousFuntion2 = function(){
 var localvar = 'local scope'; //使用“var”局部声明
 return localvar;
}();
alert(localvar); //错误 “localvar未定义”。没有全局定义localvar

作为参数引进到函数的变量名是局部的。如果参数名也是一个全局变量的名字，像参数变量一样有局部作用域，这没有冲突。如果你想在函数中改变一个全局变量，这个函数有一个参数复制于这个全局变量名，记住所有全局变脸都是window对象的属性。

var myscope = "global";
function showScope(myscope){
 return myscope; //局部作用域，即使有一个相同名字的全局变量
}
alert(showScope('local'));

function globalScope(myscope){
 myscope = window.myscope; //全局作用域
 return myscope;
}
alert(globalScope(’local’));

你甚至可以在循环中声明变量：

for(var i = 0; i < myarray.length; i++){}

覆盖函数/重载函数

当你不止一次的声明一个函数时，这个函数的最后一次声明将覆盖掉该函数的所有前面版本且不会抛出任何错误或警告。这不同于其他的编程语言，像Java，你能用相同的名字有多重函数，只要它们有不同的参数：调用函数重载。在JavaScript中没有重载。这使得不能在代码中使用JavaScript核心部分的名字极其重要。也要当心包含的多个JavaScript文件，像一个包含的脚本文件可能覆盖另一个脚本文件中的函数。请使用匿名函数和名字空间。

(function(){
 // creation of my namespace 创建我的名字空间
 if(!window.MYNAMESPACE) {
  window['MYNAMESPACE'] = {};
 }
 //如果名字空间不存在，就创建它
 //这个函数仅能在匿名函数中访问
 function myFunction(var1, var2){
  //内部的函数代码在这儿
 }
 // 把内部函数连接到名字空间上，使它通过使用名字空间能访问匿名函数的外面 
 window['MYNAMESPACE']['myFunction'] = myFunction;
})(); // 圆括号 = 立即执行
// 包含所有代码的圆括号使函数匿名

这个例子正式为了实现解决上一个陷阱“变量作用域”的最佳方案。匿名函数详细内容请看《Javascript的匿名函数》。YUI整个库只有YAHOO和YAHOO_config两个全局变量，它正是大量应用匿名函数和命名空间的方法来实现，具体请看《Javascript的一种模块模式》。

字符串替换

一个常见错误是假设字符串替换方法的行为会对所有可能匹配都产生影响。实际上，JavaScript字符串替换只改变了第一次发生的地方。为了替换所有发生的地方，你需要设置全局标识。同时需要记住String.replace()的第一个参数是一个正则表达式。

var myString = "this is my string";
myString = myString.replace("","%20"); // "this%20is my string"
myString = myString.replace(/ /,"%20"); // "this%20is my string"
myString = myString.replace(/ /g,"%20"); // "this%20is%20my%20string"

parseInt

在JavaScript得到整数的最常见错误是假设parseInt返回的整数是基于10进制的。别忘记第二个参数基数，它能是从2到36之间的任何值。为了确保你不会弄错，请一直包含第二个参数。

parseInt('09/10/08'); //0
parseInt(’09/10/08′,10); //9, 它最可能是你想从一个日期中得到的值

如果parseInt没有提供第二个参数，则前缀为 ‘0x’ 的字符串被当作十六进制，前缀为 ‘0′ 的字符串被当作八进制。所有其它字符串都被当作是十进制的。如果 numString 的前缀不能解释为整数，则返回 NaN（而不是数字）。

‘this’

另一个常见的错误是忘记使用“this”。在JavaScript对象中定义的函数访问这个对象的属性，但没有使用引用标识符“this”。例如，下面是错误的：

function myFunction() {
 var myObject = {
  objProperty: "some text",
  objMethod: function() {
   alert(objProperty);
  }
 };
 myObject.objMethod();
} 

function myFunction() {
 var myObject = {
  objProperty: "some text",
  objMethod: function() {
   alert(this.objProperty);
  }
 };
 myObject.objMethod();
}

有一篇A List Apart文章用通俗易懂的英文表达了this绑定的问题。

对this使用最大的陷阱是this在使用过程中其引用会发生改变：

<input type="button" value="Gotcha!" id="MyButton">
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
        alert(this.alertMessage );
        //返回结果不是”JavaScript rules”，执行MyObject.ClickHandler时，
        //this的引用实际上指向的是document.getElementById("theText")的引用
  }
}();
document.getElementById(”theText”).onclick =  MyObject.ClickHandler
</script>

其解决方案是：

var MyObject = function () {
    var self = this;
    this.alertMessage = “Javascript rules”;
    this.OnClick = function() {
        alert(self.value);
    }
}();

类似问题的更多细节和解决方案请看《JavaScript作用域的问题》。

遗漏的参数

当给函数增加一个参数时，一个常见的错误是忘记更新这个函数的所有调用。如果你需要在已经被调用的函数中增加一个参数来处理一个特殊情况下的调用，请给这个函数中的这个参数设置默认值，以防万一在众多脚本中的众多调用中的一个忘记更新。

function addressFunction(address, city, state, country){
 country = country || “US”; //如果没有传入country,假设 “US”
 span>//剩下代码
}

你也能通过获取arguments来解决。但是在这篇文章我们的注意力在陷阱上。同时在《Javascript风格要素（2）》也介绍了||巧妙应用。

for关键字

在JavaScript中关键字for有两种使用方式，一个是for语句，一个是for/in语句。for/in语句将遍历所有的对象属性（attribute），包括方法和属性（property）。决不能使用for/in来遍历数组：仅在当需要遍历对象属性和方法时才使用for/in。

1. for(var myVar in myObject)语句用一个指定变量无任何规律地遍历对象的所有属性。如果for/in循环的主体删除了一个还没有枚举出的属性，那么该属性就不在枚举。如果循环主体定义了新属性，那么循环是否枚举该属性则是由JavaScript的实现决定。
2. for(var 1=0; i < myArray.length; i++)语句会遍历完一个数组的所有元素。

为了解决这个问题，大体上你可以对对象使用 for … in，对数组使用for循环：

listItems = document.getElementsByTagName('li');
for (var listitem in listItems){
 //这里将遍历这个对象的所有属性和方法，包括原生的方法和属性，但不遍历这个数组：出错了！
}
//因为你要循环的是数组对象，所用for循环
for ( var i = 0; i < listItems.length; i++) {
 //这是真正你想要的
}

对象的有些属性以相同的方式标记成只读的、永久的或不可列举的，这些属性for/in无法枚举。实际上，for/in循环
会遍历所有对象的所有可能属性，包括函数和原型中的属性。所有修改原型属性可能对for/in循环带来致命的危害，所以需要采用hasOwnProperty和typeof做一些必要的过滤，最好是用for来代替for/in。

switch语句

Estelle Weyl写了一篇switch statement quirks，其要点是：

1. 没有数据类型转换
2. 一个匹配，所有的表达式都将执行直到后面的break或return语句执行
3. 你可以对一个单独语句块使用多个case从句

undefined ≠ null

null是一个对象，undefined是一个属性、方法或变量。存在null是因为对象被定义。如果对象没有被定义，而测试它是否是null，但因为没有被定义，它无法测试到，而且会抛出错误。

if(myObject !== null  && typeof(myObject) !== 'undefined') {
 //如果myObject是undefined，它不能测试是否为null，而且还会抛出错误
}
if(typeof(myObject) !== 'undefined' && myObject !== null) {
 //处理myObject的代码
}

Harish Mallipeddi对undefined和null有一个说明。

事件处理陷阱

刚接触事件处理时最常见的写法就是类似：

window.onclick = MyOnClickMethod

这种做法不仅非常容易出现后面的window.onclick事件覆盖掉前面的事件，还可能导致大名顶顶的IE内存泄露问题。为了解决类似问题，4年前Simon Willison就写出了很流行的addLoadEvent()：

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 }else {
  window.onload = function() {
   oldonload();
   unc();
  }
 }
}
addEvent(window,'load',func1,false);
addEvent(window,'load',func2,false);
addEvent(window,'load',func3,false);

当然在JavaScript库盛行的现在，使用封装好的事件处理机制是一个很好的选择，比如在YUI中就可以这样写：

YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);