简单生活 -- Kevin Yang的博客 » Web传统技术 http://www.imkevinyang.com It's all about sharing Sun, 05 Feb 2012 15:37:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 几个有趣的Javascript Hack http://www.imkevinyang.com/2010/07/%e5%87%a0%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84javascript-hack.html http://www.imkevinyang.com/2010/07/%e5%87%a0%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84javascript-hack.html#comments Fri, 23 Jul 2010 12:06:48 +0000 Kevin Yang http://www.imkevinyang.com/2010/07/%e5%87%a0%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84javascript-hack.html 在网上看到几个有意思的Javascript代码，和大家分享一下。

1. 直接在浏览器中编辑网页内容

javascript:document.body.contentEditable='true';void(0);

访问任意网站，在地址栏输入以上代码，会发生当前网页已经变成编辑模式了。将上述代码中的true改…

]]> 在网上看到几个有意思的Javascript代码，和大家分享一下。

1. 直接在浏览器中编辑网页内容

javascript:document.body.contentEditable='true';void(0);

访问任意网站，在地址栏输入以上代码，会发生当前网页已经变成编辑模式了。将上述代码中的true改成false重新执行一遍即可恢复。

在浏览器中编辑网页内容

 

2. 舞动的图片

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

这段js代码可能很多人已经见识过了。他的作用就是让网页上的图片飞舞起来。

舞动的图片

 

3. 密码框密文变明文

javascript:(function(){var s,F,j,f,i;s="";F=document.forms;for(j=0;j<F.length;++j){f=F[j];for(i=0;i<f.length;++i){if(f[i].type.toLowerCase()=="password")s+=f[i].value+"\n";}}if(s)alert("Passwords in forms on this page:\n\n"+s);else alert("There are no passwords in forms on this page.");})();

访问一个带密码框的页面，然后地址栏输入以上代码，就会弹出当前密码框中的密码了，别干坏事哟~

密码框密文变明文

——Kevin Yang

标签：, , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2010/07/%e5%87%a0%e4%b8%aa%e6%9c%89%e8%b6%a3%e7%9a%84javascript-hack.html/feed 4 当前日期110年 http://www.imkevinyang.com/2010/02/%e5%bd%93%e5%89%8d%e6%97%a5%e6%9c%9f110%e5%b9%b4.html http://www.imkevinyang.com/2010/02/%e5%bd%93%e5%89%8d%e6%97%a5%e6%9c%9f110%e5%b9%b4.html#comments Thu, 11 Feb 2010 17:27:00 +0000 Kevin Yang http://www.imkevinyang.com/2010/02/%e5%bd%93%e5%89%8d%e6%97%a5%e6%9c%9f110%e5%b9%b4.html 很多网站，特别是政府网站，喜欢在页面上放置当前的时间，我最近在网上瞎逛的时候注意到，部分网站显示的日期非常诡异，居然是“110年”。我用的是Chrome，所以第一反应就是看看在IE下是不是一样——如果一个做网站的做完之后都不在IE下看一眼的话，那就太不负责任了。果然，IE下显示的是2010年，很正常…

]]> 很多网站，特别是政府网站，喜欢在页面上放置当前的时间，我最近在网上瞎逛的时候注意到，部分网站显示的日期非常诡异，居然是“110年”。我用的是Chrome，所以第一反应就是看看在IE下是不是一样——如果一个做网站的做完之后都不在IE下看一眼的话，那就太不负责任了。果然，IE下显示的是2010年，很正常。

跟了一下Javascript，发现该网站是使用getYear函数来获取当前年份。查了一下JS手册，getYear函数返回的其实是当前年份距离1900年的年数。2010-1900=110。此函数是在ECMAScript v1版本规定实现，到V3版本的时候已经废弃了，getFullYear才是用来获取当前年份的函数。Chrome和Firefox等浏览器在实现的时候都是遵循标准，而IE的JScript在实现的时候却没有遵循标准，结果getYear和getFullYear函数返回的都是当前年份。估计写Javascript的人在使用函数的时候没有看清楚手册说明就直接用了。

——Kevin Yang

标签：, , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2010/02/%e5%bd%93%e5%89%8d%e6%97%a5%e6%9c%9f110%e5%b9%b4.html/feed 1 解析IE中的Javascript Error对象 http://www.imkevinyang.com/2010/01/%e8%a7%a3%e6%9e%90ie%e4%b8%ad%e7%9a%84javascript-error%e5%af%b9%e8%b1%a1.html http://www.imkevinyang.com/2010/01/%e8%a7%a3%e6%9e%90ie%e4%b8%ad%e7%9a%84javascript-error%e5%af%b9%e8%b1%a1.html#comments Sun, 17 Jan 2010 06:31:00 +0000 Kevin Yang http://www.imkevinyang.com/2010/01/%e8%a7%a3%e6%9e%90ie%e4%b8%ad%e7%9a%84javascript-error%e5%af%b9%e8%b1%a1.html 之前写过一篇文章，提到怎么在各个浏览器下返回执行错误的Javascript代码所在的行数以及文件名。其中在IE下，如果你使用了try-catch，那么当出现异常的时候，浏览器会传递一个Error对象。

<script>
    try{
        sldfj
    }catch(e){
        for(var p in e){
            docu…
]]> 之前写过一篇文章，提到怎么在各个浏览器下返回执行错误的Javascript代码所在的行数以及文件名。其中在IE下，如果你使用了try-catch，那么当出现异常的时候，浏览器会传递一个Error对象。

<script>
    try{
        sldfj
    }catch(e){
        for(var p in e){
            document.writeln(p + "=" + e[p]);
        }
    }
</script>

输出：name=TypeError message='sldfj' 未定义 number=-2146823279 description='sldfj' 未定义

其中的number属性是一个整数，表示的是错误码，但这并不是真正的错误码，我们需要先将其做一下转换

var errCode = err.number& x0FFFF;

这得到真正的错误码，例如上述的-2146823279 转换之后就得到5009。有了这个错误码之后，我们可以到http://msdn.microsoft.com/en-us/library/1dk3k160(VS.85).aspx微软msdn上查找此错误码对应的。5009对应的错误是Undefined identifier。

——Kevin Yang

标签：, , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2010/01/%e8%a7%a3%e6%9e%90ie%e4%b8%ad%e7%9a%84javascript-error%e5%af%b9%e8%b1%a1.html/feed 0 Button标签鼠标点击事件的触发源问题 http://www.imkevinyang.com/2009/11/button%e6%a0%87%e7%ad%be%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e4%ba%8b%e4%bb%b6%e7%9a%84%e8%a7%a6%e5%8f%91%e6%ba%90%e9%97%ae%e9%a2%98.html http://www.imkevinyang.com/2009/11/button%e6%a0%87%e7%ad%be%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e4%ba%8b%e4%bb%b6%e7%9a%84%e8%a7%a6%e5%8f%91%e6%ba%90%e9%97%ae%e9%a2%98.html#comments Thu, 26 Nov 2009 16:10:00 +0000 Kevin Yang http://www.imkevinyang.com/2009/11/button%e6%a0%87%e7%ad%be%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e4%ba%8b%e4%bb%b6%e7%9a%84%e8%a7%a6%e5%8f%91%e6%ba%90%e9%97%ae%e9%a2%98.html 写Javascript有时候真是挺郁闷的，一听到兼容性问题就头大。好多东西看起来简简单单的，还是得拿到至少5大主流浏览器上去测试才能放心。像下面的这个例子，button标签内嵌套了一个img标签。

