关于跨域名问题还是问题么，这方面的解决实践非常多，今天我就旧话重提把我所知道的通过几个应用场景来分别总结一下

先说明一点：我说的某某域名在您的控制下的意思是这个域名下的网页由您来负责开发内部的JavaScript
场景一：将bbs.xxx.com的页面用iframe嵌入到www.xxx.com的中，如何在iframe内外使用js通信
一级域名都是xxx.com 这个域名一定是在您的控制下，所以你只要在两个页面中同时升级域名即可
在父窗口和iframe内部分别加上js语句：document.domain=”xxx.com”;
之后2个页面就等于在同一域名下，通过window.parent oIframe.contentDocument就可以相互访问，进行无障碍的JS通信
在新浪、淘宝等很多页面都能找到这样的语句。不过document.domain不可以随便指定，只能向上升级，从bbs.xxx.com升级到yyy.com肯定会出错

场景二：将www.yyy.com的页面用iframe嵌入到www.xxx.com的中，两个域名都在您的控制下，如何在iframe内外进行一定的数据交流
你可以通过相互改变hash值的方式来进行一些数据的通信

这里的实现基于如下技术要点：
1、父窗口通过改变子窗口的src中的hash值把一部分信息传入，如果src只有hash部分改变，那么子窗口是不会重新载入的。
2、子窗口可以重写父窗口的location.href，但是注意这里子窗口无法读取而只能重写location.href所以要求前提是您控制两个域名，知道当前父窗口的location.href是什么并写在子窗口内，这样通过parent.location.href = “已知的父窗口的href”+”#”+hash。这样父窗口只有hash改变也不会重载。
3、上面两步分别做到了两个窗口之间的无刷新数据通知，那么下面的来说如何感知数据变化。标准中没有相关规定，所以当前的任意浏览器遇到location.hash变化都不会触发任何javaScript事件，也就是说您要自己写监听函数来监视loaction.hash的值的变化。做法是通过setTimeout或者setInterval来写一个监听函数每20-100ms查看一下hash是否变化，如果变化了驱动js根据新的数据做想做的事情。

这种实现的一些分析：
1、信息通道是双向的，当然会兼容单向，如果只是父窗口向子窗口通知数据，只需要子窗口写hash监听，反之亦然。
2、局限性也是颇大，因为这种通信的前提是双方知道对方的location.href。如果父窗口带有动态的location.search也就是查询参数，那么子窗口的处理上就比较困难，需要把父窗口的location.search作为传递信息的一部分告知子窗口。
3、另外的困扰会有浏览器带给你，IE之外的浏览器遇到hash的改变会记录历史，这样你在处理前进后退的时候会非常头疼

场景三：将www.yyy.com的页面用iframe嵌入到www.xxx.com的中，只有被嵌入的yyy.com在您的控制下，如何在iframe内外进行一定的交流
真实场景：google adsence的一个需求，你希望google发现您的页面不能匹配出相关性非常好的按点击付费广告时，你希望google的广告iframe能够隐藏。
google的广告iframe在google域下显然不能把自己隐藏掉，那么怎么办呢？
1、google会提供给你一个html页面
2、您将这个页面放置在您的域名下，并告诉google它的位置
3、当google发现没有很好的广告时，会将子窗口的loaction重定向到您的那个页面下，这样您的页面因为同域名就可以访问父页面来隐藏自己了
是不是很巧的方法？

场景四：您是内容发布商，如何改造接口，让其他域名下的页面可以从浏览器端出发获得您的数据
我们知道ajax的xmlHttpRequest()说到底是一个无刷新请求服务器数据的辅助工具，但是xmlHttpRequest并不能跨域名请求数据，在某些情况下成了极大的限制。
但是我们如果通过其他方式完成无刷新请求数据不也可以么，我们用Dom方法操作动态JS脚本请求来做这件事。
    //创建一个脚本节点
    var oScript = document.createElement(’script’);
    //指定脚本src src可以指向任意域名
    //注意src不再指向静态js，而是带着查询参数指向一个动态脚本广播服务。
    oScript.src = “http://yyy.com/query.php?”+yourQueryString;   
    //如果指定了charset 同时还可以解决xmlHttpRequest另一大困扰 乱码问题                                                                                                                           
    //oScript.charset = “utf-8″;
    //通过Dom操作把这个新的节点加入到文档当中                                 
    document.getElementsByTagName(”head”)[0].appendChild(oScript);

这样只要query.php的输出是可执行的javaScript脚本，比如：djsCallBack（{jsondata}）;
当他从服务器返回后就会自动执行,你可以方便的用json方式来做数据传递了。
要注意，您的脚本请求最好带上时间戳，避免浏览器缓存造成取回数据实时性下降。

如果您是数据提供者，您可以要求数据索取者在查询参数中提供回调函数名，比如query.php?callback=myDataHandler&key=…?
这样您就可以根据参数来提供给他myDataHandler({jsondata}),这样不同的数据索取者都会得到自定义的正确的异步回调。

场景五：通过后端程序语言，为了跨域名而做各自的后台数据抓取转化服务，比如php curl，YAHOO  CHINA NCP就是用这种方案。