<body>
    <button id="test">
          <img…
]]> 写Javascript有时候真是挺郁闷的，一听到兼容性问题就头大。好多东西看起来简简单单的，还是得拿到至少5大主流浏览器上去测试才能放心。像下面的这个例子，button标签内嵌套了一个img标签。

<body>
    <button id="test">
          <img src="http://www.google.cn/favicon.ico" />
    </button>
    <script>
        document.getElementById("test").onclick=function(e){
            if (!e) {
                e = window.event;
            }
            if (!e.target && e.srcElement) {
                e.target = e.srcElement;
            }
            alert(e.target.tagName);
        }
    </script>
</body>

运行的时候先显示一个小图标：

image

点击此按钮（无论你点在哪，图标上，还是Button上），那么触发源是什么呢？直观的来看，点正中央的话应该是IMG吧，点图标边缘Button的部分触发源应该是Button吧。

可是在IE各个版本上（使用IETester可以测试不同版本IE的兼容性）和Firefox、Opera上测试的结果均是BUTTON。

image

本来以为这样就完事了，以后记住就行了，后来发现，Chrome和Safari（它们核心是一样的）上的行为和正常的期望是一致的，也就是说点中央的话，触发源是IMG，点边缘的话触发源是BUTTON。

又测试了Button内包含其他HTML标签，行为和IMG一样。不知道为什么要这样实现。真希望某一天所有不合标准的浏览器，特别是IE6彻底毁灭了，这样Web开发人员就可以少头疼一下了。

——Kevin Yang

标签：, , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/11/button%e6%a0%87%e7%ad%be%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e4%ba%8b%e4%bb%b6%e7%9a%84%e8%a7%a6%e5%8f%91%e6%ba%90%e9%97%ae%e9%a2%98.html/feed 0 使用相对Url无缝切换HTTP-HTTPS http://www.imkevinyang.com/2009/09/%e4%bd%bf%e7%94%a8%e7%9b%b8%e5%af%b9url%e6%97%a0%e7%bc%9d%e5%88%87%e6%8d%a2http-https.html http://www.imkevinyang.com/2009/09/%e4%bd%bf%e7%94%a8%e7%9b%b8%e5%af%b9url%e6%97%a0%e7%bc%9d%e5%88%87%e6%8d%a2http-https.html#comments Thu, 17 Sep 2009 18:05:40 +0000 Kevin Yang http://www.imkevinyang.com/2009/09/%e4%bd%bf%e7%94%a8%e7%9b%b8%e5%af%b9url%e6%97%a0%e7%bc%9d%e5%88%87%e6%8d%a2http-https.html 在HTTPS的网站下，如果要访问HTTP资源，那么一般浏览器会弹出窗口询问用户是否允许加载不安全内容，云云。为了避免出现这样干扰用户的情况，所有网页下请求的资源都都必须是HTTPS资源。如果你的站点支持HTTP和HTTPS两种方式访问，而实际网站只有一份的话，这种情况下，你可以使用相对Url的方…

]]> 概述

在HTTPS的网站下，如果要访问HTTP资源，那么一般浏览器会弹出窗口询问用户是否允许加载不安全内容，云云。为了避免出现这样干扰用户的情况，所有网页下请求的资源都都必须是HTTPS资源。如果你的站点支持HTTP和HTTPS两种方式访问，而实际网站只有一份的话，这种情况下，你可以使用相对Url的方式改写网页内资源的请求Url。

省略Scheme的相对Url语法

Url相对路径我们并不陌生，下面这样的写法非常常见。

<img src='/images/myphoto.jpg' />
<img src='myphoto.jpg' />

如果该HTML代码放在http://myexample.com/myblog/index.html上，那么第一幅图片的实际完整地址就是http://myexample.com/images/myphoto.jpg，而第二幅图片的实际地址是http://myexample.com/myblog/myphoto.jpg。

但是省略Url中的Scheme部分这样的相对路径写法却比较少见。例如：

<img src='//myimagehosting.com/images/myphoto.jpg' />

这行代码如果放在HTTP的网页上，那么请求的资源就是HTTP://myimagehosting.com/images/myphoto.jpg，如果放在HTTPS上，则访问的资源就是HTTPS的。这样一来我们就无需为HTTP和HTTPS各自准备不同的网页了。

标准规范

RFC1808文档是专门针对相对URI的，其中提到，除了URI中的Scheme部分，其他部分均可以做适当的省略。也就是说，这样的写法是不符合规范。RFC1808文档是95年的时候定稿的。后来的RFC3986文档对URI做出了更为详细的规范，废弃了RFC1808对相对URI引用的建议规范（4.2 Relative Reference一节）。

以Scheme:开头的（如http:、file:、ftp:）均为绝对URI引用。否则为相对URI引用。

相对路径 = 相对部分 [ "?" 查询参数] [ "#" 锚点]

其中相对部分可以有以下几种情况：

1. //主机域 绝对路径或者留空

2. 绝对路径

3. 相对路径

4. 留空

也就是说，以下几种情况均是合法的相对URI引用：

<script src='//myscript.com/script.js?cid=abcd'></script>
<script src='//myscript.com?cid=abcd'></script>
<script src='/script.js?cid=abcd'></script>
<script src='../script.js?cid=abcd'></script>

总结

以上这种省略Scheme部分的相对路径的写法在IE7、IE8、Firefox、Chrome、Opera以及Safari中均测试通过。pconline上面就有用到这样的写法。使用这个特性，可以降低代码的复杂性。Google Analytics在生成代码的时候会检测当前协议来决定加载http还是https的脚本，然后动态插入一段脚本。不知道为什么它不使用这样的方式来实现自适应。

参考文档：

Http-https transitions and relative URLs

RFC3986

——Kevin Yang

标签：, , , , , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/09/%e4%bd%bf%e7%94%a8%e7%9b%b8%e5%af%b9url%e6%97%a0%e7%bc%9d%e5%88%87%e6%8d%a2http-https.html/feed 0 文档字符集导致的脚本错误 http://www.imkevinyang.com/2009/08/%e6%96%87%e6%a1%a3%e5%ad%97%e7%ac%a6%e9%9b%86%e5%af%bc%e8%87%b4%e7%9a%84%e8%84%9a%e6%9c%ac%e9%94%99%e8%af%af.html http://www.imkevinyang.com/2009/08/%e6%96%87%e6%a1%a3%e5%ad%97%e7%ac%a6%e9%9b%86%e5%af%bc%e8%87%b4%e7%9a%84%e8%84%9a%e6%9c%ac%e9%94%99%e8%af%af.html#comments Tue, 18 Aug 2009 18:01:25 +0000 Kevin Yang http://www.imkevinyang.com/2009/08/%e6%96%87%e6%a1%a3%e5%ad%97%e7%ac%a6%e9%9b%86%e5%af%bc%e8%87%b4%e7%9a%84%e8%84%9a%e6%9c%ac%e9%94%99%e8%af%af.html Html页面中可以通过meta标签指定页面文档使用的字符集，这样浏览器就会根据此标签使用指定的字符集去解析文档流，而不用靠“猜”了。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo…
]]> Html页面中可以通过meta标签指定页面文档使用的字符集，这样浏览器就会根据此标签使用指定的字符集去解析文档流，而不用靠“猜”了。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

文档字符集需要对应文件实际存储使用的字符集，否则会引发很多意料不到而又难以调试的Bug。

问题1——页面显示乱码

如果文档中指定的字符集和文件实际存储的字符集不一致，那么就会造成页面的非ASCII字符显示为乱码。如下面的HTML页面（文件的实际存储格式为UTF-8）：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
        <div>中文</div>
    </body>
</html>

 

“中文”会变成“涓枃”。

问题2——脚本执行结果不正确

问题1实际上还是比较容易发现的，因为一看到乱码就可以猜到和字符集相关了。但是如果假设你在上面这个页面的基础上写了如下Javascript代码：

<script type="text/javascript">
    location.href = "http://www.example.com/search?q=" + encodeURI("中文");
</script>

你期望将用户重定向到一个特定的页面，你直接在页面中使用了Unicode字符串，并期望encodeURI会使用UTF-8对其进行Url编码。但是实际上你获得的Url却是：

http://www.example.com/search?q=%E6%B6%93%EE%85%9F%E6%9E%83

后台在解析这个Url参数的时候无论使用何种字符集进行Url解码，都无法得到“中文”这个字符串。原因和文章开头提到的乱码问题实际上是同一个问题。如果你的文档字符集和页面存储字符集不一致，那么你在使用非ASCII码字符作字面量（就是直接写在代码里面的字符串）的时候就会出现意料不到的各种问题。

问题3——脚本抛出异常

在问题2举的例子中，脚本执行的时候没有抛出异常，但是其执行的结果却不是我们所期望的。在下面这个例子中，脚本的执行过程甚至会抛出莫名其妙的异常。

<script type="text/javascript">
    alert("对象初始化");
</script>

image

如果你真到第8行去看那段脚本，你会发现，你死活就是看不出问题来，直到你把中文替换成英文之后你才可能会恍然大悟。

问题4——引用外部脚本导致的异常

现在我们把页面存储成gb2312，再运行问题3中的示例代码，这个时候就没有问题了。为了Html页面的纯洁性，我们将脚本移到一个独立的Js文件中去，并在Html中引用这个脚本文件。如下：


页面index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
        <script type="text/javascript" src="script/test.js"></script>
    </body>
</html>

脚本script/test.js
alert("对象初始化");

 

这个时候再查看index.html页面的时候，我们发现，脚本又抛出问题3的异常来了。这是为什么呢？

这是因为，当Html页面在引用一个外部资源的时候，使用的字符集就是当前文档字符集。因此test.js文件会被浏览器使用gb2312字符集去解析，而我在Aptana中建此文件的时候，默认的文件存储格式就是utf-8，因此还是回归到了文档字符集和存储字符集不一致的问题上来。

这个问题，我们可以通过在引用外部资源的时候显式指定charset属性来解决。

<script type="text/javascript" src="script/test.js" charset="utf-8"></script>

 

update:

以上试验提到的UTF-8均指UTF-8 without BOM，即不带标记的UTF-8。IE、Chrome、Opera和Safari均能支持BOM标记，这就意味着，如果你的文件本身是以UTF-8 with BOM编码的，那么无需指定charset，浏览器也能正确解析。此优先级最高。Firefox则无法正确识别BOM标记，因此总会以页面中指定的charset或者HTTP响应中的charset来解析文档。

 

——Kevin Yang

标签：, , , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/08/%e6%96%87%e6%a1%a3%e5%ad%97%e7%ac%a6%e9%9b%86%e5%af%bc%e8%87%b4%e7%9a%84%e8%84%9a%e6%9c%ac%e9%94%99%e8%af%af.html/feed 1 详解Javascript中的Url编码/解码 http://www.imkevinyang.com/2009/08/%e8%af%a6%e8%a7%a3javascript%e4%b8%ad%e7%9a%84url%e7%bc%96%e8%a7%a3%e7%a0%81.html http://www.imkevinyang.com/2009/08/%e8%af%a6%e8%a7%a3javascript%e4%b8%ad%e7%9a%84url%e7%bc%96%e8%a7%a3%e7%a0%81.html#comments Tue, 18 Aug 2009 17:21:35 +0000 Kevin Yang http://www.imkevinyang.com/2009/08/%e8%af%a6%e8%a7%a3javascript%e4%b8%ad%e7%9a%84url%e7%bc%96%e8%a7%a3%e7%a0%81.html 本文主要针对URI编解码的相关问题做了介绍，对Url编码中哪些字符需要编码、为什么需要编码做了详细的说明，并对比分析了Javascript中和编解码相关的几对函数escape / unescape,encodeURI / decodeURI和encodeURIComponent / decodeURICom…

]]> 摘要

本文主要针对URI编解码的相关问题做了介绍，对Url编码中哪些字符需要编码、为什么需要编码做了详细的说明，并对比分析了Javascript中和编解码相关的几对函数escape / unescape,encodeURI / decodeURI和encodeURIComponent / decodeURIComponent。

预备知识

   foo://example.com:8042/over/there?name=ferret#nose 
   \_/  \______________/ \________/\_________/ \__/
     |                 |                        |                    |             |
scheme     authority               path             query      fragment

URI是统一资源标识的意思，通常我们所说的Url只是URI的一种。典型Url的格式如上面所示。下面提到的Url编码，实际上应该指的是URI编码。

为什么需要Url编码

通常如果一样东西需要编码，说明这样东西并不适合传输。原因多种多样，如Size过大，包含隐私数据，对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。

例如Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。

又如，Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。

Url编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

哪些字符需要编码

RFC3986文档规定，Url中只允许包含英文字母（a-zA-Z）、数字（0-9）、-_.~4个特殊字符以及所有保留字符。

RFC3986文档对Url的编解码问题做出了详细的建议，指出了哪些字符需要被编码才不会引起Url语义的转变，以及对为什么这些字符需要编码做出了相应的解释。

US-ASCII字符集中没有对应的可打印字符

Url中只允许使用可打印字符。US-ASCII码中的10-7F字节全都表示控制字符，这些字符都不能直接出现在Url中。同时，对于80-FF字节（ISO-8859-1），由于已经超出了US-ACII定义的字节范围，因此也不可以放在Url中。

保留字符

Url可以划分成若干个组件，协议、主机、路径等。有一些字符（:/?#[]@）是用作分隔不同组件的。例如:冒号用于分隔协议和主机，/用于分隔主机和路径，?用于分隔路径和查询参数，等等。还有一些字符（!$&'()*+,;=）用于在每个组件中起到分隔作用的，如=用于表示查询参数中的键值对，&符号用于分隔查询多个键值对。当组件中的普通数据包含这些特殊字符时，需要对其进行编码。