场景六：通过flash proxy，因为flash的跨域调用可以通过crossdomain.xml和security.allowdomain(’*')文件实现，而js又可以和flash进行通信，所以js完全可以借用flash

               实现js跨域通信。

 
总结总结：
第一种场景，相应的处理办法有这非常好的效果，可以说完全解决了问题。
第二种场景，相应的处理办法具有一定的跨域数据交流功效，具有相当大的局限，并不适合在复杂业务流程中应用，实际上我也确实也没看到过基于此的大规模应用。
第三种场景，相应的处理办法比较巧妙，虽然redirect之后就不干你什么事了，但如果你是google一样面向众多域名的内容提供商，也是个不错的解决思路。
第四种场景，相应的处理办法非常强大，对比Ajax可以看到，跨域名没问题，无刷新没问题，本身又是异步的，JSON比xml快的多，同时解决乱码问题，只是请求都是Get方式的，不能做Post方式的请求。多一种武器自然可以从容选择了。

第五种场景，处理很方便，也很实用。

第六种场景，需要一定的flash基础哈，作用当然非常强大。

耦合异步脚本

var script = document.createElement('script');

script.src = "sorttable-async.js";

script.text = "sorttable.init()"; // 这会在下面解释

document.getElementsByTagName('head')[0].appendChild(script);

<script src="jquery.js">

jQuery("p").addClass("pretty");

</script>

var scripts = document.getElementsByTagName("script");

var cntr = scripts.length;

while ( cntr ) {

var curScript = scripts[cntr-1];

if ( -1 != curScript.src.indexOf('sorttable-async.js') ) {

eval( curScript.innerHTML );

break;

}

cntr--;

}

window.onload = function() {

var script = document.createElement('script');

script.src = "sorttable-async.js";

script.text = "sorttable.init()";

document.getElementsByTagName('head')[0].appendChild(script);

}

前言

相当不错的 Javascript 编程风格规范，建议大家采用此规范编写 Javascript。原文链接： http://dojotoolkit.org/developer/StyleGuide 。

翻译（Translated by）：i.feelinglucky{at}gmail.com from http://www.gracecode.com ，转载请注明出处、作者和翻译者，谢谢配合。

本文地址： http://code.google.com/p/grace/wiki/DojoStyle 。

序

Any violation to this guide is allowed if it enhances readability.

所有的代码都要变成可供他人容易阅读的。

快读参考

核心 API 请使用下面的风格：

下面的虽然不是必要的，但建议使用：

命名规范

1. 变量名称 必须为 小写字母。
2. 类的命名使用骆驼命名规则，例如：

Account, EventHandler

3. 常量 必须 在对象（类）或者枚举变量的前部声明。枚举变量的命名必须要有实际的意义，并且其成员 必须 使用骆驼命名规则或使用大写：

var NodeTypes = {

        Element : 1,

        DOCUMENT: 2

    }

4. 简写单词 不能使用 大写名称作为变量名：

getInnerHtml(), getXml(), XmlDocument

5. 方法的命令 必须 为动词或者是动词短语：

obj.getSomeValue()

6. 公有类的命名 必须 使用混合名称（mixedCase）命名。
7. CSS 变量的命名 必须 使用其对应的相同的公共类变量。
8. 私有类的变量属性成员 必须 使用混合名称（mixedCase）命名，并前面下下划线（_）。例如：

var MyClass = function(){

       var _buffer;

       this.doSomething = function(){

       };

    }

9. 变量如果设置为私有，则前面 必须 添加下划线。

this._somePrivateVariable = statement;

10. 通用的变量 必须 使用与其名字一致的类型名称：

setTopic(topic) // 变量 topic 为 Topic 类型的变量

11. 所有的变量名 必须 使用英文名称。
12. 变量如有较广的作用域（large scope），必须使用全局变量；此时可以设计成一个类的成员。相对的如作用域较小或为私有变量则使用简洁的单词命名。
13. 如果变量有其隐含的返回值，则避免使用其相似的方法：

getHandler(); // 避免使用 getEventHandler()

14. 公有变量必须清楚的表达其自身的属性，避免字义含糊不清，例如：

MouseEventHandler，而非 MseEvtHdlr。

请再次注意这条规定，这样做得的好处是非常明显的。它能明确的表达表达式所定义的含义。例如：

dojo.events.mouse.Handler // 而非 dojo.events.mouse.MouseEventHandler

15. 类/构造函数 可以使用 扩展其基类的名称命名，这样可以正确、迅速的找到其基类的名称：

EventHandler

    UIEventHandler

    MouseEventHandler

基类可以在明确描述其属性的前提下，缩减其命名：

MouseEventHandler as opposed to MouseUIEventHandler.

特殊命名规范

1. 术语 "get/set" 不要和一个字段相连，除非它被定义为私有变量。
2. 前面加 "is" 的变量名 应该 为布尔值，同理可以为 "has", "can" 或者 "should"。
3. 术语 "compute" 作为变量名应为已经计算完成的变量。
4. 术语 "find" 作为变量名应为已经查找完成的变量。
5. 术语 "initialize" 或者 "init" 作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量。
6. UI （用户界面）控制变量应在名称后加控制类型，例如： leftComboBox, TopScrollPane。
7. 复数必须有其公共的名称约定（原文：Plural form MUST be used to name collections）。
8. 带有 "num" 或者 "count" 开头的变量名约定为数字（对象）。
9. 重复变量建议使用 "i", "j", "k" （依次类推）等名称的变量。
10. 补充用语必须使用补充词，例如： get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end, etc.
11. 能缩写的名称尽量使用缩写。
12. 避免产生歧义的布尔变量名称，例如：

isNotError, isNotFound 为非法

13. 错误类建议在变量名称后加上 "Exception" 或者 "Error"。
14. 方法如果返回一个类，则应该在名称上说明返回什么；如果是一个过程，则应该说明做了什么。

文件

1. 缩进请使用 4 个空白符的制表位。
2. 如果您的编辑器支持 文件标签_（file tags），请加添如下的一行使我们的代码更容易阅读：

// vim:ts=4:noet:tw=0:

译注：老外用 VIM 编辑器比较多，此条可以选择遵循。

1. 代码折叠必须看起来是完成并且是合乎逻辑的：

var someExpression = Expression1

            + Expression2

            + Expression3;

        

        var o = someObject.get(

            Expression1,

            Expression2,

            Expression3

        );

注：表达式的缩进与变量声明应为一致的。

注：函数的参数应采用明确的缩进，缩进规则与其他块保持一致。

变量

1. 变量必须在声明初始化以后才能使用，即便是 NULL 类型。
2. 变量不能产生歧义。
3. 相关的变量集应该放在同一代码块中，非相关的变量集不应该放在同一代码块中。
4. 变量应该尽量保持最小的生存周期。
5. 循环/重复变量的规范：
1. 只有循环控制块的话，则必须使用 FOR 循环。
2. 循环变量应该在循环开始前就被初始化；如使用 FOR 循环，则使用 FOR 语句初始化循环变量。
3. "do ... while" 语句是被允许的。
4. "break" 和 "continue" 语句仍然允许使用（但请注意）。
6. 条件表达式
1. 应该尽量避免复杂的条件表达式，如有必要可以使用临时布尔变量。
2. The nominal case SHOULD be put in the "if" part and the exception in the "else" part of an "if" statement.
3. 应避免在条件表达式中加入块。
7. 杂项
1. 尽量避免幻数（Magic numbers），他们应该使用常量来代替。
2. 浮点变量必须指明小数点后一位（即使是 0）。
3. 浮点变量必须指明实部，即使它们为零（使用 0. 开头）。

布局

块

1. 普通代码段 应该 看起来如下：

while (!isDone){

                    doSomething();

                isDone = moreToDo();

            }

2. IF 语句 应该 看起来像这样：

if (someCondition){

                    statements;

            } else if (someOtherCondition){

                statements;

            } else {

                statements;

            }

3. FOR 语句 应该 看起来像这样：

for (initialization; condition; update){

                    statements;

            }

4. WHILE 语句 应该 看起来像这样：

while (!isDone) {

                    doSomething();

                isDone = moreToDo();

            }

5. DO ... WHILE 语句 应该 看起来像这样：

do {

                    statements;

            } while (condition);

6. SWITCH 语句 应该 看起来像这样：

switch (condition) {

            case ABC:

                statements;

                //  fallthrough

            case DEF:

                statements;

                break;

            default:

                    statements;

                break;

            }

7. TRY ... CATCH 语句 应该 看起来像这样：

try {

                statements;

            } catch(ex) {

                statements;

            } finally {

                statements;

            }

8. 单行的 IF - ELSE，WHILE 或者 FOR 语句也 必须 加入括号，不过他们可以这样写：

if (condition){ statement; }

            while (condition){ statement; }

            for (intialization; condition; update){ statement; }

空白

1. 操作符 建议 使用空格隔开（包括三元操作符）。
2. 下面的关键字 避免使用 空白隔开：
• break
• catch
• continue
• do
• else
• finally
• for
• function （如果为匿名函数，例如：var foo = function(){}; ）
• if
• return
• switch
• this
• try
• void
• while
• with
3. 下面的关键字必须使用空白隔开：
• case
• default
• delete
• function （如果为申明，例如：function foo(){}; ）
• in
• instanceof
• new
• throw
• typeof
• var
4. 逗号（,） 建议 使用空白隔开。
5. 冒号（:） 建议 使用空白隔开。
6. 点（.） 在后部 建议 使用空白隔开。
7. 点（.） 避免 在前部使用空白。
8. 函数调用和方法 避免 使用空白，例如： doSomething(someParameter); // 而非 doSomething (someParameter)
9. 逻辑块 之间使用空行。
10. 声明 建议 对齐使其更容易阅读。

注释

1. 生涩的代码就 没有必要 添加注释了，首先您需要 重写 它们。
2. 所有的注释请使用英文。
3. 从已解决的方案到未开发的功能，注释 必须 与代码相关。
4. 大量的变量申明后 必须 跟随一段注释。
5. 注释需要说明的是代码段的用处，尤其是接下来的代码段。
6. 注释 没有必要 每行都添加。

文档

下面提供了一些基本的函数或者对象的描述方法：

• 总结（summary）: 简短的表述此函数或者对象实现的目的
• 描述（description）: 对于此函数或者类的简短的描述
• 返回（return）: 描述此函数返回什么（并不包括返回类型）

基本函数信息

function(){

            // summary: Soon we will have enough treasure to rule all of New Jersey.

            // description: Or we could just get a new roomate.

            //          Look, you go find him.  He don't yell at you.

            //          All I ever try to do is make him smile and sing around

            //          him and dance around him and he just lays into me.

            //          He told me to get in the freezer 'cause there was a carnival in there.

            // returns:  Look, a Bananarama tape!

        }

对象函数信息

没有返回值描述

{

            // summary: Dingle, engage the rainbow machine!

            // description: 

            //          Tell you what, I wish I was--oh my g--that beam,

            //          coming up like that, the speed, you might wanna adjust that.

            //          It really did a number on my back, there. I mean, and I don't

            //          wanna say whiplash, just yet, cause that's a little too far,

            //          but, you're insured, right?

        }

函数的声明

在有的情况下，对于函数的调用和声明是隐义（invisible）的。在这种情况下，我们没有办法在函数中加入说明等（供程序调用）。如果您遭遇了这种情况，您可以使用一个类来封装函数。

注：此此方法只能在函数没有初始化的参数情况下。如过不是，则它们会被忽略。

dojo.declare(

            "foo",

            null,

            {

                // summary: Phew, this sure is relaxing, Frylock.

                // description: 

                //              Thousands of years ago, before the dawn of

                //              man as we knew him, there was Sir Santa of Claus: an

                //              ape-like creature making crude and pointless toys out

                //              of dino-bones, hurling them at chimp-like creatures with

                //              crinkled hands regardless of how they behaved the

                //              previous year.

                // returns: Unless Carl pays tribute to the Elfin Elders in space.

                }

        );

参数

1. 简单类型

简单的类型的参数可以直接在函数参数定义中注释说明。

function(/*String*/ foo, /*int*/ bar)...

2. 可变类型参数

下面是几个修饰符供参考：

• ? 可选参数
• ... 说面参数范围不确定
• [] 数组

function(/*String?*/ foo, /*int...*/ bar, /*String[]*/ baz)...

3. 全局参数描述

如果你想增加一个描述，你可以将它们移至初始化块。

基本信息格式为： *关键字* 描述字段 （ *key* Descriptive sentence）

参数和变量的格式为： *关键字* ~*类型*~ 描述字段 （ *key* ~*type*~ Descriptive sentence）

注： *关键字* 和 ~*类型*~ 可以使用任何字母和数字表述。

function (foo, bar) {

                // foo: String

                //          used for being the first parameter

                // bar: int

                //          used for being the second parameter

            }

变量

由于实例变量、原型变量和外部变量的声明是一致的，所以有很多的方法声明、修改变量。具体的如何定义和定位应在变量最先出现的位置指明变量的名称、类型、作用域等信息。

function foo() {

                // myString: String

                // times: int

                //          How many times to print myString

                // separator: String

                //          What to print out in between myString*

                this.myString = "placeholder text";

                this.times = 5;

            }

            

            foo.prototype.setString = function (myString) {

                this.myString = myString;

            }

            

            foo.prototype.toString = function() {

                for(int i = 0; i < this.times; i++) {

                    dojo.debug(this.myString);

                    dojo.debug(foo.separator);

                    }

            }

            foo.separator = "=====";

对象中的变量注释

应使用和对象值和方法一致的标注方式，比如在他们声明的时候：

{

                // key: String

                //          A simple value

                key: "value",

                // key2: String

                //          Another simple value

            }

返回值

因为函数可以同时返回多个不同（类型）的值，所以应每个返回值之后加入返回类型的注释。注释在行内注释即可，如果所有的返回值为同一类型，则指明返回的类型；如为多个不同的返回值，则标注返回类型为"mixed"。

function() {

                    if (arguments.length) {

                            return "You passed argument(s)"; // String

                    } else {

                    return false; // Boolean

                }

            }

伪代码（有待讨论）

有时候您需要在函数或者类中添加对于此函数和类的功能性流程描述。如果您打算这样做，您可以使用 /*======== （= 字符最好出现 5 次或者更多），这样做的好处就是可以不用将这些东西加入代码（译注：原作者的意思可能为代码管理系统）。

这样看起来在 /*===== 和 =====*/ 会有非常长的一段注释，等待功能调整完毕以后就可以考虑是否删除。

/*=====

            module.pseudo.kwArgs = {

                    // url: String

                //          The location of the file

                url: "",

                // mimeType: String

                //          text/html, text/xml, etc

                mimeType: ""

            }

            =====*/

            

            function(/*module.pseudo.kwArgs*/ kwArgs){

                dojo.debug(kwArgs.url);

                    dojo.debug(kwArgs.mimeType);

            }

浏览和修改Web页的文档对象模型(DOM).通过多种技术方式定位、选定Web页上的特定元素.禁止或激活IE设置.查看HTML对象的类名、 ID,以及类似链接路径、tab顺序、快捷键等细节.描绘表格、单元格、图片或选定标签的轮廓.显示图片象素、大小、路径、替代文字等.即时重定义浏览器 窗口大小到800x600或自定义大小.清空浏览器缓存和cookie,被清除项可从所有对象或给定域中选择.直接访问关联W3C规范参考、IE开发组 blog或其他来源.－显示设计时标尺,帮助对齐对象. .... 

下载地址及相关资料：
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&DisplayLang=en#Overview

HttpWatch
简介：强大的网页数据分析工具。集成在Internet Explorer工具栏。包括网页摘要。Cookies管理。缓存管理。消息头发送/接受。字符查询。POST 数据和目录管理功能。报告输出。

安装完HttpWatch后，就会在浏览器中找到他：

主界面：
 
下载地址：http://www.crsky.com/soft/3455.html

使用介绍：http://www.cnblogs.com/mayingbao/archive/2007/11/30/978530.html

Fiddler2

简介：Fiddler2是一个网络调试代理，用来监测本地计算 机和Internet之间所有的HTTP通讯。可以监测所有的HTTP通讯，设置断点，并且可以修改到进入到本地计算机的数据和从本地计算机出去的数据 （就是可以伪造数据）。Fiddler包含一个JScript .NET 事件脚本子系统（event-based scripting subsystem），可以使用任何一种.Net语言扩展。该软件是免费的，支持多种浏览器，包括Internet Explorer，Mozilla Firefox，Opera和其它一些浏览器。

从Fiddler官方网站上可以看见原版的英文介绍：http://www.fiddler2.com/fiddler2/
下载地址：http://www.fiddler2.com/fiddler2/

使用介绍：http://blog.csdn.net/lihongzhai/archive/2009/09/14/4551035.aspx

NUnit 

NUnit是一个单元测试框架，专门针对于。NET来写的.其实在前面有JUnit(Java)，CPPUnit(C++)，他们都是xUnit的一员。最初它是从JUnit而来。现在的版本是2.2.接下来我所用的都是基于这个版本。

下载地址：http://www.nunit.org/index.php

使用介绍：http://www.uml.org.cn/net/200702273.asp

PowerDesigner

简介：PowerDesigner是Sybase公司的CASE工具集，使用它可以方便地对管理信息系统进行分析设计，它几乎包括了数据库模型设计的全过程。
利用PowerDesigner可以制作数据流程图、概念数据模型、物理数据模型，可以生成多种客户端开发工具的应用程序，还可为数据仓库制作结构模型，也能对团队设计模型进行控制。

主要功能：DataArchitect：这是一个强大的数据库设计工具，使用DataArchitect 可利用实体-关系图为一个信息系统。创建"概念数据模型"－CDM（Conceptual Data Model）。并且可根据CDM 产生基于某一特定数据库管理系统（例如：Sybase System 11）的"物理数据模型"-PDM(Physical Data Model)。还可优化PDM，产生为特定DBMS 创建数据库的SQL 语句并可以文件形式存储以便在其他时刻运行这些SQL 语句创建数据库。另外，DataArchitect还可根据已存在的数据库反向生成
PDM，CDM 及创建数据库的SQL脚本。
ProcessAnalyst：这部分用于创建功能模型和数据流图，创建"处理层次关系"。
AppModeler：为客户/服务器应用程序创建应用模型。
ODBC Administrator：此部分用来管理系统的各种数据源。

下载地址：http://www.baidu.com/s?tn=sitehao123&bs=PowerDesigner&f=3&wd=powerdesigner%CF%C2%D4%D8&oq=powerdesigner&rsp=0 ：)

使用介绍： http://www.cnblogs.com/yxonline/archive/2007/04.html

 Reflector

简介：Visual Studio内置的ILDASM成为最初挖掘程序集的上佳工具。 但自从Reflector出现后，ILDASM相形见拙。因为，Reflector能提供更多的程序集信息。Reflector可以将.NET程序集中的 中间语言反编译成C#或者Visual Basic代码。除了能将IL转换为C#或Visual Basic以外，Reflector还能够提供程序集中类及其成员的概要信息、提供查看程序集中IL的能力以及提供对第三方插件的支持。

下载地址： /Files/gaoweipeng/Reflector.rar

使用介绍及其他相关下载：http://www.cnblogs.com/zzy2740/archive/2005/09/20/240216.html

1st JavaScript Editor

简介： 1st JavaScript Editor 是一款强大的JavaScript开发、校验和调试工具， 它简单易用，不论你是初学者或者是专业的开发人士，都可以轻松上手！同时它又是完美的Ajax (Asynchronous JavaScript and XML),CSS, HTML, DOM DHTML开发工具！它提供了简单而且实用的功能：丰富的代码编辑功能(JavaScript, HTML, CSS, VBScript, PHP ,ASP(Net))，语法高亮，内置预览功能，提供了完整的HTML 标记, HTML 属性, HTML 事件, JavaScript 事件和JavaScript 函数等完整的代码库，同时有着贴心的代码自动补全功能。

官网及下载地址：http://yaldex.com/

Regulator

简介：使用Reglator可以方便的验证正则表达式的执行结果，带有智能感知功能。帮助文档是一个很好的学习正则的入门教程，也可以当作参考手册。基本上就全了，同时进行学习和实践。还有生成c# or vb.net代码等附加功能。 类似的软件现在很多：RegexBuddy ，RegexTester。等

 下载地址：http://sourceforge.net/projects/regulator/

 使用介绍：http://www.ctochina.net/topic/ShowArticle/112.html

 小结：上面的开发工具都是我平时喜欢用的，希望通过此文的介绍，对没有使用过的朋友带来帮助。也希望园子中的朋友们秀一秀自己平时常用的开发工具，分享些更实用，方便的开发工具！

关于跨域这个话题，很早就答应过要分享，但是因为懒，一直拖着，直到D2上有人谈起了“完美跨域”。“跨域”应该已经算不上什么难题了，只是提起“完美”这两个字，突然觉得有了新意，那就写点什么吧，至少对自己有个交代嘛！跨域方案有很多，接下来一一枚举，会给出demo，demo的宗旨是尽可能简单的让新手明白，各方案中跨域的原理，实际应用请酌情修改。

方案一、剪贴板

原理：IE本身依附于windows平台的特性为我们提供了一种基于iframe，利用内存来“绕行”的方案，在这里我称之为，本地存储原理。

缺点：不支持非IE浏览器，并且影响到用户对剪贴板的操作，用户体验非常不好，特别是在IE7下，受安全等级影响，会弹出提示框。

演示：[ 点此阅览 ]

子页面在子域：demo.ioldfish.cn下，在页面中加入如下代码获取页面高度并存入剪贴板。

主页面在主域：www.ioldfish.cn下，在页面中加入如下代码，获取剪贴板的值并赋值为子页面所在的iframe的高度。

方案二、document.domain

原理：设置了document.domain，欺骗浏览器

缺点：无法实现不同主域之间的通讯。并且当在一个页面中还包含有其它的iframe时，会产生安全性异常，拒绝访问。

演示：[ 点此阅览 ]

主页面在主域：www.ioldfish.cn下，子页面在子域：demo.ioldfish.cn下，在两个页面的头部都加入如下代码：

方案三、通过JS获取hash值实现通讯

原理：hash可以实现跨域传值实现跨域通讯。

缺点：对于父窗口URL参数动态生成的，处理过程比较复杂一些。并且IE之外的浏览器遇到hash的改变会记录历史，影响浏览器的前进后退功能，体验不佳。

演示：[ 点此阅览 ]

子页面在主域：www.lzdaily.com下，在页面中添加如下代码,因为hash是不受跨域限制的，所以可以将本页面的高度顺利的传送给主页面的hash。

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，首先取得子页面传递过来的hash值，然后将hash值赋到子页面所在的iframe的高度上。

方案四、传hash值实现通讯改良版

原理：该方案通过“前端代理”的方式，实现hash的传值，体验上比之方案三有了很大的提升。

缺点：对于父窗口URL参数动态生成的，处理过程比较复杂一些。

演示：[ 点此阅览 ]

子页面在主域：www.lzdaily.com下，在页面中添加如下代码,首先在页面里添加一个和主页面同域的iframe［也可动态生成］，他的作用就像是个跳板。C页面中不需任何代码，只要确保有个页面就防止404错误就可以了！该方法通过修改iframe的name值同样可以跨域传值，只是比较”猥琐“而已。

然后在页面中加上如下代码，利用页面C的URL接收hash值，并负责把hash值传给同域下的主页面。

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，获取从C页面中传递过来的hash值。这里应用到一个技巧，就是直接从A页面用frames["iId"].frames["iframeC"].location.hash,可以直接访问并获取C页面的hash值。这样一来，通过代理页面传递hash值，比起方案三，大大提高了用户体验。

方案五、JSONP

原理：有点脚本注入的味道

缺点：服务器端程序运行比脚本早，跨域交互时无法捕获前端页面元素的相关数据，比如自适应高度。

演示：[ 点此阅览 ]

主页面在主域：www.ioldfish.cn下，在页面中添加如下代码，动态创建一个script，然后指定到子域的动态文件，在动态文件后面可以添加参数，在这里我加了一个回调函数，当请求返回后，会运行这个回调函数。

子页面在主域：www.lzdaily.com下，在页面中添加如下代码，首先先取得主页面传过来的回调函数名，然后生成一段javascript代码，以回调函数带参数的形式返回主页面，这样就完成了跨域之间的通讯。由于服务器端程序执行总是优先于javascript代码，所以基本上没办法获取到子页面中DOM的相关数据，所以小白同学，我可以很负责人的告诉你，想通过这种方法实现跨域自适应高度是不可能的！

方案六、window.name

原理：window.name本身并不能实现跨域，只是中间做了代理。

缺点：获取异域的前端页面元素值有一定局限性，比如取自适应高度的值。但是此方法在前端页面元素的数据交互上明显比JSONP强。

演示：[ 点此阅览 ]

这个方案，YAHOO的同事已经给出了详细的demo，我就不重复了，演示demo出自YAHOO克军之手。详细的说明可以参看“怿飞的BLOG”，个人觉得方案四比window.name适用面更广一些。

方案七、window.navigator

原理：window.navigator这个对象是在所有的Iframe中均可以访问的对象。应该是IE的一个漏洞！

缺点：不支持IE外的浏览器下的跨域。严格的dtd申明后，该方法失效！

演示：[ 点此阅览 ]

主页面在主域：www.ioldfish.cn下，首先先申明一个Json用来保存所有页面的高度window.navigator.PagesHeight={”":0};，然后根据name的属性找到页面的数据window.navigator.getData，最后将页面的数据注册到window.navigator.PagesHeight中。这里还定义了一个函数resetIframeData，在页面加载的时候调用它，完成跨域的数据交互。注释中详细说明了参数的作用。

子页面在主域：www.lzdaily.com下，获取到页面高度后，将高度存到主页定义的Json中，Json标识为”PortalData”，这里可以自定义。

其实通过css也可以实现跨域，数据获取的实质其实就是动态载入一段CSS，然后解析其中的字段提取数据，这个方法比较“猥琐”，再这里就不多介绍了，当然flash也可以实现跨域，只是还没去实践，实践完了再补充。啥时候能补完呢？恩……

以上这么多方案，有可以“完美跨域”的吗？单一的看，我想没有吧，都有缺陷，但是只要不同情况下使用合适的方法，我想这才是最完美的！原来绕了一圈，我只是再说废话，哎！不论怎么样，还是希望这些废话对还在苦苦追求“完美”的同学们有所启发！

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。

这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。

文尾的重要说明比较重要，请注意。

clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

重要说明

以上是在没有指定 DOCTYPE 的情况下，如果指定了 DOCTYPE，比如：DTD XHTML 1.0 Transitional，则意义又会不同，在这种情况下这三个值都是同一个值，都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。 如果要在指定的 DOCTYPE 下按上述意义来应用，怎么办呢？答案是：将 document.body 和 document.documentElement 一起应用，比如：document.documentElement.scrollLeft || document.body.scrollLeft（一般将 document.documentElement 写在前面），类似应用请参见：http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。

1.传值(by value)

变量的值被复制出一份,与原来的值将不相干,也就是说即使新的值被修改,原来的值也不会改变,在JavaScript中基本类型都是传值的.

function testPassValue()

{

   var m=1;

   var n=2;

   //将m,n的值复制一份,传递到passValue

   passValue(m,n);

   alert(m);  //将是原有的值

}

function passValue(a,b)

{

  a = a+b; //改变a的值,这里a只是原有值的一份copy

  alert(a);  

}

输出结果:

3

1 

2.传引用(by reference).

引用本身复制一份传给function,引用指向的对象并没有被复制传递(java中也是如此),在function中,如果改变了对象的属性的值,由于和原来的引用指向的是同一个对象,因此在通过原来的引用访问到的将是修改过的值;

但是如果只是在function中将引用指向一个新的对象,将不会改变原对象的值,改变的只是复制的这一份引用.

(我的理解是:当对象作为参数传给函数的时候，传递的是对象的拷贝!)

function testPassValue()

{

  var date = new Date(2006,02,27);

  alert(date.getDate());  //输出为 27

  //将date引用本身复制一份,传递到passReference,注意date所指向的对象并没有被复制

  passReference(date);

  alert(date.getDate());  //输出为12

  //同上

  changeReference(date);

  alert(date.getDate());  //输出还为12

}

function passReference(da)

{

 //由于da和原引用指向的是同一个对象,在function外,通过原有的引用访问到的将是对象的日期属性值,将是修改之后的值.

   da.setDate(12); 

}

function changeReference(da)

{

   //此时da引用实际上是原引用的一份copy,将引用本身重新赋值,将不会影响原引用

   da= new Date(2007,05,11); 

//将da引用指向一个新的对象,此时原引用指向的还是原来的对象

   alert(da.getDate());     // 输出为11

}

以前看正则表达式，但没有注意到正则表达式的贪婪与非贪婪模式，今天在经典上看到了这么段代码：

<script>

try{

str="<p>abcdefg</p><p>abcdefghijkl</p>";

re1=str.match(/<p>[\W\w]+?<\/p>/ig);

alert("非贪婪模式:\r\n\r\n１："+re1[0]+"\r\n２："+re1[1]);

re1=str.match(/<p>[\W\w]+<\/p>/ig);

alert("贪婪模式:\r\n\r\n"+re1);

re1=str.match(/<p>(.+?)<\/p>/i);

alert("非贪婪模式，且不要标记:\r\n\r\n１："+re1[1]);

re1=str.match(/<p>(.+)<\/p>/i);

alert("贪婪模式，且不要标记:\r\n\r\n"+re1[1]);

}catch(e){alert(e.description)}

</script>

 匹配次数中的贪婪与非贪婪

    在使用修饰匹配次数的特殊符号时，有几种表示方法可以使同一个表达式能够匹配不同的次数，比如："{m,n}", "{m,}", "?", "*", "+"，具体匹配的次数随被匹配的字符串而定。这种重复匹配不定次数的表达式在匹配过程中，总是尽可能多的匹配。比如，针对文本 "dxxxdxxxd"，举例如下：

    由此可见，"\w+" 在匹配的时候，总是尽可能多的匹配符合它规则的字符。虽然第二个举例中，它没有匹配最后一个 "d"，但那也是为了让整个表达式能够匹配成功。同理，带 "*" 和 "{m,n}" 的表达式都是尽可能地多匹配，带 "?" 的表达式在可匹配可不匹配的时候，也是尽可能的 "要匹配"。这 种匹配原则就叫作 "贪婪" 模式 。

    非贪婪模式：

    在修饰匹配次数的特殊符号后再加上一个 "?" 号，则可以使匹配次数不定的表达式尽可能少的匹配，使可匹配可不匹配的表达式，尽可能的 "不匹配"。这种匹配原则叫作 "非贪婪" 模式，也叫作 "勉强" 模式。如果少匹配就会导致整个表达式匹配失败的时候，与贪婪模式类似，非贪婪模式会最小限度的再匹配一些，以使整个表达式匹配成功。举例如下，针对文本 "dxxxdxxxd" 举例：

    更多的情况，举例如下：

    举 例1：表达式 "<td>(.*)</td>" 与字符串 "<td><p>aa</p></td> <td><p>bb</p></td>" 匹配时，匹配的结果是：成功；匹配到 的内容是 "<td><p>aa</p></td> <td><p>bb</p></td>" 整个字符串， 表达式中的 "</td>" 将与字符串中最后一个 "</td>" 匹配。

    举例2：相比之下，表达式 "<td>(.*?)</td>" 匹配举例1中同样的字符串时，将只得到 "<td><p>aa</p></td>"， 再次匹配下一个时，可以得到第二个 "<td><p>bb</p></td>"。

 function isTrueName(s) 
 { 
 var patrn=/^[a-zA-Z]{1,30}$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 }} 
  
 //校验密码：只能输入6-20个字母、数字、下划线 
 <pre name="code" class="java">function isPasswd(s) 
 { 
 var patrn=/^(\w){6,20}$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 </pre> 
  
 //校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-” 
 <pre name="code" class="java">function isTel(s) 
 { 
 //var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/; 
 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 </pre> 
  
 //校验手机号码：必须以数字开头，除数字外，可含有“-” 
 <pre name="code" class="java">function isMobil(s) 
 { 
 var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 </pre> 
  
 //校验邮政编码 
 <pre name="code" class="java">function isPostalCode(s) 
 { 
 //var patrn=/^[a-zA-Z0-9]{3,12}$/; 
 var patrn=/^[a-zA-Z0-9 ]{3,12}$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 </pre> 
  
 //校验搜索关键字 
 <pre name="code" class="java">function isSearch(s) 
 { 
 var patrn=/^[^`~!@$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\] 
         [\]\{\}:;'\,.<>?]{0,19}$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
  
 function isIP(s) //by zergling 
 { 
 var patrn=/^[0-9.]{1,20}$/; 
 if (!patrn.exec(s)) return false 
 return true 
 } 
 </pre> 
  
 <span style="font-size: 18pt;">正则表达式</span> 
 <pre name="code" class="java">"^\\d+$"　　//非负整数（正整数 + 0） 
 "^[0-9]*[1-9][0-9]*$"　　//正整数  
 "^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0）  
 "^-[0-9]*[1-9][0-9]*$"　　//负整数  
 "^-?\\d+$"　　　　//整数  
 "^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0）  
 "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　 
 //正浮点数  
 "^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0）  
 "^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　 
 //负浮点数  
 "^(-?\\d+)(\\.\\d+)?$"　　//浮点数  
 "^[A-Za-z]+$"　　//由26个英文字母组成的字符串  
 "^[A-Z]+$"　　//由26个英文字母的大写组成的字符串  
 "^[a-z]+$"　　//由26个英文字母的小写组成的字符串  
 "^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串  
 "^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串  
 "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址  
 "^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url 
 "^[A-Za-z0-9_]*$" 
 </pre> 
  
 <span style="font-size: 18pt;">正则表达式使用详解</span> 
  
 简介  
  
 简单的说，正则表达式是一种可以用于模式匹配和替换的强有力的工具。其作用如下： 
 测试字符串的某个模式。例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。  
 替换文本。可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换为别的文字。  
 根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。  
  
 基本语法  
  
 在对正则表达式的功能和作用有了初步的了解之后，我们就来具体看一下正则表达式的语法格式。 
   
 正则表达式的形式一般如下：　　 
  
 /love/ 　　其中位于“/”定界符之间的部分就是将要在目标对象中进行匹配的模式。用户只要把希望查找匹配对象的模式内容放入“/”定界符之间即可。为了能够使用户更加灵活的定制模式内容，正则表达式提供了专门的“元字符”。所谓元字符就是指那些在正则表达式中具有特殊意义的专用字符，可以用来规定其前导字符（即位于元字符前面的字符）在目标对象中的出现模式。  
 较为常用的元字符包括： “+”， “*”，以及 “?”。 
  
 “+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。 
  
 “*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。 
  
 “?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。 
  
 下面，就让我们来看一下正则表达式元字符的具体应用。  
  
 /fo+/　　因为上述正则表达式中包含“+”元字符，表示可以与目标对象中的 “fool”, “fo”, 或者 “football”等在字母f后面连续出现一个或多个字母o的字符串相匹配。  
  
 /eg*/　　因为上述正则表达式中包含“*”元字符，表示可以与目标对象中的 “easy”, “ego”, 或者 “egg”等在字母e后面连续出现零个或多个字母g的字符串相匹配。  
  
 /Wil?/　　因为上述正则表达式中包含“？”元字符，表示可以与目标对象中的 “Win”, 或者“Wilson”,等在字母i后面连续出现零个或一个字母l的字符串相匹配。  
  
 有时候不知道要匹配多少字符。为了能适应这种不确定性，正则表达式支持限定符的概念。这些限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。 
  
 {n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。 
  
 {n,} n 是一个非负整数。至少匹配 n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 
  
 {n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。 
  
 除了元字符之外，用户还可以精确指定模式在匹配对象中出现的频率。例如，/jim {2,6}/ 上述正则表达式规定字符m可以在匹配对象中连续出现2-6次，因此，上述正则表达式可以同jimmy或jimmmmmy等字符串相匹配。  
 在对如何使用正则表达式有了初步了解之后，我们来看一下其它几个重要的元字符的使用方式。  
 <pre name="code" class="java">\s：用于匹配单个空格符，包括tab键和换行符；  
 \S：用于匹配除单个空格符之外的所有字符；  
 \d：用于匹配从0到9的数字；  
 \w：用于匹配字母，数字或下划线字符；  
 \W：用于匹配所有与\w不匹配的字符；  
 . ：用于匹配除换行符之外的所有字符。  
 </pre> 
 （说明：我们可以把\s和\S以及\w和\W看作互为逆运算）  
 下面，我们就通过实例看一下如何在正则表达式中使用上述元字符。  
 /\s+/ 上述正则表达式可以用于匹配目标对象中的一个或多个空格字符。  
 /\d000/　如果我们手中有一份复杂的财务报表，那么我们可以通过上述正则表达式轻而易举的查找到所有总额达千元的款项。  
 除了我们以上所介绍的元字符之外，正则表达式中还具有另外一种较为独特的专用字符，即定位符。定位符用于规定匹配模式在目标对象中的出现位置。 较为常用的定位符包括： “^”, “$”, “\b” 以及 “\B”。 
 <pre name="code" class="java">“^”定位符规定匹配模式必须出现在目标字符串的开头 
 “$”定位符规定匹配模式必须出现在目标对象的结尾 
 “\b”定位符规定匹配模式必须出现在目标字符串的开头或结尾的两个边界之一 
 “\B”定位符则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内， 
       即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾。 
 </pre> 
  同样，我们也可以把“^”和“$”以及“\b”和“\B”看作是互为逆运算的两组定位符。举例来说： /^hell/　因为上述正则表达式中包含“^”定位符，所以可以与目标对象中以 “hell”, “hello”或“hellhound”开头的字符串相匹配。 /ar$/　因为上述正则表达式中包含 “$”定位符，所以可以与目标对象中以 “car”, “bar”或 “ar” 结尾的字符串相匹配。 /\bbom/　因为上述正则表达式模式以 “\b”定位符开头，所以可以与目标对象中以 “bomb”, 或 “bom”开头的字符串相匹配。/man\b/　因为上述正则表达式模式以“\b”定位符结尾，所以可以与目标对象中以 “human”, “woman”或 “man”结尾的字符串相匹配。  
 为了能够方便用户更加灵活的设定匹配模式，正则表达式允许使用者在匹配模式中指定某一个范围而不局限于具体的字符。例如：  
 <pre name="code" class="java">/[A-Z]/　　上述正则表达式将会与从A到Z范围内任何一个大写字母相匹配。 
 /[a-z]/　　上述正则表达式将会与从a到z范围内任何一个小写字母相匹配。  
 /[0-9]/ 　上述正则表达式将会与从0到9范围内任何一个数字相匹配。  
 /([a-z][A-Z][0-9])+/　上述正则表达式将会与任何由字母和数字组成的字符串，如 “aB0” 等相匹配。 
 </pre> 
  这里需要提醒用户注意的一点就是可以在正则表达式中使用 “()” 把字符串组合在一起。“()”符号包含的内容必须同时出现在目标对象中。因此，上述正则表达式将无法与诸如 “abc”等的字符串匹配，因为“abc”中的最后一个字符为字母而非数字。  
 如果我们希望在正则表达式中实现类似编程逻辑中的“或”运算，在多个不同的模式中任选一个进行匹配的话，可以使用管道符 “|”。例如：/to|too|2/　上述正则表达式将会与目标对象中的 “to”, “too”, 或 “2” 相匹配。 
  正则表达式中还有一个较为常用的运算符，即否定符 “[^]”。与我们前文所介绍的定位符 “^” 不同，否定符 “[^]”规定目标对象中不能存在模式中所规定的字符串。例如：/[^A-C]/　上述字符串将会与目标对象中除A，B，和C之外的任何字符相匹配。一般来说，当“^”出现在 “[]”内时就被视做否定运算符；而当“^”位于“[]”之外，或没有“[]”时，则应当被视做定位符。 
 最后，当用户需要在正则表达式的模式中加入元字符，并查找其匹配对象时，可以使用转义符“\”。例如：/Th\*/ 　上述正则表达式将会与目标对象中的“Th*”而非“The”等相匹配。 
 在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先级顺序来求值。优先级如下： 
 <pre name="code" class="java">1．\ 转义符 
 2．(), (?:), (?=), [] 圆括号和方括号 
 3．*, +, ?, {n}, {n,}, {n,m} 限定符 
 4．^, $, \anymetacharacter 位置和顺序 
 5．|“或”操作 
 </pre> 
  
 <span style="font-size: 18pt;">使用实例</span>  
 在JavaScript 1.2中带有一个功能强大的RegExp()对象，可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象中是否包含匹配模式，并相应的返回true或false。 
 我们可以使用JavaScript编写以下脚本，验证用户输入的邮件地址的有效性。 
 <pre name="code" class="java"><html>  
 <head>  
 　 <script language="Javascript1.2">  
 　　　　 <!-- start hiding  
 　　　　 function verifyAddress(obj)  
 　　　　　{  
 　　　　　　var email = obj.email.value;  
 　　　　　　var pattern =  
 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;  
 　　　　　　flag = pattern.test(email);  
 　　　　　　if(flag)  
 　　　　　　{  
 　　　　　　　alert(“Your email address is correct!”);  
 　　　　　　　return true;  
 　　　　　　}  
 　　　　　　else  
 　　　　　　　{  
 　　　　　　　　alert(“Please try again!”);  
 　　　　　　　　return false;  
 　　　　　　　 }  
 　　　　　 }  
 　　　　 // stop hiding -->  
 　　　 </script>  
 　　</head>  
 　 <body>  
 　　 <form onSubmit="return verifyAddress(this);">  
 　　　 <input name="email" type="text">  
 　　　 <input type="submit">  
 　　　 </form>  
 　　</body>  
 </html>  
 </pre> 
  
 <span style="font-size: 18pt;">正则表达式对象</span> 
 本对象包含正则表达式模式以及表明如何应用模式的标志。 
 <pre name="code" class="java">语法 1 re = /pattern/[flags] 
 语法 2 re = new RegExp("pattern",["flags"])  
 </pre> 
 参数 
 re 
 必选项。将要赋值为正则表达式模式的变量名。  
  
 Pattern 
 必选项。要使用的正则表达式模式。如果使用语法 1，用 "/" 字符分隔模式。如果用语法 2，用引号将模式引起来。  
  
 Flags  
 可选项。如果使用语法 2 要用引号将 flag 引起来。标志可以组合使用，可用的有：  
 <pre name="code" class="java">g （全文查找出现的所有 pattern）  
 i （忽略大小写）  
 m （多行查找）  
 </pre> 
  
 <span style="font-size: 18pt;">示例</span> 
 下面的示例创建一个包含正则表达式模式及相关标志的对象(re)，向您演示正则表达式对象的用法。在本例中，作为结果的正则表达式对象又用于 match 方法中： 
 <pre name="code" class="java">function MatchDemo() 
 { 
 var r, re; // 声明变量。 
 var s = "The rain in Spain falls mainly in the plain"; 
 re = new RegExp("ain","g"); // 创建正则表达式对象。 
 r = s.match(re); // 在字符串 s 中查找匹配。 
 return(r);  
 } 
 </pre> 
  
 返回值： ain,ain,ain,ain\\ 
 属性 lastIndex 属性 | source 属性\\ 
 方法 compile 方法 | exec 方法 | test 方法\\ 
 要求 版本 3\\ 
 请参阅 RegExp 对象 | 正则表达式语法 | String 对象\\ 
  
 <span style="font-size: 18pt;">exec 方法</span> 
 用正则表达式模式在字符串中运行查找，并返回包含该查找结果的一个数组。 
 rgExp.exec(str) 
  
 参数 
  
 rgExp  
 必选项。包含正则表达式模式和可用标志的正则表达式对象。  
  
 str  
 必选项。要在其中执行查找的 String 对象或字符串文字。  
  
 说明\\ 
 如果 exec 方法没有找到匹配，则它返回 null。如果它找到匹配，则 exec 方法返回一个数组，并且更新全局 RegExp 对象的属性，以反映匹配结果。数组的0元素包含了完整的匹配，而第1到n元素中包含的是匹配中出现的任意一个子匹配。这相当于没有设置全局标志 (g) 的 match 方法。 
 如果为正则表达式设置了全局标志，exec 从以 lastIndex 的值指示的位置开始查找。如果没有设置全局标志，exec 忽略 lastIndex 的值，从字符串的起始位置开始搜索。 
  
 exec 方法返回的数组有三个属性，分别是 input、index 和 lastIndex。Input 属性包含了整个被查找的字符串。Index 属性中包含了整个被查找字符串中被匹配的子字符串的位置。LastIndex 属性中包含了匹配中最后一个字符的下一个位置。 
  
 示例\\ 
 下面的例子举例说明了 exec 方法的用法： 
 <pre name="code" class="java">function RegExpTest() 
 { 
 var ver = Number(ScriptEngineMajorVersion() + "." + ScriptEngineMinorVersion()) 
 if (ver >= 5.5){ // 测试 JScript 的版本。 
 var src = "The rain in Spain falls mainly in the plain."; 
 var re = /\w+/g; // 创建正则表达式模式。 
 var arr; 
 while ((arr = re.exec(src)) != null) 
 document.write(arr.index + "-" + arr.lastIndex + arr + "\t"); 
 } 
 else{ 
 alert("请使用 JScript 的更新版本"); 
 } 
 } 
 </pre> 
  
 返回值：0-3The 4-8rain 9-11in 12-17Spain 18-23falls 24-30mainly 31-33in 34-37the 38-43plain 
  
 test 方法\\ 
 返回一个 Boolean 值，它指出在被查找的字符串中是否存在模式。 
 rgexp.test(str)  
  
 参数\\ 
 rgexp 
 必选项。包含正则表达式模式或可用标志的正则表达式对象。  
  
 str  
 必选项。要在其上测试查找的字符串。  
  
 说明 
 test 方法检查在字符串中是否存在一个模式，如果存在则返回 true，否则就返回 false。 
 全局 RegExp 对象的属性不由 test 方法来修改。 
  
 示例 
 下面的例子举例说明了 test 方法的用法： 
 <pre name="code" class="java">function TestDemo(re, s) 
 { 
 var s1; // 声明变量。 
 // 检查字符串是否存在正则表达式。 
 if (re.test(s)) // 测试是否存在。 
 s1 = " contains "; // s 包含模式。 
 else 
 s1 = " does not contain "; // s 不包含模式。 
 return("'" + s + "'" + s1 + "'"+ re.source + "'"); // 返回字符串。 
 } 
 </pre> 
  
 函数调用：document.write (TestDemo(/ain+/ ,"The rain in Spain falls mainly in the plain.")); 
  
 返回值：'The rain in Spain falls mainly in the plain.' contains 'ain+' 
  
 <span style="font-size: 18pt;">match 方法</span> 
 使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。\\ 
 stringObj.match(rgExp)  
  
 参数\\ 
 stringObj  
 必选项。对其进行查找的 String 对象或字符串文字。  
  
 rgExp  
 必选项。为包含正则表达式模式和可用标志的正则表达式对象。也可以是包含正则表达式模式和可用标志的变量名或字符串文字。  
  
 说明\\ 
 如果 match 方法没有找到匹配，返回 null。如果找到匹配返回一个数组并且更新全局 RegExp 对象的属性以反映匹配结果。 
 match 方法返回的数组有三个属性：input、index 和 lastIndex。Input 属性包含整个的被查找字符串。Index 属性包含了在整个被查找字符串中匹配的子字符串的位置。LastIndex 属性包含了最后一次匹配中最后一个字符的下一个位置。 
 如果没有设置全局标志 (g)，数组的 0 元素包含整个匹配，而第 1 到 n 元素包含了匹配中曾出现过的任一个子匹配。这相当于没有设置全局标志的 exec 方法。如果设置了全局标志，元素 0 到 n 中包含所有匹配。 
  
 示例\\ 
 下面的示例演示了match 方法的用法： 
 <pre name="code" class="java">function MatchDemo() 
 { 
 var r, re; // 声明变量。 
 var s = "The rain in Spain falls mainly in the plain"; 
 re = /ain/i; // 创建正则表达式模式。 
 r = s.match(re); // 尝试匹配搜索字符串。 
 return(r); // 返回第一次出现 "ain" 的地方。 
 } 
 </pre> 
 返回值：ain 
  
 本示例说明带 g 标志设置的 match 方法的用法。 
 <pre name="code" class="java">function MatchDemo() 
 { 
 var r, re; // 声明变量。 
 var s = "The rain in Spain falls mainly in the plain"; 
 re = /ain/ig; // 创建正则表达式模式。 
 r = s.match(re); // 尝试去匹配搜索字符串。 
 return(r); // 返回的数组包含了所有 "ain"  
 // 出现的四个匹配。 
 } 
 </pre> 
 返回值：ain,ain,ain,ain 
  
 上面几行代码演示了字符串文字的 match 方法的用法。 
 <pre name="code" class="java">var r, re = "Spain"; 
 r = "The rain in Spain".replace(re, "Canada"); 
 return r; 
 </pre> 
 返回值：The rain in Canada 
  
 <span style="font-size: 18pt;">search 方法</span> 
 返回与正则表达式查找内容匹配的第一个子字符串的位置。 
  
 stringObj.search(rgExp) 
  
 参数\\ 
 stringObj  
 必选项。要在其上进行查找的 String 对象或字符串文字。  
  
 rgExp  
 必选项。包含正则表达式模式和可用标志的正则表达式对象。  
  
 说明 
  
 search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。 
  
 示例\\ 
 下面的示例演示了 search 方法的用法。 
 <pre name="code" class="java">function SearchDemo() 
 { 
 var r, re; // 声明变量。 
 var s = "The rain in Spain falls mainly in the plain."; 
 re = /falls/i; // 创建正则表达式模式。 
 r = s.search(re); // 查找字符串。 
 return(r); // 返回 Boolean 结果。 
 } 
 </pre> 
 返回值：18 
  
  
 <span style="font-size: 18pt;">正则表达式语法</span> 
 一个正则表达式就是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。 
  
 这里有一些可能会遇到的正则表达式示例： 
 <pre name="code" class="java">JScript VBScript 匹配  
 /^\[ \t]*$/ "^\[ \t]*$" 匹配一个空白行。  
 /\d{2}-\d{5}/ "\d{2}-\d{5}" 验证一个ID 号码是否由一个2位数字，一个连字符以及一个5位数字组成。  
 /<(.*)>.*<\/\1>/ "<(.*)>.*<\/\1>" 匹配一个 HTML 标记。  
 </pre> 
  
 下表是元字符及其在正则表达式上下文中的行为的一个完整列表： 
  
 字符 描述  
 \ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 后向引用、或一个八进制转义符。例如，'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。  
  
 ^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性，^ 也匹配 '\n' 或 '\r' 之后的位置。  
  
 $ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性，$ 也匹配 '\n' 或 '\r' 之前的位置。  
  
 * 匹配前面的子表达式零次或多次。例如，zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。  
  
 + 匹配前面的子表达式一次或多次。例如，'zo+' 能匹配 "zo" 以及 "zoo"，但不能匹配 "z"。+ 等价于 {1,}。  
  
 ? 匹配前面的子表达式零次或一次。例如，"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。  
  
 {n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。  
  
 {n,} n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。  
  
 {n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。刘， "o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。  
  
 ? 当该字符紧跟在任何一个其他限制符 (*, +, ?, {n}, {n,}, {n,m}) 后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串 "oooo"，'o+?' 将匹配单个 "o"，而 'o+' 将匹配所有 'o'。  
  
 . 匹配除 "\n" 之外的任何单个字符。要匹配包括 '\n' 在内的任何字符，请使用象 '[.\n]' 的模式。  
 (pattern) 匹配pattern 并获取这一匹配。所获取的匹配可以从产生的 Matches 集合得到，在VBScript 中使用 SubMatches 集合，在JScript 中则使用 $0…$9 属性。要匹配圆括号字符，请使用 '\(' 或 '\)'。  
  
 (?:pattern) 匹配 pattern 但不获取匹配结果，也就是说这是一个非获取匹配，不进行存储供以后使用。这在使用 "或" 字符 (|) 来组合一个模式的各个部分是很有用。例如， 'industr(?:y|ies) 就是一个比 'industry|industries' 更简略的表达式。  
  
 (?=pattern) 正向预查，在任何匹配 pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如， 'Windows (?=95|98|NT|2000)' 能匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始。  
  
  (?!pattern) 负向预查，在任何不匹配 Negative lookahead matches the search string at any point where a string not matching pattern 的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。例如'Windows (?!95|98|NT|2000)' 能匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"。预查不消耗字符，也就是说，在一个匹配发生后，在最后一次匹配之后立即开始下一次匹配的搜索，而不是从包含预查的字符之后开始  
  
 x|y 匹配 x 或 y。例如，'z|food' 能匹配 "z" 或 "food"。'(z|f)ood' 则匹配 "zood" 或 "food"。  
  
 [xyz] 字符集合。匹配所包含的任意一个字符。例如， '[abc]' 可以匹配 "plain" 中的 'a'。  
  
 [^xyz] 负值字符集合。匹配未包含的任意字符。例如， '[^abc]' 可以匹配 "plain" 中的'p'。  
  
 [a-z] 字符范围。匹配指定范围内的任意字符。例如，'[a-z]' 可以匹配 'a' 到 'z' 范围内的任意小写字母字符。  
  
 [^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。例如，'[^a-z]' 可以匹配任何不在 'a' 到 'z' 范围内的任意字符。  
  
 \b 匹配一个单词边界，也就是指单词和空格间的位置。例如， 'er\b' 可以匹配"never" 中的 'er'，但不能匹配 "verb" 中的 'er'。  
  
 \B 匹配非单词边界。'er\B' 能匹配 "verb" 中的 'er'，但不能匹配 "never" 中的 'er'。  
  
 \cx 匹配由x指明的控制字符。例如， \cM 匹配一个 Control-M 或回车符。 x 的值必须为 A-Z 或 a-z 之一。否则，将 c 视为一个原义的 'c' 字符。  
  
 \d 匹配一个数字字符。等价于 [0-9]。  
  
 \D 匹配一个非数字字符。等价于 [^0-9]。  
  
 \f 匹配一个换页符。等价于 \x0c 和 \cL。  
  
 \n 匹配一个换行符。等价于 \x0a 和 \cJ。  
  
 \r 匹配一个回车符。等价于 \x0d 和 \cM。  
  
 \s 匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。  
  
 \S 匹配任何非空白字符。等价于 [^ \f\n\r\t\v]。  
  
 \t 匹配一个制表符。等价于 \x09 和 \cI。  
  
 \v 匹配一个垂直制表符。等价于 \x0b 和 \cK。  
  
 \w 匹配包括下划线的任何单词字符。等价于'[A-Za-z0-9_]'。  
  
 \W 匹配任何非单词字符。等价于 '[^A-Za-z0-9_]'。  
  
 \xn 匹配 n，其中 n 为十六进制转义值。十六进制转义值必须为确定的两个数字长。例如， '\x41' 匹配 "A"。'\x041' 则等价于 '\x04' & "1"。正则表达式中可以使用 ASCII 编码。.  
  
 \num 匹配 num，其中 num 是一个正整数。对所获取的匹配的引用。例如，'(.)\1' 匹配两个连续的相同字符。  
  
 \n 标识一个八进制转义值或一个后向引用。如果 \n 之前至少 n 个获取的子表达式，则 n 为后向引用。否则，如果 n 为八进制数字 (0-7)，则 n 为一个八进制转义值。  
  
 \nm 标识一个八进制转义值或一个后向引用。如果 \nm 之前至少有is preceded by at least nm 个获取得子表达式，则 nm 为后向引用。如果 \nm 之前至少有 n 个获取，则 n 为一个后跟文字 m 的后向引用。如果前面的条件都不满足，若 n 和 m 均为八进制数字 (0-7)，则 \nm 将匹配八进制转义值 nm。  
  
 \nml 如果 n 为八进制数字 (0-3)，且 m 和 l 均为八进制数字 (0-7)，则匹配八进制转义值 nml。  
  
 \un 匹配 n，其中 n 是一个用四个十六进制数字表示的 Unicode 字符。例如， \u00A9 匹配版权符号 (?)。  
  
  
 <span style="font-size: 18pt;">优先权顺序</span> 
 在构造正则表达式之后，就可以象数学表达式一样来求值，也就是说，可以从左至右并按照一个优先权顺序来求值。  
  
 下表从最高优先级到最低优先级列出各种正则表达式操作符的优先权顺序： 
 <pre name="code" class="java">操作符 描述  
 \ 转义符  
 (), (?:), (?=), [] 圆括号和方括号  
 *, +, ?, {n}, {n,}, {n,m} 限定符  
 ^, $, \anymetacharacter 位置和顺序  
 | “或”操作  
 </pre> 
  
 普通字符 
  
 普通字符由所有那些未显式指定为元字符的打印和非打印字符组成。这包括所有的大写和小写字母字符，所有数字，所有标点符号以及一些符号。  
  
 最简单的正则表达式是一个单独的普通字符，可以匹配所搜索字符串中的该字符本身。例如，单字符模式 'A' 可以匹配所搜索字符串中任何位置出现的字母 'A'。这里有一些单字符正则表达式模式的示例： 
 <pre name="code" class="java">/a/ 
 /7/ 
 /M/ 
 </pre> 
 等价的 VBScript 单字符正则表达式为： 
 <pre name="code" class="java">"a" 
 "7" 
 "M" 
 </pre> 
 可以将多个单字符组合在一起得到一个较大的表达式。例如，下面的 JScript 正则表达式不是别的，就是通过组合单字符表达式 'a'、'7'以及 'M' 所创建出来的一个表达式。  
  
 /a7M/ 
 等价的 VBScript 表达式为： 
  
 "a7M" 
 请注意这里没有连接操作符。所需要做的就是将一个字符放在了另一个字符后面。 
  
  

随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种 解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的 很多测试来谈谈自己的经验，希望能帮助大家改进自己的JavaScript脚本性能。

语言层次方面

循环

循环是很常用的一个控制结构，大部分东西要依靠它来完成，在JavaScript中，我们可以使用for(;;),while(),for(in)三种循环，事实上，这三种循环中for(in)的效率极差，因为他需要查询散列键，只要可以就应该尽量少用。for(;;)和while循环的性能应该说基本（平时使用时）等价。

而事实上，如何使用这两个循环，则有很大讲究。我在测试中有些很有意思的情况，见附录。最后得出的结论是：

• 如果是循环变量递增或递减，不要单独对循环变量赋值，应该在它最后一次读取的时候使用嵌套的++或--操作符。

• 如果要与数组的长度作比较，应该事先把数组的length属性放入一个局部变量中，减少查询次数。

举例，假设arr是一个数组，最佳的遍历元素方式为：

for(var i=0, len = arr.length;i<len;i++){...}

或者，如果无所谓顺序的话：

for(var i=arr.length;i>0;i--){...}

局部变量和全局变量

局部变量的速度要比全局变量的访问速度更快，因为全局变量其实是全局对象的成员，而局部变量是放在函数的栈当中的。

不使用Eval

使用eval相当于在运行时再次调用解释引擎对内容进行运行，需要消耗大量时间。这时候使用JavaScript所支持的闭包可以实现函数模版（关于闭包的内容请参考函数式编程的有关内容）

减少对象查找

因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

这一点可以和循环结合起来，因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var
len=a.length，则就少了一次查询。

字符串连接

如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。

如果要连接多个字符串，应该少使用+=，如

s+=a;

s+=b;

s+=c;

应该写成

s+=a + b + c；

而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下

var buf = new Array();

for(var i = 0; i < 100; i++){

buf.push(i.toString());

}

var all = buf.join("");

类型转换

类型转换是大家常犯的错误，因为JavaScript是动态类型语言，你不能指定变量的类型。

1.
把数字转换成字符串，应用"" + 1，虽然看起来比较丑一点，但事实上这个效率是最高的，性能上来说：

("" + ) > String() > .toString() > new String()

这条其实和下面的“直接量”有点类似，尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。

String()属于内部函数，所以速度很快，而.toString()要查询原型中的函数，所以速度逊色一些，new String()用于返回一个精确的副本。

2.
浮点数转换成整型，这个更容易出错，很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。

另外，和第二节的对象查找中的问题不一样，Math是内部对象，所以Math.floor()其实并没有多少查询方法和调用的时间，速度是最快的。

3.
对于自定义的对象，如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高

使用直接量

其实这个影响倒比较小，可以忽略。什么叫使用直接量，比如，JavaScript支持使用[param,param,param,...]来直接表达一个数组，以往我们都使用new Array(param,param,...)，使用前者是引擎直接解释的，后者要调用一个Array内部构造器，所以要略微快一点点。

同样，var foo = {}的方式也比var foo = new Object();快，var reg = /../;要比var reg=new RegExp()快。

字符串遍历操作

对字符串进行循环操作，譬如替换、查找，应使用正则表达式，因为本身JavaScript的循环速度就比较慢，而正则表达式的操作是用C写成的语言的API，性能很好。

高级对象

自定义高级对象和Date、RegExp对象在构造时都会消耗大量时间。如果可以复用，应采用缓存的方式。

DOM相关

插入HTML

很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低，如果需要直接插入HTML，可以找一个容器元素，比如指定一个div或者span，并设置他们的innerHTML来将自己的HTML代码插入到页面中。

对象查询

使用[""]查询要比.items()更快，这和前面的减少对象查找的思路是一样的，调用.items()增加了一次查询和函数的调用。

创建DOM节点

通常我们可能会使用字符串直接写HTML来创建节点，其实这样做

1. 无法保证代码的有效性

2. 字符串操作效率低

所以应该是用document.createElement()方法，而如果文档中存在现成的样板节点，应该是用cloneNode()方法，因为使用createElement()方法之后，你需要设置多次元素的属性，使用cloneNode()则可以减少属性的设置次数——同样如果需要创建很多元素，应该先准备一个样板节点。

定时器

如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval。setTimeout每次要重新设置一个定时器。

其他

脚本引擎

据我测试Microsoft的JScript的效率较Mozilla的Spidermonkey要差很多，无论是执行速度还是内存管理上，因为JScript现在基本也不更新了。但SpiderMonkey不能使用ActiveXObject

文件优化

文件优化也是一个很有效的手段，删除所有的空格和注释，把代码放入一行内，可以加快下载的速度，注意，是下载的速度而不是解析的速度，如果是本地，注释和空格并不会影响解释和执行速度。

总结

本文总结了我在JavaScript编程中所找到的提高JavaScript运行性能的一些方法，其实这些经验都基于几条原则：

1. 直接拿手头现成的东西比较快，如局部变量比全局变量快，直接量比运行时构造对象快等等。

2. 尽可能少地减少执行次数，比如先缓存需要多次查询的。

3. 尽可能使用语言内置的功能，比如串链接。

4. 尽可能使用系统提供的API，因为这些API是编译好的二进制代码，执行效率很高

同时，一些基本的算法上的优化，同样可以用在JavaScript中，比如运算结构的调整，这里就不再赘述了。但是由于JavaScript是解释型的，一般不会在运行时对字节码进行优化，所以这些优化仍然是很重要的。

当然，其实这里的一些技巧同样使用在其他的一些解释型语言中，大家也可以进行参考。

参考

• http://www.umsu.de/jsperf/ 各种浏览器的测试对比

• http://home.earthlink.net/~kendrasg/info/js_opt/

附录1

由于是以前做过的测试，测试代码已经不全，我补充了一部分如下：

var print;



if(typeof document != "undefined" ){

print = function(){

document.write(arguments[0]);

}

}else if(typeof WScript != "undefined" ){

print = function(){

WScript.Echo(arguments[0],arguments[1],arguments[2]);

}

}



function empty(){

}



function benchmark(f){

var i = 0;

var start = (new Date()).getTime();



while(i < pressure){

f(i++);

}

var end = (new Date()).getTime();

WScript.Echo(end-start);

}



/*

i=0

start = (new Date()).getTime();

while(i < 60000){

c = [i,i,i,i,i,i,i,i,i,i];

i++;

}

end = (new Date()).getTime();

WScript.Echo(end-start);

i=0

start = (new Date()).getTime();

while(i < 60000){

c = new Array(i,i,i,i,i,i,i,i,i,i);

i++;

}

var end = (new Date()).getTime();

WScript.Echo(end-start);

*/



function internCast(i){

return "" + i;

}



function StringCast(i){

return String(i)

}

function newStringCast(i){

return new String(i)

}

function toStringCast(i){

return i.toString();

}

function ParseInt(){

return parseInt(j);

}

function MathFloor(){

return Math.floor(j);

}

function Floor(){

return floor(j);

}

var pressure = 50000;

var a  = "";

var floor = Math.floor;

j = 123.123;

print("-------------\nString Conversion Test");

print("The empty:", benchmark(empty));

print("intern:", benchmark(internCast));

print("String:");

benchmark(StringCast);

print("new String:");

benchmark(newStringCast);

print("toString:");

benchmark(toStringCast);

print("-------------\nFloat to Int Conversion Test");

print("parseInt");

benchmark(ParseInt);

print("Math.floor");

benchmark(MathFloor);

print("floor")

benchmark(Floor);



function newObject(){

return new Object();

}



function internObject(){

return {};

}

print("------------\nliteral Test");

print("runtime new object", benchmark(newObject));

print("literal object", benchmark(internObject));

附录2

代码1：

    for(var i=0;i<100;i++){

arr[i]=0;

}

代码2：

    var i = 0;

while(i < 100){

arr[i++]=0;

}

代码3：

    var i = 0;

while(i < 100){

arr[i]=0;

i++;

}

在firefox下测试这两段代码，结果是代码2优于代码1和3，而代码1一般优于代码3，有时会被代码3超过；而在IE
6.0下，测试压力较大的时候（如测试10000次以上）代码2和3则有时候优于代码1，有时候就会远远落后代码1，而在测试压力较小（如5000次），则代码2>代码3>代码1。

代码4：

    var i = 0;

var a;

while(i < 100){

a = 0;

i++;

}

代码5：

    var a;

for(var i=0;i<100;i++){

a = 0;

}

上面两段代码在Firefox和IE下测试结果都是性能接近的。

代码6：

    var a;

var i=0;

while(i<100){

a=i;

i++;

}

代码7：

    var a;

var i=0;

while(i<100){

a=i++;

}

代码8：

    var a;

for(var i=0;i<100;i++){

a = i;

}

代码9：

    var a;

for(var i=0;i<100;){

a = i++;

}

这四段代码在Firefox下6和8的性能接近，7和9的性能接近，而6,
8 < 7, 9；

最后我们来看一下空循环

代码10：

    for(var i=0;i<100;i++){   }

代码11：

    var i;

while(i<100){        i++;    }

最后的测试出现了神奇的结果，Firefox下代码10所花的时间与代码11所花的大约是24:1。所以它不具备参考价值，于是我没有放在一开始给大家看。

在调用自这自定义的JS函数时,如果我们使用<a href="#" onclick="method;">click</a>时,虽然方法可以执行，但是如果页面含有滚动条，会自动滚动到页面的顶端，如 果这个时候我们使用<a href="javascript:void(0); onclick="method;">click</a>，执行时，页面将不会发生滚动，这个对于图片切换、AJAX调用 应该非常有用

(注：在看到大家如此关注JS里头的这几个对象，我试着把原文再修改一下，力求能再详细的阐明个中意义  2007-05-21）
在提到上述的概念之前，首先想说说javascript中函数的隐含参数：arguments

Arguments

该对象代表正在执行的函数和调用它的函数的参数。

[function.]arguments[n]

参数

function ：选项。当前正在执行的 Function 对象的名字。 

n ：选项。要传递给 Function 对象的从0开始的参数值索引。 

说明

Arguments是进行函数调用时，除了指定的参数外，还另外创建的一个隐藏对象。Arguments是一个类似数组但不是数组的对象，说它类似数组是因为其具有数组一样的访问性质及方式，可以由arguments[n]来访问对应的单个参数的值，并拥有数组长度属性length。还有就是arguments对象存储的是实际传递给函数的参数，而不局限于函数声明所定义的参数列表，而且不能显式创建 arguments 对象。arguments 对象只有函数开始时才可用。下边例子详细说明了这些性质:

在此添加了一个说明arguments不是数组(Array类)的代码:

运行代码你会发现第一个alert显示1，这表示数组对象拥有selfvalue属性，值为1，而当你调用函数testAguments时，你会发现显示的是“undefined”，说明了不是arguments的属性，即arguments并不是一个数组对象。
在此附加上大家推荐的一个简单方法：

alert(arguments instanceof Array);
alert(arguments instanceof Object);

 caller
  返回一个对函数的引用，该函数调用了当前函数。
  functionName.caller
  functionName 对象是所执行函数的名称。
说明
对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和 functionName.toString 一样，也就是说，显示的是函数的反编译文本。
下面的例子说明了 caller 属性的用法：

callee

    返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。

[function.]arguments.callee

可选项 function 参数是当前正在执行的 Function 对象的名称。

说明

callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名
函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性
仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候
用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是
形参长度，由此可以判断调用时形参长度是否和实参长度一致。

示例

比较一般的递归函数：

调用时：alert(sum(100));
其中函数内部包含了对sum自身的引用，函数名仅仅是一个变量名，在函数内部调用sum即相当于调用
一个全局变量，不能很好的体现出是调用自身，这时使用callee会是一个比较好的方法。

apply and call

   它们的作用都是将函数绑定到另外一个对象上去运行，两者仅在定义参数方式有所区别：

    apply(thisArg,argArray);

    call(thisArg[,arg1,arg2…] ]);

即所有函数内部的this指针都会被赋值为thisArg，这可实现将函数作为另外一个对象的方法运行的目的

apply的说明

如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisArg任何一个参数，那么 Global 对象将被用作 thisArg，
并且无法被传递任何参数。

call的说明

call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg指定的新对象。
如果没有提供 thisArg参数，那么 Global 对象被用作 thisArg

相关技巧：

应用call和apply还有一个技巧在里面，就是用call和apply应用另一个函数（类）以后，当前的
函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。看下面示例:

上面的例子可以看出，通过call之后，extend可以继承到base的方法和属性。

顺便提一下，在javascript框架prototype里就使用apply来创建一个定义类的模式，

其实现代码如下：

解析：从代码看,该对象仅包含一个方法：Create，其返回一个函数，即类。但这也同时是类的
构造函数，其中调用initialize，而这个方法是在类创建时定义的初始化函数。通过如此途径，
就可以实现prototype中的类创建模式

示例：

更详细的关于prototype信息请到其官方网站查看。

评论还有更精彩对此的理解，在这我就不再添加了，大家可以看看加深理解。


 集合类对象问题
现有代码中存在许多 document.form.item("itemName") 这样的语句，不能在 FF 下运行
解决方法：
改用 document.form.elements["elementName"]
说明:IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

window.event
现有问题：
使用 window.event 无法在 FF 上运行
解决方法：
FF 的 event 只能在事件发生的现场使用，此问题暂无法解决。可以这样变通：
原代码(可在IE中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit()"/>
<script language="javascript">
    function gotoSubmit() {
       alert(window.event);    // use window.event
    }
</script>
新代码(可在IE和FF中运行)：
<input type="button" name="someButton" value="提交" onclick="javascript:gotoSubmit(event)"/>
<script language="javascript">
   function gotoSubmit(e) {
      e = e? e : (window.event ? window.event : null);
      alert(e);           
  }
</script>
此外，如果新代码中第一行不改，与老代码一样的话（即 gotoSubmit 调用没有给参数），则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。

HTML 对象的 id 作为对象名的问题
现有问题：
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 FF 中不能。
解决方法：
用 getElementById("idName") 代替 idName 作为对象变量使用。

用idName字符串取得对象的问题
现有问题：
在IE中，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象，在FF 中不能。
解决方法：
用 getElementById(idName) 代替 eval(idName)。

变量名与某 HTML 对象 id 相同的问题
现有问题：
在 FF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能。
解决方法：
在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

event.x 与 event.y 问题
现有问题：
在IE 中，event 对象有 x, y 属性，FF中没有。
解决方法：
在FF中，与event.x 等效的是 event.pageX。但event.pageX IE中没有。
故采用 event.clientX 代替 event.x。在IE 中也有这个变量。
event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。
如果要完全一样，可以稍麻烦些：
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
其它：
event.layerX 在 IE 与 FF 中都有，具体意义有无差别尚未试验。

关于frame
现有问题：
在 IE中 可以用window.testFrame取得该frame，FF中不行
解决方法：
在frame的使用方面FF和ie的最主要的区别是：
如果在frame标签中书写了以下属性：
<frame src="/xx.htm" id="frameId" name="frameName" />
那么ie可以通过id或者name访问这个frame对应的window对象
而FF只可以通过name来访问这个frame对应的window对象
例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问
IE： window.top.frameId或者window.top.frameName来访问这个window对象
FF： 只能这样window.top.frameName来访问这个window对象
另外，在FF和ie中都可以使用window.top.document.getElementById("frameId")来访问frame标签
并且可以通过window.top.document.getElementById("testFrame").src = 'xx.htm'来切换frame的内容
也都可以通过window.top.frameName.location = 'xx.htm'来切换frame的内容

父结点的问题
在FF中没有 parentElement parentElement.children  而用 parentNode parentNode.childNodes
childNodes的下标的含义在IE和FF中不同，FF使用DOM规范，childNodes中会插入空白文本节点。
一般可以通过node.getElementsByTagName()来回避这个问题。当html中节点缺失时，IE和FF对parentNode的解释不同，例如
<form>
<table>
  <input/>
</table>
</form>
FF中input.parentNode的值为form, 而IE中input.parentNode的值为空节点
FF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

const 问题
现有问题：
在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
解决方法：
不使用 const ，以 var 代替。

body 对象
FF的body在body标签没有被浏览器完全读入之前就存在，而IE则必须在body完全被读入之后才存在

URLencoding
在js中如果书写url就直接写&不要写&例如var url = 'xx.jsp?objectName=xx&objectEvent=xxx';
frm.action = url那么很有可能url不会被正常显示以至于参数没有正确的传到服务器
一般会服务器报错参数没有找到
当然如果是在tpl中例外，因为tpl中符合xml规范，要求&书写为&
一般FF无法识别js中的&

nodeName 和 tagName 问题
现有问题：
在FF中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值。在 IE 中，nodeName 的使用好象有问题
解决方法：
使用 tagName，但应检测其是否为空。

元素属性
IE下 input.type属性为只读，但是FF下可以修改
document.getElementsByName() 和 document.all[name] 的问题
在 IE 中，getElementsByName()、document.all[name] 均不能用来取得多个具有相同name的div 元素集合。

兼容firefox的 outerHTML，FF中没有outerHtml的方法

if (window.HTMLElement) {
  HTMLElement.prototype.__defineSetter__("outerHTML",function(sHTML) {
        var r=this.ownerDocument.createRange();
        r.setStartBefore(this);
        var df=r.createContextualFragment(sHTML);
        this.parentNode.replaceChild(df,this);
        return sHTML;
    });

    HTMLElement.prototype.__defineGetter__("outerHTML",function() {
        var attr;
        var attrs=this.attributes;
        var str="<"+this.tagName.toLowerCase();
        for (var i=0;i<attrs.length;i++) {
            attr=attrs[i];
            if(attr.specified)
                str+=" "+attr.name+'="'+attr.value+'"';
        }

        if(!this.canHaveChildren)
            return str+">";
        return str+">"+this.innerHTML+"</"+this.tagName.toLowerCase()+">";
        });

   HTMLElement.prototype.__defineGetter__("canHaveChildren",function() {
     switch(this.tagName.toLowerCase()) {
         case "area":
         case "base":
         case "basefont":
         case "col":
         case "frame":
         case "hr":
         case "img":
         case "br":
         case "input":
         case "isindex":
         case "link":
         case "meta":
         case "param":
         return false;
     }
     return true;
   });
}

自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;FF下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

 
event.srcElement问题
说明:IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.

window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.

模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口
如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";

事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
FF：document.body.onload = inject();
如果要加传递参数，可以做个闭包
(function(arg){

   document.body.onload=function(){inject(arg);};

})(arg)

innerText在IE中能正常工作，但是innerText在FireFox中却不行.
解决方法:
if(navigator.appName.indexOf("Explorer") > -1){
    document.getElementById('element').innerText = "my text";
} else{
    document.getElementById('element').textContent = "my text";
}

FF中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';

IE,FF以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);

样式部分
-----------------------------------------------------------------------------------------------------------
cursor:hand VS cursor:pointer
FF不支持hand，但ie支持pointer
解决方法: 统一使用pointer

padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,
必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

消除ulol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效

CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF：opacity:0.6

CSS圆角
IE：不支持圆角
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius- bottomright:4px;

CSS双线凹凸边框
IE：border:2px outset;
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。

让我们看看之前的文章：JavaScript的9个陷阱及评点，在第 9 点 Focus Pocus 中提到的问题。原作者对这个认识有所偏差，其实不只是 IE 的问题，而是现有 JavaScript 引擎对于线程实现的问题（关于线程，我的概念其实不多，如果不对，希望读者多多指教）。我们通过一个关于settimeout的例子来说明，请访问 http://realazy.org/lab/settimeout.html. 我们来看 1 和 2。如果你能看看源代码，会发现我们的任务很简单，就是给文档增加一个 input 文本框，并聚焦和选中。请现在分别点击一下，可以看到，1 并没有能够聚焦和选中，而 2 可以。它们之间的区别在于，在执行：

input.focus();
input.select();

setTimeout(function(){
input.focus();
input.select();
}, 0);

按照 JavaScript: The Definitive Guide 5th 的 14.1 所说：

在实践中，setTimeout 会在其完成当前任何延宕事件的事件处理器的执行，以及完成文档当前状态更新后，告诉浏览器去启用 setTimeout 内注册的函数。

其实，这是一个把需要执行的任务从队列中跳脱的技巧。回到前面的例子，JavaScript 引擎在执行 onkeypress 时，由于没有多线程的同步执行，不可能同时去处理刚创建元素的 focus 和 select 事件，由于这两个事件都不在队列中，在完成 onkeypress 后，JavaScript 引擎已经丢弃了这两个事件，正如你看到的例子 1 的情况。而在例子 2 中，由于setTimeout可以把任务从某个队列中跳脱成为新队列，因而能够得到期望的结果。

这才是延迟事件为 0 的setTimeout的真正目的。在此，你可以看看例子 3，它的任务是实时更新输入的文本，现在请试试，你会发现预览区域总是落后一拍，比如你输 a, 预览区并没有出现 a, 在紧接输入 b 时， a 才不慌不忙地出现。其实我们是有办法让预览区跟输入框同步地，在此我没有给出答案，因为上面所说的，就是解决思路，try it yourself!

以下是JavaScript容易犯错的九个陷阱，来自 Nine Javascript Gotchas 。虽然不是什么很高深的技术问题，但注意一下，会使您的编程轻松些，即所谓make life easier. 笔者对某些陷阱会混杂一些评点。

1.最后一个逗号

如这段代码，注意最后一个逗号，按语言学角度来说应该是不错的（python的类似数据类型辞典dictionary就允许如此）。IE会报语法错误，但语焉不详，你只能用人眼从几千行代码中扫描。

<script>
var theObj = {
city : "Boston",
state : "MA",
}
</script>

2.this的引用会改变

如这段代码：

<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
this.alertMessage = "Javascript rules";
this.ClickHandler = function() {
alert(this.alertMessage );
}
}();
document.getElementById(”theText”).onclick =  MyObject.ClickHandler
</script>

并不如你所愿，答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时，代码中红色这行，this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决：

<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
var self = this;
this.alertMessage = “Javascript rules”;
this.OnClick = function() {
alert(self.value);
}
}();
document.getElementById(”theText”).onclick =  MyObject.OnClick
</script>

实质上，这就是JavaScript作用域的问题。如果你看过，你会发现解决方案不止一种。

3.标识盗贼

在JavaScript中不要使用跟HTML的id一样的变量名。如下代码：

<input type="button" id="TheButton">
<script>
TheButton = get("TheButton");
</script>

IE会报对象未定义的错误。我只能说：IE sucks.

4.字符串只替换第一个匹配

如下代码：

<script>
var fileName = "This is a title".replace(" ","_");
</script>

而实际上，结果是”This_is a title“. 在JavaScript中，String.replace的第一个参数应该是正则表达式。所以，正确的做法是这样：

var fileName = "This is a title".replace(/ /g,"_");

5.mouseout意味着mousein

事实上，这是由于事件冒泡导致的。IE中有mouseenter和mouseleave，但不是标准的。作者在此建议大家使用库比如YUI来解决问题。

6.parseInt是基于进制体系的

这个是常识，可是很多人给忽略了parseInt还有第二个参数，用以指明进制。比如，parseInt("09")，如果你认为答案是9，那就错 了。因为，在此，字符串以0开头，parseInt以八进制来处理它，在八进制中，09是非法，返回false，布尔值false转化成数值就是0. 因此，正确的做法是parseInt("09", 10).

7.for...in...会遍历所有的东西

有一段这样的代码：

var arr = [5,10,15]
var total = 1;
for ( var x in arr) {
total = total * arr[x];
}

运行得好好的，不是吗？但是有一天它不干了，给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype，这样，我们的arr平白无过多出了一个属性（方法），而 for...in...会把它给遍历出来。所以这样做才是比较安全的：

for ( var x = 0; x < arr.length; x++) {
total = total * arr[x];
}

其实，这也是污染基本类的prototype会带来危害的一个例证。

8.事件处理器的陷阱

这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码，这会复写掉之前的window.onclick事件，还可能导致IE的内容泄露（sucks again）。在IE还没有支持DOM 2的事件注册之前，作者建议使用库来解决问题，比如使用YUI:

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

这应该也属于常识问题，但新手可能容易犯错。

9.Focus Pocus

新建一个input文本元素，然后把焦点挪到它上面，按理说，这样的代码应该很自然：

var newInput = document.createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select();

但是IE会报错（sucks again and again）。理由可能是当你执行fouce()的时候，元素尚未可用。因此，我们可以延迟执行：

var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput);
setTimeout(function(){ //这里我使用闭包改写过，若有兴趣可以对比原文
document.getElementById('TheNewInput').focus();
document.getElementById('TheNewInput').select();}, 10);

在实践中，JavaScript的陷阱还有很多很多，大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现，只能靠开发者之间的经验分享。谢天谢地，我们生活在网络时代，很多碰到的问题，一般都可以在Google中找到答案。

JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。

先来看看JS手册中对call的解释：

说明白一点其实就是更改对象的内部指针，即改变对象的this指向的内容。这在面向对象的js编程过程中有时是很有用的。

引用网上一个代码段，运行后自然就明白其道理。