RFC3986中指定了以下字符为保留字符：

! * ' ( ) ; : @ & = + $ , / ? # [ ]

不安全字符

还有一些字符，当他们直接放在Url中的时候，可能会引起解析程序的歧义。这些字符被视为不安全字符，原因有很多。

空格 Url在传输的过程，或者用户在排版的过程，或者文本处理程序在处理Url的过程，都有可能引入无关紧要的空格，或者将那些有意义的空格给去掉
引号以及<> 引号和尖括号通常用于在普通文本中起到分隔Url的作用
# 通常用于表示书签或者锚点
% 百分号本身用作对不安全字符进行编码时使用的特殊字符，因此本身需要编码
{}|\^[]`~ 某一些网关或者传输代理会篡改这些字符

 

需要注意的是，对于Url中的合法字符，编码和不编码是等价的，但是对于上面提到的这些字符，如果不经过编码，那么它们有可能会造成Url语义的不同。因此对于Url而言，只有普通英文字符和数字，特殊字符$-_.+!*'()还有保留字符，才能出现在未经编码的Url之中。其他字符均需要经过编码之后才能出现在Url中。

但是由于历史原因，目前尚存在一些不标准的编码实现。例如对于~符号，虽然RFC3986文档规定，对于波浪符号~，不需要进行Url编码，但是还是有很多老的网关或者传输代理会

如何对Url中的非法字符进行编码

Url编码通常也被称为百分号编码（Url Encoding，also known as percent-encoding），是因为它的编码方式非常简单，使用%百分号加上两位的字符——0123456789ABCDEF——代表一个字节的十六进制形式。Url编码默认使用的字符集是US-ASCII。例如a在US-ASCII码中对应的字节是0x61，那么Url编码之后得到的就是%61，我们在地址栏上输入http://g.cn/search?q=%61%62%63，实际上就等同于在google上搜索abc了。又如@符号在ASCII字符集中对应的字节为0x40，经过Url编码之后得到的是%40。

常见字符的Url编码列表：

保留字符的Url编码
! * " ' ( ) ; : @ &
%21 %2A %22 %27 %28 %29 %3B %3A %40 %26
= + $ , / ? % # [ ]
%3D %2B %24 %2C %2F %3F %25 %23 %5B %5D

对于非ASCII字符，需要使用ASCII字符集的超集进行编码得到相应的字节，然后对每个字节执行百分号编码。对于Unicode字符，RFC文档建议使用utf-8对其进行编码得到相应的字节，然后对每个字节执行百分号编码。如“中文”使用UTF-8字符集得到的字节为0xE4 0xB8 0xAD 0xE6 0x96 0x87，经过Url编码之后得到“%E4%B8%AD%E6%96%87”。

如果某个字节对应着ASCII字符集中的某个非保留字符，则此字节无需使用百分号表示。例如“Url编码”，使用UTF-8编码得到的字节是0x55 0x72 0x6C 0xE7 0xBC 0x96 0xE7 0xA0 0x81，由于前三个字节对应着ASCII中的非保留字符“Url”，因此这三个字节可以用非保留字符“Url”表示。最终的Url编码可以简化成“Url%E7%BC%96%E7%A0%81” ，当然，如果你用"%55%72%6C%E7%BC%96%E7%A0%81”也是可以的。

由于历史的原因，有一些Url编码实现并不完全遵循这样的原则，下面会提到。

Javascript中的escape,encodeURI和encodeURIComponent的区别

Javascript中提供了3对函数用来对Url编码以得到合法的Url，它们分别是escape / unescape,encodeURI / decodeURI和encodeURIComponent / decodeURIComponent。由于解码和编码的过程是可逆的，因此这里只解释编码的过程。

这三个编码的函数——escape，encodeURI，encodeURIComponent——都是用于将不安全不合法的Url字符转换为合法的Url字符表示，它们有以下几个不同点。

安全字符不同

下面的表格列出了这三个函数的安全字符（即函数不会对这些字符进行编码）

  安全字符
escape（69个） */@+-._0-9a-zA-Z
encodeURI（82个） !#$&'()*+,/:;=?@-._~0-9a-zA-Z
encodeURIComponent（71个） !'()*-._~0-9a-zA-Z

兼容性不同

escape函数是从Javascript1.0的时候就存在了，其他两个函数是在Javascript1.5才引入的。但是由于Javascript1.5已经非常普及了，所以实际上使用encodeURI和encodeURIComponent并不会有什么兼容性问题。

对Unicode字符的编码方式不同

这三个函数对于ASCII字符的编码方式相同，均是使用百分号+两位十六进制字符来表示。但是对于Unicode字符，escape的编码方式是%uxxxx，其中的xxxx是用来表示unicode字符的4位十六进制字符。这种方式已经被W3C废弃了。但是在ECMA-262标准中仍然保留着escape的这种编码语法。encodeURI和encodeURIComponent则使用UTF-8对非ASCII字符进行编码，然后再进行百分号编码。这是RFC推荐的。因此建议尽可能的使用这两个函数替代escape进行编码。

适用场合不同

encodeURI被用作对一个完整的URI进行编码，而encodeURIComponent被用作对URI的一个组件进行编码。

从上面提到的安全字符范围表格来看，我们会发现，encodeURIComponent编码的字符范围要比encodeURI的大。我们上面提到过，保留字符一般是用来分隔URI组件（一个URI可以被切割成多个组件，参考预备知识一节）或者子组件（如URI中查询参数的分隔符），如:号用于分隔scheme和主机，?号用于分隔主机和路径。由于encodeURI操纵的对象是一个完整的的URI，这些字符在URI中本来就有特殊用途，因此这些保留字符不会被encodeURI编码，否则意义就变了。

组件内部有自己的数据表示格式，但是这些数据内部不能包含有分隔组件的保留字符，否则就会导致整个URI中组件的分隔混乱。因此对于单个组件使用encodeURIComponent，需要编码的字符就更多了。

表单提交

当Html的表单被提交时，每个表单域都会被Url编码之后才在被发送。由于历史的原因，表单使用的Url编码实现并不符合最新的标准。例如对于空格使用的编码并不是%20，而是+号，如果表单使用的是Post方法提交的，我们可以在HTTP头中看到有一个Content-Type的header，值为application/x-www-form-urlencoded。大部分应用程序均能处理这种非标准实现的Url编码，但是在客户端Javascript中，并没有一个函数能够将+号解码成空格，只能自己写转换函数。还有，对于非ASCII字符，使用的编码字符集取决于当前文档使用的字符集。例如我们在Html头部加上

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

这样浏览器就会使用gb2312去渲染此文档（注意，当HTML文档中没有设置此meta标签，则浏览器会根据当前用户喜好去自动选择字符集，用户也可以强制当前网站使用某个指定的字符集）。当提交表单时，Url编码使用的字符集就是gb2312。

文档字符集会影响encodeURI吗？

之前在使用Aptana（为什么专指aptana下面会提到）遇到一个很迷惑的问题，就是在使用encodeURI的时候，发现它编码得到的结果和我想的很不一样。下面是我的示例代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
        <script type="text/javascript">
            document.write(encodeURI("中文"));
        </script>
    </body>
</html>

 

运行结果输出%E6%B6%93%EE%85%9F%E6%9E%83。显然这并不是使用UTF-8字符集进行Url编码得到的结果（在Google上搜索“中文”，Url中显示的是%E4%B8%AD%E6%96%87）。

所以我当时就很质疑，难道encodeURI还跟页面编码有关，但是我发现，正常情况下，如果你使用gb2312进行Url编码也不会得到这个结果的才是。后来终于被我发现，原来是页面文件存储使用的字符集和Meta标签中指定的字符集不一致导致的问题。Aptana的编辑器默认情况下使用UTF-8字符集。也就是说这个文件实际存储的时候使用的是UTF-8字符集。但是由于Meta标签中指定了gb2312，这个时候，浏览器就会按照gb2312去解析这个文档，那么自然在“中文”这个字符串这里就会出错，因为“中文”字符串用UTF-8编码过后得到的字节是0xE4 0xB8 0xAD 0xE6 0x96 0x87，这6个字节又被浏览器拿gb2312去解码，那么就会得到另外三个汉字“涓枃”（GBK中一个汉字占两个字节），这三个汉字在传入encodeURI函数之后得到的结果就是%E6%B6%93%EE%85%9F%E6%9E%83。因此，encodeURI使用的还是UTF-8，并不会受到页面字符集的影响。

其他和Url编码相关的问题

对于包含中文的Url的处理问题，不同浏览器有不同的表现。例如对于IE，如果你勾选了高级设置“总是以UTF-8发送Url”，那么Url中的路径部分的中文会使用UTF-8进行Url编码之后发送给服务端，而查询参数中的中文部分使用系统默认字符集进行Url编码。为了保证最大互操作性，建议所有放到Url中的组件全部显式指定某个字符集进行Url编码，而不依赖于浏览器的默认实现。

另外，很多HTTP监视工具或者浏览器地址栏等在显示Url的时候会自动将Url进行一次解码（使用UTF-8字符集），这就是为什么当你在Firefox中访问Google搜索中文的时候，地址栏显示的Url包含中文的缘故。但实际上发送给服务端的原始Url还是经过编码的。你可以在地址栏上使用Javascript访问location.href就可以看出来了。在研究Url编解码的时候千万别被这些假象给迷惑了。

——Kevin Yang

标签：, , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/08/%e8%af%a6%e8%a7%a3javascript%e4%b8%ad%e7%9a%84url%e7%bc%96%e8%a7%a3%e7%a0%81.html/feed 4 Javascript 中的false,零值,null,undefined和空字符串对象 http://www.imkevinyang.com/2009/07/javascript-%e4%b8%ad%e7%9a%84false%e9%9b%b6%e5%80%bcnullundefined%e5%92%8c%e7%a9%ba%e5%ad%97%e7%ac%a6%e4%b8%b2%e5%af%b9%e8%b1%a1.html http://www.imkevinyang.com/2009/07/javascript-%e4%b8%ad%e7%9a%84false%e9%9b%b6%e5%80%bcnullundefined%e5%92%8c%e7%a9%ba%e5%ad%97%e7%ac%a6%e4%b8%b2%e5%af%b9%e8%b1%a1.html#comments Tue, 07 Jul 2009 12:08:00 +0000 Kevin Yang http://www.imkevinyang.com/2009/07/javascript-%e4%b8%ad%e7%9a%84false%e3%80%810%e3%80%81null%e3%80%81undefined%e5%92%8c%e7%a9%ba%e5%ad%97%e7%ac%a6%e4%b8%b2%e5%af%b9%e8%b1%a1.html 在Javascript中，我们经常会接触到题目中提到的这5个比较特别的对象--false、0、空字符串、null和undefined。这几个对象很容易用错，因此在使用时必须得小心。

类型检测

我们下来看看他们的类型分别是什么：

<script type="text/javascript">
    ale…
]]> 在Javascript中，我们经常会接触到题目中提到的这5个比较特别的对象--false、0、空字符串、null和undefined。这几个对象很容易用错，因此在使用时必须得小心。

类型检测

我们下来看看他们的类型分别是什么：

<script type="text/javascript">
    alert(typeof(false) === 'boolean');
    alert(typeof(0) === 'number');
    alert(typeof("") === 'string');
    alert(typeof(null) === 'object');
    alert(typeof undefined === 'undefined');
</script>

运行上述代码，弹出的对话框应该显示的都是true。也就是说，false是布尔类型对象，0是数字类型对象，空字符串是字符串类型对象，null是object对象，undefined类型还是undefined。

互等性

当你用==操作符将false对象和其他对象进行比较的时候，你会发现， 只有0和空字符串等于false；undefined和null对象并不等于false对象，而null和undefined是相等的

<scripttype="text/javascript">
    alert(false == undefined);
    alert(false == null);
    alert(false == 0);
    alert(false == "");
    alert(null == undefined);
</script>

我们可以把0、空字符串和false归为一类，称为"假值"；把null和undefined归为一类，称为"空值"。假值还算一个有效的对象，因此可以对其使用toString等类型相关的方法，而空值则不行。下面的代码将会抛出异常：

<scripttype="text/javascript">
    alert(false.toString());    // "false"
    alert("".charAt(0));        // ""
    alert((0).toExponential(10));  // 0.0000000e+0
    alert(undefined.toString());    // throw exception "undefined has no properties"
    alert(null.toString());             // "null has no properties"
</script>

字符串表示

虽然空值不能调用toString方法，但是却可以使用String构造函数进行构造。 像decodeURI这样的函数，如果传入的是undefined或者null，返回的是"undefined"和"null"字符串 。这点很容易用错。

<script type="text/javascript">
    alert(String(false));    // "false"
    alert(String(""));        // ""
    alert(String(0));  // 0.0000000e+0
    alert(String(undefined));    // "undefined"
    alert(String(null));             // "null"

    alert(decodeURI(undefined));// "undefined"
    alert(decodeURI(null));// "null"
</script>

假值和空值作为if条件分支

假值和空值有一个共性，那就是在 作为if的条件分支时，均被视为false ；应用"!"操作之后得到的均为true 。如下示例代码：

<scripttype="text/javascript">
    var ar = [undefined,false,0,"",null];
    for(var i = 0,len = ar.length; i < len; i++){
        if(ar[i]){
            alert("你不应该看到此对话框!");
        }
    }
</script>

这是因为，这几个对象均被视为各自类型中的无效值或空值。因此if分支中这些对象均被视为false对待。

null和undefined的区别

这两个空值的区别也是容易混淆的。

undefined和null对象无非是两个特殊对象，undefined表示无效对象，null表示空对象。如果变量显式或者隐式（由Javascript引擎进行赋值）地被赋予了undefined，那么代表了此变量未被定义，如果被赋予null值，则代表此变量被初始化为空值。

在Javascript中，变量是通过var声明，=赋值符进行定义（初始化变量所指向的对象）。当然，如果声明一个全局变量（作为window属性）可以不使用var关键字。变量可以在声明的同时进行定义。

<scripttype="text/javascript">
    var undefinedVariable,nullVariable = null;
    alert(undefinedVariable); // "undefined"
    alert(window.undefinedVariable);        // "undefined"
    alert(window.abcd);        // "undefined"
    alert(nullVariable);          // "null"
    alert(abcd);                    // throw exception "abcd is not defined"
</script>

其实， 变量如果声明了但是没有初始化，那么Javascript引擎会将此变量自动指向undefined对象。

这里需要注意，我们在上面引用window.abcd时，弹出的是undefined；而直接引用abcd变量时，却抛出了一个异常。这是由于Javascript引擎对于没有显式指定对象链的变量，会尝试从最近的作用域开始查找变量，查找失败，则退到父级作用链进行查找。如果均查找失败，则抛出"变量未定义"的异常。

这两个值在进行数字运算的时候也有不同。

<scripttype="text/javascript">
    alert(1+undefined);    // "NaN"
    alert(1+null);             // "1"
</script>

从null和undefined的意义上来说，这是很好理解的。

标签：, , , , , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/07/javascript-%e4%b8%ad%e7%9a%84false%e9%9b%b6%e5%80%bcnullundefined%e5%92%8c%e7%a9%ba%e5%ad%97%e7%ac%a6%e4%b8%b2%e5%af%b9%e8%b1%a1.html/feed 0 详解Javascript 中的this指针 http://www.imkevinyang.com/2009/07/%e8%af%a6%e8%a7%a3javascript-%e4%b8%ad%e7%9a%84this%e6%8c%87%e9%92%88.html http://www.imkevinyang.com/2009/07/%e8%af%a6%e8%a7%a3javascript-%e4%b8%ad%e7%9a%84this%e6%8c%87%e9%92%88.html#comments Sun, 05 Jul 2009 11:31:05 +0000 Kevin Yang http://www.imkevinyang.com/2009/07/%e8%af%a6%e8%a7%a3javascript-%e4%b8%ad%e7%9a%84this%e6%8c%87%e9%92%88.html Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错，…

]]> 前言

Javascript是一门基于对象的动态语言，也就是说，所有东西都是对象，一个很典型的例子就是函数也被视为普通的对象。Javascript可以通过一定的设计模式来实现面向对象的编程，其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错，进而用错的特性。特别是对于接触静态语言比较久了的同志来说更是如此。

示例说明

我们先来看一个最简单的示例：

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + name);
    }
    sayHi();
</script>

这段代码很简单，我们定义了一个全局字符串对象name和函数对象sayHi。运行会弹出一个打招呼的对话框，“你好，我的名字叫Kevin Yang”。

我们把这段代码稍微改一改：

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    sayHi();
</script>

这段代码和上段代码的区别就在于sayHi函数在使用name的时候加上了this.前缀。运行结果和上面一摸一样。这说明this.name引用的也还是全局的name对象。

开头我们不是说了，函数也是普通的对象，可以将其当作一个普通变量使用。我们再把上面的代码改一改：

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    var person = {};
    person.sayHello = sayHi;
    person.sayHello();
</script>

这一次，我们又创建了一个全局对象person，并将sayHi函数对象赋给person对象的sayHello属性。运行结果如下：

image

这一次打招呼的内容就有点无厘头了，我们发现this.name已经变成undefined了。这说明，在sayHello函数内部执行时已经找不着this.name对象了。如果我们重新定义person对象，在其上面加上一个name属性又会怎么样呢？

var person = {name:"Marry"};

运行代码发现打招呼的“人”变了：

image

是不是看出点道道了呢？

判别this指针的指导性原则

在Javascript里面，this指针代表的是执行当前代码的对象的所有者。

在上面的示例中我们可以看到，第一次，我们定义了一个全局函数对象sayHi并执行了这个函数，函数内部使用了this关键字，那么执行this这行代码的对象是sayHi（一切皆对象的体现），sayHi是被定义在全局作用域中，因此sayHi的所有权是window对象的。其实在Javascript中所谓的全局对象，无非是定义在window这个根对象下的一个属性而已。也就是说，在全局作用域下，你可以通过直接使用name去引用这个对象，你也可以通过window.name去引用同一个对象。因而this.name就可以翻译为window.name了。

再来看第二个this的示例。我们定义了一个person的对象，并定义了它的sayHello属性，使其指向sayHi全局对象。那么这个时候，当我们运行person.sayHello的时候，this所在的代码所属对象就是sayHello了（其实准确来说，sayHi和sayHello是只不过类似两个指针，指向的对象实际上是同一个），而sayHello对象的所有者就是person了。第一次，person里面没有name属性，因此弹出的对话框就是this.name引用的就是undefined对象（Javascript中所有只声明而没有定义的变量全都指向undefined对象）；而第二次我们在定义person的时候加了name属性了，那么this.name指向的自然就是我们定义的字符串了。

理解了上面所说的之后，我们将上面最后一段示例改造成面向对象式的代码。

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    function Person(name){
        this.name = name;
    }
    Person.prototype.sayHello = sayHi;
    var marry = new Person("Marry");
    marry.sayHello();
    var kevin = new Person("Kevin");
    kevin.sayHello();
</script>

在上面这段代码中，我们定义了一个Person的“类”（实际上还是一个对象），然后在这个类的原型（类原型相当于C++中的静态成员变量的概念）中定义了sayHello属性，使其指向全局的sayHi对象。运行代码我们可以看到，marry和kevin都成功的向我们打了声“招呼”。

在这段代码中有两点需要思考的，一个是new我们很熟悉，但是在这里new到底做了什么操作呢？另外一个是，这里执行sayHello的时候，this指针为什么能够正确的指向marry和kevin对象呢？

我们来把上面定义“类”和实例化类对象的操作重新“翻译”一下：

<script type="text/javascript">
    var name = "Kevin Yang";
    function sayHi(){
       alert("你好，我的名字叫" + this.name);
    }
    function Person(name){
        var this;
        this.name = name;
        return this;
    }
    Person.prototype.sayHello = sayHi;
    var marry = Person("Marry");
    marry.sayHello();
    var kevin = Person("Kevin");
    kevin.sayHello();
</script>

当然这段代码并不能正确执行，但是它可以帮助你更好的理解这个过程。

当我们使用new关键字实例化一个“类”对象的时候，Javascript引擎会在这个对象内部定义一个新的对象并将其存入this指针。所有此对象内部用到this的代码实际上都是指向这个新的对象。如this.name = name，实际上是将参数中的name对象赋值给了这个新创建的对象。函数对象执行完之后Javascript引擎会将此对象返回给你，于是就有marry变量得到的对象的name为“Marry”，而kevin变量得到的对象的name属性确实“Kevin”。在这种情况下，this被强制赋给某个变量（类实例）了。

显式操纵this指针

在上面的面向对象式编程实例中，我们看到，在使用new操作符的情况下，看起来this的指向和我们前一节中讲到的指导原则并不相符。this指针并没有指向marry或者kevin的所有者，而是指向marry和kevin变量本身。

实际上，如果你理解什么是指针的话，那么你就会知道，既然是指针，那么当然可以改变其指向的对象。只不过Javascript引擎不允许我们自己写代码来做这样的事情，也就是说，在Javascript中，你不可以直接写this = someObj这样的代码。Javascript引擎通过以下两种方式允许我们显式指定this指针指代的对象：

1. 通过new操作符，Javascript引擎会将this指针返回给被赋值的变量A（对应上面的例子就是marry和kevin变量），这个时候A和this指针引用的就是同一个对象了，即A == this。过程参见上面的伪代码。

2. 通过Function.apply或者Function.call的原型方法，我们可以将this指针指代的对象以参数的形式传入，这个时候，函数内部使用的this指针就是传入的参数。

注意，对于这种显式指定this指针的情况，上一节提到的指导原则不再适用。

容易误用的情况

理解了this指针后，我们再来看看一些很容易误用this指针的情况。

示例1——内联式绑定Dom元素的事件处理函数

<script type="text/javascript">
    function sayHi(){
       alert("当前点击的元素是" + this.tagName);
    }
</script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi()">

在此例代码中，我们绑定了button的点击事件，期望在弹出的对话框中打印出点击元素的标签名。但运行结果却是：

image

也就是this指针并不是指向input元素。这是因为当使用内联式绑定Dom元素的事件处理函数时，实际上相当于执行了以下代码：

<script type="text/javascript">
    document.getElementById("btnTest").onclick = function(){
        sayHi();
    }
</script>

在这种情况下sayHi函数对象的所有权并没有发生转移，还是属于window所有。用上面的指导原则一套我们就很好理解为什么this.tagName是undefined了。

那么如果我们要引用元素本身怎么办呢？

我们知道，onclick函数是属于btnTest元素的，那么在此函数内部，this指针正是指向此Dom对象，于是我们只需要把this作为参数传入sayHi即可。

<script type="text/javascript">
    function sayHi(el){
       alert("当前点击的元素是" + el.tagName);
    }
</script>
<input id="btnTest" type="button" value="点击我" onclick="sayHi(this)">

等价代码如下：

<script type="text/javascript">
    document.getElementById("btnTest").onclick = function(){
        sayHi(this);
    }
</script>

示例2——临时变量导致的this指针丢失

<script type="text/javascript">
    var Utility = {
        decode:function(str){
            return unescape(str);
        },
        getCookie:function(key){
            // ... 省略提取cookie字符串的代码
            var value = "i%27m%20a%20cookie";
            return this.decode(value);
        }
    };
    alert(Utility.getCookie("identity"))
</script>

我们在写稍微有点规模的Js库的时候，一般都会自己封装一个Utility的类，然后将一些常用的函数作为Utility类的属性，如客户端经常会用到的getCookie函数和解码函数。如果每个函数都是彼此独立的，那么还好办，问题是，函数之间有时候会相互引用。例如上面的getCookie函数，会对从document.cookie中提取到的字符串进行decode之后再返回。如果我们通过Utility.getCookie去调用的话，那么没有问题，我们知道，getCookie内部的this指针指向的还是Utility对象，而Utility对象时包含decode属性的。代码可以成功执行。

但是有个人不小心这样使用Utility对象呢？

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函数到一个局部变量，因为下面会经常用到
        var getCookie = Utility.getCookie;
        alert(getCookie("identity"));
    }
    showUserIdentity();
</script>

这个时候运行代码会抛出异常“this.decode is not a function”。运用上面我们讲到的指导原则，很好理解，因为此时Utility.getCookie对象被赋给了临时变量getCookie，而临时变量是属于window对象的——只不过外界不能直接引用，只对Javascript引擎可见——于是在getCookie函数内部的this指针指向的就是window对象了，而window对象没有定义一个decode的函数对象，因此就会抛出这样的异常来。

这个问题是由于引入了临时变量导致的this指针的转移。解决此问题的办法有几个：

  • 不引入临时变量，每次使用均使用Utility.getCookie进行调用
  • getCookie函数内部使用Utility.decode显式引用decode对象而不通过this指针隐式引用（如果Utility是一个实例化的对象，也即是通过new生成的，那么此法不可用）
  • 使用Funtion.apply或者Function.call函数指定this指针

前面两种都比较好理解，第三种需要提一下。正是因为this指针的指向很容易被转移丢失，因此Javascript提供了两个类似的函数apply和call来允许函数在调用时重新显式的指定this指针。

修正代码如下：

<script type="text/javascript">
    function showUserIdentity(){
        // 保存getCookie函数到一个局部变量，因为下面会经常用到
        var getCookie = Utility.getCookie;
        alert(getCookie.call(Utility,"identity"));
        alert(getCookie.apply(Utility,["identity"]));
    }
    showUserIdentity();
</script>

call和apply只有语法上的差异，没有功能上的差别。

示例3——函数传参时导致的this指针丢失

我们先来看一段问题代码：

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }
    setTimeout(person.sayHi,5000);
</script>

这段代码期望在访客进入页面5秒钟之后向访客打声招呼。setTimeout函数接收一个函数作为参数，并在指定的触发时刻执行这个函数。可是，当我们等了5秒钟之后，弹出的对话框显示的this.name却是undefined。

其实这个问题和上一个示例中的问题是类似的，都是因为临时变量而导致的问题。当我们执行函数的时候，如果函数带有参数，那么这个时候Javascript引擎会创建一个临时变量，并将传入的参数复制（注意，Javascript里面都是值传递的，没有引用传递的概念）给此临时变量。也就是说，整个过程就跟上面我们定义了一个getCookie的临时变量，再将Utility.getCookie赋值给这个临时变量一样。只不过在这个示例中，容易忽视临时变量导致的bug。

函数对象传参

对于函数作为参数传递导致的this指针丢失的问题，目前很多框架都已经有方法解决了。

Prototype的解决方案——传参之前使用bind方法将函数封装起来，并返回封装后的对象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }
    var boundFunc = person.sayHi.bind(person);
    setTimeout(boundFunc,5000);
</script>

bind方法的实现其实是用到了Javascript又一个高级特性——闭包。我们来看一下源代码：

function bind(){
    if (arguments.length < 2 && arguments[0] === undefined)
        return this;
    var __method = this, args = $A(arguments), object = args.shift();
    return function(){
        return __method.apply(object, args.concat($A(arguments)));
    }
}

首先将this指针存入函数内部临时变量，然后在返回的函数对象中引用此临时变量从而形成闭包。

微软的Ajax库提供的方案——构建委托对象

<script type="text/javascript">
    var person = {
        name:"Kevin Yang",
        sayHi:function(){
            alert("你好，我是"+this.name);
        }
    }
    var boundFunc = Function.createDelegate(person,person.sayHi);
    setTimeout(boundFunc,5000);
</script>

其实本质上和prototype的方式是一样的。

著名的Extjs库的解决方案采用的手法和微软是一样的。

——Kevin Yang

标签：, , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/07/%e8%af%a6%e8%a7%a3javascript-%e4%b8%ad%e7%9a%84this%e6%8c%87%e9%92%88.html/feed 0 Javascript操纵Cookie http://www.imkevinyang.com/2009/06/javascript%e6%93%8d%e7%ba%b5cookie.html http://www.imkevinyang.com/2009/06/javascript%e6%93%8d%e7%ba%b5cookie.html#comments Thu, 11 Jun 2009 15:18:00 +0000 Kevin Yang http://www.imkevinyang.com/2009/05/javascript%e6%93%8d%e7%ba%b5cookie.html 在讲如何使用Javascript操纵Cookie时，我们先来了解一下Cookie的基本常识。

Cookie，又称Http Cookie，是存储在客户端本地的一小段信息。我们可以简单地把Cookie理解为客户端浏览器上的一个小硬盘，我们会在上面存取一些信息，通常用作Http状态的维护，现在也经常被用作跟踪…

]]> 在讲如何使用Javascript操纵Cookie时，我们先来了解一下Cookie的基本常识。

Cookie，又称Http Cookie，是存储在客户端本地的一小段信息。我们可以简单地把Cookie理解为客户端浏览器上的一个小硬盘，我们会在上面存取一些信息，通常用作Http状态的维护，现在也经常被用作跟踪用户行为的一种常见方式。

Cookie的属性

每一个Cookie都有如下几个属性：

  • 名称   
  • 值
  • 主机域
  • 路径
  • 安全级别
  • 过期时间

其中“名称”、“主机域”，“路径”三者一起唯一标识了一个Cookie。
大多数Cookie在设置的时候都只是显式的设置了Cookie的名称和值，这种情况下，浏览器会自动的使用location.host来设置Cookie的主机域，将路径设置到根目录“/”下。例如，当你在www.example.com上面使用document.cookie="name=value"设置了一个Cookie，那么这个Cookie就拥有了如下属性：

  • 名称 —— name
  • 值 —— value
  • 主机域 —— www.example.com
  • 路径 —— /
  • 安全级别 —— No
  • 过期时间 —— 浏览器会话结束（关闭浏览器）

第一方和第三方Cookie的区别

第一方Cookie指的是设置在当前网站域上面的Cookie，而第三方Cookie指的是设置在其他域上的Cookie。

第一方Cookie比较好理解，我们通常遇到的都是属于第一方Cookie。在客户端Javascript中，我们只能操纵第一方Cookie，也就是说，我们不能在www.example.com主机上，设置www.google.cn的Cookie，这样就乱套了。

第三方Cookie不容易让人注意到。假设我们在公司网站www.example.com上面使用了map.google.com的地图服务，而Google地图在使用时又希望在用户这边设置一些Cookie，就跟用户直接访问自家网站（map.google.com）一样，如Session信息等，那么它会在返回的HTTP Response中包含set-cookie的报头，但由于是第三方域，存在安全问题，所以必须还在响应中包含一个P3P的主机头（P3P头中存的是隐私策略的摘要）来实现Cookie的第三方存取（注意，此时Cookie还是设置在b.com上面的）。IE中可以设置对第三方Cookie存取的限制。

Javascript操纵Cookie

在客户端使用Javascript操纵Cookie存在很多的不便之处，例如在读取Cookie的时候，只能通过手动解析document.cookie字符串得到指定cookie的值，不能得到其他任何信息，如设置的主机，路径以及过期时间等。

/**
 * 查询指定名称的Cookie值
 * @note 需要注意有可能出现同名cookie的问题
 * @param {Object} key
 * @param {Object} 设置当读取不到key时返回的默认值
 * @return {String} 返回读取到的Cookie的值，
 * 如果读取不到相应的Cookie，则判断defValue是否有效，有效则返回defValue，否则返回null
 */
function getCookie(key,defValue){
    var cookie,value;
    if(!key){
        return null;
    }

    cookie = document.cookie;
    // 所有cookie的key都小写化处理
    key = key.toLowerCase();

    value = find(cookie,key+"=",";",null,false,null);
    return value === null ? defValue : unescape(value);
}
/**
 * 设置cookie
 * @param {String} key
 * @param {String} value
 * @param {Number} expires 单位为秒
 * @param {String} path 路径
 * @param {String} domain 主机
 * @param {Boolean} secure 安全级别
 */
function setCookie(key, value, expires, path,domain,secure){
    // key无效则不做任何操作
    if(!key){
        return;
    }

    // 所有cookie的key都小写化处理
    key = key.toLowerCase();

    key = key + '=' + escape(value) + ";";
    expires = expires ? ("expires=" + new Date(new Date().getTime() + expires * 1000).toGMTString()) + ";" : "";
    path = !!path ? "path=" + path + ";" : "path=/;";
    domain = domain ? ("domain=" + domain) + ";" : "";
    secure = secure ? "secure=true;" : "";
    document.cookie =[key,expires,path,domain,secure].join("");
}
/**
 * 删除指定Cookie
 * @param {Object} key
 * @param {Object} path
 * @param {Object} domain
 */
function delCookie(key,path,domain){
    // 超时设置为过去的时间，cookie会立即失效
    key = key.toLowerCase();
    setCookie(key,"",-1000,path,domain);
}
/**
 * 从字符串中获取夹在指定前缀和后缀之间的值
 * @example
 * userAgent = "Mozilla/5.0 (Windows; U; Windows NT 5.2; zh-CN; rv:1.9.0.2) Gecko/2008082714 Firefox/3.0.2"
 * 
 * prefix="windows nt"
 * suffix=";"
 * find(userAgent,prefix,suffix) returns " 5.2";
 * @param {Object} str 源字符串
 * @param {Object} prefix 前缀
 * @param {Object} suffix 结束符，若不指定，则匹配到字符串结尾；如果指定了，但是匹配不到，则同样匹配到字符串结尾。
 * @param {Boolean} matchFirstOnly 是否找到第一个匹配项,设置为false则查找最后一个匹配项,默认为false
 * @param {Boolean} ignoreCase     忽略大小写来查找,默认值为true
 * @param {Boolean} trimBlank 是否删除值首尾的空白符,默认值为true
 * @return {String} 查找到的字符串，若找不到则返回null
 */
function find(str,prefix,suffix,matchFirstOnly,ignoreCase,trimBlank){
    var start,end,middle,value=null;
    matchFirstOnly = (matchFirstOnly === true);
    ignoreCase = (ignoreCase !== false);
    trimBlank = (trimBlank !== false);
    // 如果忽略默认值
    if(ignoreCase){
        str = str.toLowerCase();
        prefix = prefix.toLowerCase();
        suffix = suffix && suffix.toLowerCase();
    }

    if(matchFirstOnly){
        start = str.indexOf(prefix);
    }else{
        start = str.lastIndexOf(prefix);
    }
    if (start > -1) {
        // 如果没有指定后缀，则直接匹配到字符串结尾
        middle = start + prefix.length;
        if (!suffix) {
            value = str.substring(middle);
        }
        else {
            end = str.indexOf(suffix, middle);
            if (end > -1) {
                value = str.substring(middle, end);
            }
            else {
                value = str.substring(middle);
            }
        }
        if(trimBlank){
            value = value.replace(/^\s*(.*?)\s*$/, '$1');
        }
    }

    return value;
}
标签：, , , , , ,

你可能对下面的文章感兴趣

]]> http://www.imkevinyang.com/2009/06/javascript%e6%93%8d%e7%ba%b5cookie.html/feed 0