博客园_一醉而过

[转]前端开发利器webStorm 3.0配置使用

2012-02-02T07:38:00Z

原文在这里：豪情

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

合适的工具会事半功倍，当然也得把握分寸，要不就成了会得越多干的越多的“苦力者”。
编辑类软件层出不群，各有所长，各有所短。找到一个合适的还真是难。还好有webstorm的出现，最近又是3.0的新版本发布。为什么这么说呢，她与其它的编辑器有什么不同：
1. 任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上角是没有那个熟悉的米号的。

换句话说，所有的操作都直接存储，这样带来的坏处就是，没有以前的米号标识，万一键盘误操作也会被立即存储。

省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。

2. 任何一个编辑器只要文件关闭了就没有历史记录了，但是webstorm有。就是说，只要webstorm不关闭，你的文件随时可以返回到之前的操作，webstorm关闭重启后这些历史记录就没有了。这样的坏处也是显然的，由此带来的内存消耗也必然比较大。
3. 任何一个编辑器，除了服务器svn之外，没有本地版本，但是webstorm提供一个本地文件修改历史记录。

4. 与时俱进的眼光。zencoding于2009年出现于it界，在这之后，鲜有工具直接集成到里边。webstorm 2.0之后就集成了。node.js,html5,git,cvs等就不一一列举了。

5. 提供的插件也是比较齐全，安装非常方便。这样带来了另外的问题，以前的eclipse是安装第三方的，webstorm貌似不能安装第三方的插件。

6. 可以导出当前设置：File -> Export setting 下面就是导入设置。

其它的使用：

1. 主题，参照这里。（所需的文件下载第4条中setting.rar即可，里边包括文章中提到的颜色配置文件）

2. 添加VIM插件：

File -> Settings -> Plugins -> Browse repositories -> 搜索vim，对它单击右键Download and install，然后重启IDE就可以了。
重启之后，控制台会输出： “8:50:07 IdeaVim: Vim keymap was successfully enabled” 说明vim插件安装成功。另外在aptana2.0里边安装vim插件，真是头痛，所有的文件都支持vim模式，在.html居然不支持，郁闷。

这样会出现另外一个问题，我如果想用ctrl+c,ctrl+v等一些默认的快捷键，该如何呢？安装VIM之后修改Defualt ，在Main menu -> Edit -> Copy 单击右键 Remove ctrl + Insert 只会剩下一个ctrl + c。这样配置后，可以使用部分默认的快捷键，90%的VIM快捷键。这之后还有个问题需要注意，在webstorm重启之后，又被全局默认为vim快捷键，需要在File -> Setting -> Keymap -> Keymaps 中选择Default copy，要不然，还是全局的VIM快捷键。

3. 除了webstorm之外，此公司还提供另外一个针对phper的开发工具,phpStorm，主页上说明，phpstorm包括所有webstorm的功能。但是习惯于大括号去方法名在同一行显示，所以还得配置：

File -> Settings -> code style -> PHP -> Wrapping and Braces -> Braces placement ->

In method declaration : End of line.

4. zencoding由于其提供的快捷键，确实 zencoding快捷键修改：

File -> Setting -> Live Templates

这里边如果你修改一个没有什么特别的，但是如果要添加一个需要在下面需要类型：No applicable contexts yet. Define ，单击Define选择要添加的类型。

如何合理的修改，参考这里。

如果你对我修改后的文件设置感兴趣请点这里下载。 (其中就是从我的webstorm导出的setting.jar文件，包括主题，快捷键，zencoding.css等)

一次性导入：

导入：File -> Import settings...

下载后单独模块配置目录：win7 -> C:\Users\jikey(用户名)\.WebIde10\config

也可以一次性导出settings : File -> Export sttings...

5. 在开发js时发现，需要ctrl + return 才能选候选项，又需要配置：

File -> Setting -> Editor -> Code Completion -> Preselect the first suggestion:

'Smart' 改为 Always

6. 注意的地方是：Webstorm的调试是不支持中文路径中文文件名。

以下是webstorm的快捷键说明：

1. ctrl + shift + n: 打开工程中的文件(类似于eclipse中的ctrl+shift+R)，目的是打开当前工程下任意目录的文件。
2. ctrl + j: 输出模板
3. ctrl + b: 跳到变量申明处
4. ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)
5. ctrl + []: 匹配 {}[]
6. ctrl + F12: 可以显示当前文件的结构
7. ctrl + x: 剪切(删除)行，不选中，直接剪切整个行，如果选中部分内容则剪切选中的内容
8. alt + left/right:标签切换
9. ctrl + r: 替换
10. ctrl + shift + up: 行移动
11. shift + alt + up: 块移动(if(){},while(){}语句块的移动)
12. ctrl + d: 行复制
13. ctrl + shift + ]/[: 选中块代码<table>....</table>
14. ctrl + / : 单行注释
15. ctrl + shift + / : 块注释
16. ctrl + shift + i : 如果是css中的class则显示当前class详细信息,如果是js则显示function的详细信息(想象一下，如果在jquery的方法上查看详细信息，就直接可以看到实现代码了)，如果是php，那当时还是function的详细信息

17. ctrl + '-/+': 可以折叠项目中的任何代码块，包括htm中的任意nodetype=3的元素，function,或对象直接量等等。它不是选中折叠，而是自动识别折叠。

18. ctrl + '.': 折叠选中的代码的代码。

19. shift + esc: 当前激活的任意小窗口最小化，也可以是alt + '数字键'，数字在小窗口标题栏上有显示。

20. alt + '7': 显示当前的函数结构。类似于eclipse中的outline的效果。试验了一下，要比aptana的给力一些，但还是不能完全显示prototype下面的方法名。

21. 如果是*.html页面，则在文件名下的导航栏某DOM结构上右键，可以全选当前DOM结构。

22. 项目中添加对jQuery的支持。

File -> settings -> Javascript Libraries -> Add

在files中添加路径，在documentations urls中添加文档支持。这里边需要注意一下的是，要添加原始未压缩的代码，*.min.js版的方法是不会被提示。

添加完成后，右边菜单中还有一 download 按钮，单击之后，他会自动选择最新版的js库进行搜索，然后在弹出的列表中，再单击选择一个后，点击Download and Install之后，才会被下载。这块体验不是太好，没有checkbox,也没有radio，只是选中后整行变暗。

如果添加多个版本的jQuery，就可以直观的看到各个版本之间新方法的差别了。

* 在这项的子菜单中 Usage Scope 右边 Project 第二栏Library下单击，选择新添加的jQuery，使其对整个项目进行覆盖。

也可以在当前页面右键Use JavaScript Library 中选择最顶的刚添加的jQuery支持。

当然，并不是添加的越多越好，添加的多之后，在代码提示后会有数毫秒的延迟，需要谨慎选择最新版。

以下是jquery1.1在ws中效果，还有底下显示vim启动运行的提示，左侧显示数字标题栏名称。

以下vim常用快捷键：

一. 移动：
    h,j,k,l: 左，下，上，右。
    w: 下一个词的词首。W:下一个单词(不含标点)。
    e:下一个词的词尾。E:不含标点。
    b:上一个词的词首。B:不含标点。
    <>: v 模式选中后进行缩进。
二. 跳转：
    %: 可以匹配{},"",(),[]之间跳转。
    H、M、L：直接跳转到当前屏幕的顶部、中部、底部。
    #H：跳转到当前屏的第#行。
    #L：跳转到当前屏的倒数第#行。
    zt: 当前编辑行置为屏顶。
    zz: 当前编辑行置为屏中。
    zb: 当前编辑行置为屏底。
    G：直接跳转到文件的底部。
    gg: 跳转到文件首。
    gd: 跳转到光标所在函数和变量的定义。
    ():跳转到当前的行首、行尾。
    {}：向上、向下跳转到最近的空行。
    [{：跳转到目前区块开头。
    ]}：跳转到目前区块结尾。
    0: 跳转到行首。
    $: 跳转到行尾。
    2$: 跳转到下一行的行尾。
    #：跳转到该行的第#个位置。
    #G: 15G,跳转到15行。
    :#：跳转到#行。
三. 选择：
    1.v: 开启可视模式。 V: 开启逐行可视模式。
    2.^V: 矩形选择。
    3.v3w: 选择三个字符。
    4.ab：包括括号和()内的区域。
    5.aB：包括括号和{}内的区域。
    6.ib：括号()内的区域。
    7.iB：括号{}内的区域。
    8.aw：标记一个单词。
四. 编辑：
    1. 新增：
        i: 光标前插入。
        I: 在当前行首插入。
        a: 光标后插入。
        A: 当前行尾插入。
        O: 在当前行之前插入新行。
        o: 在当前行之后插入新行。
    2. 修改 c(change) 为主：
        r: 替换光标所在处的字符。
        R：替换光标所到之处的字符。
        cw: 更改光标所在处的字到字尾处。
        c#w: c3w 修改3个字符。
        C：修改到行尾。
        ci'：修改配对标点符号中的文本内容。
        di'：删除配对标点符号中的文本内容。
        yi'：复制配对标点符号中的文本内容。
        vi'：选中配对标点符号中的文本内容。
        s：替换当前一个光标所处字符。
        #S：删除 # 行，并以新文本代替。
    3. 删除 d(delete) 为主：
        D：删除到行尾。
        X: 每按一次，删除光标所在位置的前面一个字符。
        x: 每按一次，删除光标所在位置的后面一个字符。
        #x: 删除光标所在位置后面6个字符。
        d^: 删至行首。
        d$: 删至行尾。
        dd:(剪切)删除光标所在行。
        dw: 删除一个单词/光标之后的单词剩余部分。
        d4w: 删除4个word。
        #dd: 从光标所在行开始删除#行。
        daB: 删除{}及其内的内容。
        diB: 删除{}中的内容。
        n1,n2 d：将n1,n2行之间的内容删除。
    4. 查找：
        /：输入关键字，发现不是要找的，直接在按n，向后查找直到找到为止。
        ?：输入关键字，发现不是要找的，直接在按n，向前查找直到找到为止。
        *: 在当前页向后查找同一字。
        #: 在当前页向前查找同一字。
    5. 复制 y(yank)为主：
        yw: 将光标所在之处到字尾的字符复制到缓冲区中。
        #yw: 复制#个字到缓冲区。
        Y：相当于yy, 复制整行。
        #yy:表示复制从光标所在的该行往下数#行文字。
        p: 粘贴。所有与y相关的操作必用p来结合粘贴。
        ]p：粘贴到合适的缩进处。
        n1,n2 co n3：复制第n1行到第n2行之间的内容到第n3行后面。
    6. 大小写转换：
        gUU: 将当前行的字母改为大写。
        guu: 将当前行的字母改为小写。
        gUw: 将当前光标下的单词改为大写。
        guw: 将当前光标下的单词改为小写。
        a. 整篇大写:
        ggguG
        gg: 光标到文件第一个字符。
        gu: 把选择范围全部小写。
        G: 到文件结束。
        b. 整篇小写：gggUG
    7.  其它：
        J：当前行和下一行合并成一行。
    8.  移动：
        n1,n2 m n3：将n1行到n2行之间的内容移至n3行下。

这样几番配置认识：

1. 在javascript方面比aptana更接近于当前的流行开发趋势。

2. 在html,css上比dreamweaver更大胆，更有洞察力。

3. 在php上比zendstudio更带有一点英雄主义色彩。

4. 在java上，此公司提供另外一款工具：IntelliJ IDEA

可以看出纯英文的界面，多如牛毛的快捷键，不推荐新手使用。太方便就会容易培养惰性，而惰性是开发人员的大敌。

最后感谢火爷，是火爷教会我使用webstorm。火爷一直是走在技术前沿的pyer.

欢迎转载，但是必须保留本文的署名豪情（包含链接）

本文链接

[转]display:inline-block的深入理解

2010-10-26T16:05:00Z

说明：display:inline-block之前一直没有好好研究,这几天接连遇到这样类似的BUG，于是研究下,网上的主要资料来自圆心的这篇文章《display:inline-block的深入理解》，不过读这篇文章之前最好先读一下《on having layout》对layout有一个深入的了解, 一年后圆心又写了《模拟兼容性的inline-block属性》一文，与此同时口碑网的秦歌也写了《inline-block的应用两例》。全网的资料基本上就是这些！

在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。
display:inline-block

将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

但对于这个属性不是所有浏览器都识别。

支持的浏览器有：Opera、Safari。

但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性（在 Firefox3 版本中将会支持 display:inline-block）。不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，text-align 有时候就会有问题，还得改用 Firefox 的私有属性 -moz-box-align 来解决（谢谢 aoao 提供案例）。

建议：最好不要使用 Firefox 私有属性 -moz-inline-box。

或许有朋友会对上面所说的 IE 也不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

其实不然，在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout（如果你对 layout 感觉到陌生，可以参看 old9 翻译的《On having layout》），从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。

延伸一个问题：IE下块元素如何实现 display:inline-block 的效果？

有两种方法：

1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;...}
div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：

div {display:inline; zoom:1;...}

这篇文章发表2007年3月11日下午 14:45，并被分类于HTML/CSS/XML/XSL，已被 32990 人阅读。您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论，也可以发表您的评论，或者在您自己的网站中引用（trackback）该篇日志。

扩展阅读：

本文链接

母亲

2010-10-24T13:57:00Z

当我写这些文字的时候，刚得知母亲老病复发，在医院住院，连日来的很多思绪一股脑的朝我奔袭过来!

母亲是个勤劳的人,尽管勤劳是中国所有母亲最基本的特质，但无疑我的母亲比所有的母亲还要更勤劳一些.

家在农村，为了供我读高中和大学，父亲在外打工，家里生活的重担，全部压在了母亲一个人身上，农忙季节，别人家都是多个劳力，而我们家却只有母亲一个人，母亲的坚强，是我到现在为止也想不到的，地里的农活，家里的牲畜，都需要她忙.

妈妈的老毛病是滑膜炎，这是一种由于长期积劳成疾而成的病，痛的时候根本不能走路，治疗的时候需要往骨缝了扎针，母亲是这样说的......

母亲是个乐观的人，她知道我工作忙，而且有失眠的毛病，所以一般都不会跟我说，每次都是闪烁其词，知道我再三追问才会说......

大学那会，我真的很傻，真的不懂得家里的苦衷，现在回想起来真的很惭愧，毕业之后在一年一次的春节回家中，我感受到了，母亲真的年岁大了，真的被累到了，很多疾病也慢慢的来了，她走路的速度好像慢慢的慢了，做的饭菜也不再那么可口，头上也有白发长出......

是啊，母亲老了。

如果我能在她身边照顾她，在她躺在病床上的时候倒杯水.....

可是，儿子远在浙江，不能亲临身边，只能努力工作，早日回到你的身边。

我不是伟大的文学家，写不出优美感人的文字，但是人人都有母亲，有一种爱你我都能体会，谨以此文献给母亲，祝愿她早日康复!

本文链接

9月前端tips

2010-10-18T10:00:00Z

9.1 - 9.3

126.【Mobile】iPhone/Android 如何去掉超链接点击高亮的边框?
	dom.ontouchstart = function(){
		return false;
	}
即可去除（王卓）

127.【JS】计时器在OS上，浏览器的最小延时时间为10ms，在windows上为15ms。我们可以通过为计时器提供0（或任何10ms以下的任何数值）作为延时时间得到这个值。（圆心）

128.【JS】setTimeout可以改变调用栈的顺序：

	alert(1);
	setTimeout(function (){
	   alert(2)
	},0);
	alert(3);
	alert(4);
	//执行顺序 1 -> 3 -> 4 -> 2 

相关延伸阅读: http://ejohn.org/blog/how-javascript-timers-work/ （龙刚）

9.6 - 9.10

129.【JS】在创建img时，src不要设置为空或者#，否则会对页面再次发生请求，建议设置为about:blank;。

130.【JS】typeof 某一个 string 可能出来 object 或是 string，视其创建方式。（法海）

131.【JS】几种国产浏览器的 UA 信息：https://spreadsheets.google.com/ccc?key=0AjjyN0rjIwrydGx1b2QyVkdlNjBfY2VEckFhTXJmTXc&hl=zh_CN#gid=0 （子涯）

132.【JS】逻辑运算符&&和||的“短路”原理，如&&中第一个表达式为假就不会去处理第二个表达式，而||正好相反。在js中有意思的是它们的返回值：
	例：var attr = true && 4 && “aaa”;那么运行的结果attr就不是简单的true或这false，而是”aaa” 。
	例：var Yahoo = Yahoo || {};经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值。
	那么，可以这样优化代码：
	if(a >=5){alert("你好");}
	可以写成：
	a >= 5 && alert("你好");
注：js中||和&&的特性帮我们精简了代码的同时，也带来了代码可读性的降低。需要我们自己来权衡了！（涵宇）

133.【JS】字面量 string 不以对象实现，作为 16 位无符号整数存储，当局称这么做的目的是为了“简单高效”。（法海）

9.13 - 9.17

134.【JS】var x = "this is string..."; var y = ["this","is","string"]; x与y不同之处在于类型，javascript的解析器把字符串直接赋值（其实就是copy）给x（直接量），却把数组的指针赋给y（引用量）。（涵宇）

135.【JS】对一个字符串使用replace方法的时候，用正则模式可以替换掉字符串里面的全部子字符串，用字符串模式则只做一次匹配,只替换第一个匹配，
	var aa = "{}{}{}";
	Var cc = aa.replace("{","LEFTQUOTE");//只做一次匹配
	console.log(cc);
	var bb = "{}{}{}";
	Cc = bb.replace(/{/g,"LEFTQUOTE");//可做全部的替换
	console.log(cc);
（乔福）

136.

137.【JS】“+”运算符的所谓“重载”，其实只是同一个算法内部的不同分支。（法海）

138.【CSS】p是block_level元素,没有其他的块级元素可以牵入到p里,因为在P元素中遇到块级元素后会立即闭合P元素；如：<p><div></div></p>会被解析成<p></p><div></div><p></p>。（涵宇）

9.19 - 9.21

139.【JS】“+”运算符进入“串连接”操作的分支后，调用左运算元（转换成 String 对象后）的 Concatenate 方法，这意味着返回的是对象（运算元均为数字时，将调用另外的方法，不返回对象）。（法海）

140.【JS】JavaScript不支持重载，在JavaScript中，脚本在执行时不会顾及函数定义时的参数，而是直接使用在作用域链中最后定义的那个函数。这意味着，相同 名称的函数永远只存在一个实例。（涵宇）

141.【CSS】在 IE67 中，hr 默认有上下 14px 的 margin，同时不能消除。使用 float 清除上边距，负边距清除下边距。（法海）

9.25 - 9.30

142.【HTML】创建复杂的HTML标签或是多层的嵌套标签时，可以选择使用DocumentFragment机制，它可以提供一个缓冲的机制，将DOM节点先放到内存中，当节点都构 造完成后，再将DocumentFragment对象添加到页面中，这时所有的节点都会一次渲染出来，能减少浏览器很多的负担，明显的提高页面渲染速度。（涵宇）

143.【HTML】关于 HTML5 表单验证的文章：http://www.alistapart.com/articles/forward-thinking-form-validation/

144.【JS】将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递（硬编码）。例如，setTimeout(”someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)。（涵宇）

145.【JS】对于简单的任务，最好使用基本操作方式来实现，而不是使用函数调用实现。例如val1 < val2 ?  val1 : val2;执行速度快于Math.min(val1, val2);，类似的，myArr.push(newEle);慢于myArr[myArr.length] = newEle;（涵宇）

146.【JS】ie下非表单链接元素在触发click事件的时候，focus事件也会被触发，非ie不会触发。（龙藏）

147.【浏览器】当发出的请求未收到response时，刷新页面，firefox和chrome会自动中断请求，而IE不会，所以在模拟长连接时多次刷新页面就会因为积累太多请求而遇到IE并发请求数的瓶颈，需要在触发beforeunload事件时手动abort请求来解决。（鸣人）

本文链接

[转]通过ECMA-262-3 深入理解this关键字

2010-10-18T09:44:00Z

申明：justin对原文作了重新整理，并对本文翻译不周和漏译的地方提出了修改意见，本文中红色部分的文字均由justin修正指出，特此声明。

导言

在这篇文章中我们将讨论一个与执行上下文直接相关的更多细节。讨论的主题就是this关键字。

实践表明，这个主题很难，在不同执行上下文中this值的确定经常导致问题。

许多程序员习惯的认为，在程序语言中，this关键字与面向对象的程序紧密相关，完全指向通过构造器创建的新的对象。在ECMAScript中也是这样执行的，但正如你看到的那样，这并不限于创建对象的定义。

让我们更详细的了解ECMAScript中真正的this值是什么？

定义

this是执行上下文中的一个属性。

view source print ?

1.activeExecutionContext = {

2. VO: {...},

3. this: thisValue

4.};

这里VO是我们前一章讨论的变量对象。

this与上下文中可执行代码密切直接相关，this值在进入上下文时确定，代码在上下文运行期间一成不变

下面让我们更详细研究这些案例

全局代码中的this值

在这里一切都简单。在全局代码中，this始终是全局对象本身，这样有可能间接的引用它。

view source print ?

01.// explicit property definition of

02.// the global object

03.this.a = 10; // global.a = 10

04.alert(a); // 10

05.// implicit definition via assigning

06.// to unqualified identifier

07.b = 20;

08.alert(this.b); // 20

09.// also implicit via variable declaration

10.// because variable object of the global context

11.// is the global object itself

12.var c = 30;

13.alert(this.c); // 30

函数代码中的this值

在函数代码中使用this 时很有趣，这种情况很难且会导致很多问题。

这种类型的代码中，this值的首要特点（或许是最主要的）是它不是静态的绑定到一个函数。

正如我们上面曾提到的那样，这个值进入上下文时确定，在一个函数代码中，这个值在每一次完全不同。

但是，在代码运行时的this值是不变的，也就是说，既然它不是一个变量，就不可能为其分配一个新值（相反，在Python编程语言中，它明确的定义为对象本身，在运行期间可以不断改变）。

view source print ?

01.var foo = {x: 10};

02.var bar = {

03. x: 20,

04. test: function () {

05. alert(this === bar); // true

06. alert(this.x); // 20

07. this = foo; // error

08. alert(this.x); // if there wasn't an error then 20, not 10

09.

10. }

11.};

12.// on entering the context this value is

13.// determined as "bar" object; why so - will

14.// be discussed below in detail

15.bar.test(); // true, 20

16.foo.test = bar.test;

17.// however here this value will now refer

18.// to "foo" – even though we're calling the same function

19.foo.test(); // false, 10

那么，是什么影响了函数代码中this值的变化。有几个因素：

首先，在通常的函数调用中，this是由激活上下文代码的调用者来提供的，即调用函数的父上下文(parent context )。this取决于调用函数的方式。

为了在任何情况下准确无误的确定this值，有必要理解和记住这重要的一点。正是调用函数的方式影响了调用的上下文中的this值，没有别的什么（我们可以在一些文章，甚至是在关于javascript的书籍中看到，它们声称：“this值取决于函数如何定义，如果它是全局函数，this设置为全局对象，如果函数是一个对象的方法，this将总是指向这个对象。–这绝对不正确”）。继续我们的话题，可以看到，即使是正常的全局函数也会被调用方式的不同形式激活，这些不同的调用方式导致了不同的this值。

view source print ?

1.function foo() {

2. alert(this);

3.}

4.foo(); // global

5.alert(foo === foo.prototype.constructor); // true

6.// but with another form of the call expression

7.// of the same function, this value is different

8.foo.prototype.constructor(); // foo.prototype

有可能作为一些对象定义的方法来调用函数，但是this将不会设置为这个对象。

view source print ?

01.var foo = {

02. bar: function () {

03. alert(this);

04. alert(this === foo);

05. }

06.};

07.foo.bar(); // foo, true

08.var exampleFunc = foo.bar;

09.alert(exampleFunc === foo.bar); // true

10.// again with another form of the call expression

11.// of the same function, we have different this value

12.exampleFunc(); // global, false

那么，调用函数的方式如何影响this值？为了充分理解this值的确定，需要详细分析其内部属性之一——引用类型（Reference type）。

引用类型

使用伪代码，引用类型的值可以表示为拥有两个属性的对象——base（即拥有属性的那个对象），和base中的propertyName 。

view source print ?

1.var valueOfReferenceType = {

2. base: <base object>,

3. propertyName: <property name>

4.};

引用类型的值只有两种情况：

当我们处理一个标示符时
或一个属性访问器

标示符的处理过程在Chapter 4. Scope chain 中讨论，在这里我们只是看到，在该算法的返回值中，总是一个引用类型的值（这对this来说很重要）。

标识符是变量名，函数名，函数参数名和全局对象中未识别的属性名。例如，下面标识符的值：

view source print ?

1.var foo = 10;

2.function bar() {}

在操作的中间结果中，引用类型对应的值如下：

view source print ?

01.var fooReference = {

02. base: global,

03. propertyName: 'foo'

04.};

05.

06.var barReference = {

07. base: global,

08. propertyName: 'bar'

09.};

为了从引用类型中得到一个对象真正的值，伪代码中的GetValue方法可以做如下描述：

view source print ?

01.function GetValue(value) {

02. if (Type(value) != Reference) {

03. return value;

04. }

05. var base = GetBase(value);

06. if (base === null) {

07. throw new ReferenceError;

08. }

09. return base.[[Get]](GetPropertyName(value));

10.}

在那里内部的[[Get]]方法返回对象属性真正的值，包括对原型链中继承的属性分析。

view source print ?

1.GetValue(fooReference); // 10

2.GetValue(barReference); // function object "bar"

属性访问器应该熟悉。它有两种变体：点（.）语法（此时属性名是正确的标示符，且事先知道），或括号语法（[]）。

view source print ?

1.foo.bar();

2.foo['bar']();

在中间计算的返回值中，我们有了引用类型的值。

引用类型的值与函数上下文中的this值如何相关？——从最重要的意义上来说。这个关联的过程是这篇文章的核心。一个函数上下文中确定this值的通用规则如下：

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用括号()的左边是引用类型的值，this将设为引用类型值的base对象（base object），在其他情况下（与引用类型不同的任何其它属性），这个值为null。不过，实际不存在this的值为null的情况，因为当this的值为null的时候，其值会被隐式转换为全局对象。

我们看看这个例子中的表现：

view source print ?

1.function foo() {

2. return this;

3.}

4.foo(); // global

我们看到在调用括号的左边是一个引用类型值（因为foo是一个标示符）。

view source print ?

1.var fooReference = {

2. base: global,

3. propertyName: 'foo'

4.};

相应地，this也设置为引用类型的base对象。即全局对象。

同样，使用属性访问器：

view source print ?

1.var foo = {

2. bar: function () {

3. return this;

4. }

5.};

6.foo.bar(); // foo

我们再次拥有一个引用类型，其base是foo对象，在函数bar激活时用作this。

view source print ?

1.var fooBarReference = {

2. base: foo,

3. propertyName: 'bar'

4.};

但是，用另外一种形式激活相同的函数，我们得到其它的this值。

view source print ?

1.var test = foo.bar;

2.test(); // global

因为test作为标示符，生成了引用类型的其他值，其base（全局对象）用作this 值。

view source print ?

1.var testReference = {

2. base: global,

3. propertyName: 'test'

4.};

现在，我们可以很明确的告诉你，为什么用表达式的不同形式激活同一个函数会不同的this值，答案在于引用类型（type Reference）不同的中间值。

view source print ?

01.function foo() {

02. alert(this);

03.}

04.

05.foo(); // global, because

06.

07.var fooReference = {

08. base: global,

09. propertyName: 'foo'

10.};

11.

12.alert(foo === foo.prototype.constructor); // true

13.

14.// another form of the call expression

15.

16.foo.prototype.constructor(); // foo.prototype, because

17.

18.var fooPrototypeConstructorReference = {

19. base: foo.prototype,

20. propertyName: 'constructor'

21.};

另外一个通过调用方式动态确定this值的经典例子：

view source print ?

01.function foo() {

02. alert(this.bar);

03.}

04.

05.var x = {bar: 10};

06.var y = {bar: 20};

07.

08.x.test = foo;

09.y.test = foo;

10.

11.x.test(); // 10

12.y.test(); // 20

函数调用和非引用类型

因此，正如我们已经指出，当调用括号的左边不是引用类型而是其它类型，这个值自动设置为null，结果为全局对象。

让我们再思考这种表达式：

view source print ?

1.(function () {

2. alert(this); // null => global

3.})();

在这个例子中，我们有一个函数对象但不是引用类型的对象（它不是标示符，也不是属性访问器），相应地，this值最终设为全局对象。

更多复杂的例子：

view source print ?

01.var foo = {

02. bar: function () {

03. alert(this);

04. }

05.};

06.

07.foo.bar(); // Reference, OK => foo

08.(foo.bar)(); // Reference, OK => foo

09.

10.(foo.bar = foo.bar)(); // global?

11.(false || foo.bar)(); // global?

12.(foo.bar, foo.bar)(); // global?

为什么我们有一个属性访问器，它的中间值应该为引用类型的值，在某些调用中我们得到的this值不是base对象，而是global对象？

问题在于后面的三个调用，在应用一定的运算操作之后，在调用括号的左边的值不在是引用类型。

第一个例子很明显———明显的引用类型，结果是，this为base对象，即foo。

在第二个例子中，组运算符并不适用，想想上面提到的，从引用类型中获得一个对象真正的值的方法，如GetValue。相应的，在组运算的返回中———我们得到仍是一个引用类型。这就是this值为什么再次设为base对象，即foo。

第三个例子中，与组运算符不同，赋值运算符调用了GetValue方法。返回的结果是函数对象（但不是引用类型），这意味着this设为null，结果是global对象。

第四个和第五个也是一样——逗号运算符和逻辑运算符（OR）调用了GetValue 方法，相应地，我们失去了引用而得到了函数。并再次设为global。

引用类型和 this为null

有一种情况是这样的：当调用表达式限定了call括号左边的引用类型的值，尽管this被设定为null，但结果是global。当引用类型值的base对象是被激活的对象时，这种情况就会出现。

下面的实例中，内部函数被父函数调用，此时我们就能够看到上面说的那种特殊情况。正如我们在第二章知道的一样，局部变量、内部函数、形式参数储存在给定函数的激活对象中。

view source print ?

1.function foo() {

2. function bar() {

3. alert(this); // global

4. }

5. bar(); // the same as AO.bar()

6.}

激活对象总是作为this返回，值为null——（即伪代码的AO.bar()相当于null.bar()）。这里我们再次回到上面描述的例子，this设置为全局对象。

有一种情况除外：如果with对象包含一个函数名属性，在with语句的内部块中调用函数。With语句添加到该对象作用域的最前端，即在激活对象的前面。相应地，也就有了引用类型（通过标示符或属性访问器），其base对象不再是激活对象，而是with语句的对象。顺便提一句，它不仅与内部函数相关，也与全局函数相关。因为with对象使作用域最前端的对象（全局或激活对象）相形见绌。

view source print ?

01.var x = 10;

02.with ({

03.

04. foo: function () {

05. alert(this.x);

06. },

07. x: 20

08.

09.}) {

10.

11. foo(); // 20

12.

13.}

14.

15.// because

16.

17.var fooReference = {

18. base: __withObject,

19. propertyName: 'foo'

20.};

同样的情况出现在catch语句的实际参数中函数调用：在这种情况下，catch对象添加到作用域的最前端，即在激活对象或全局对象的前面。但是，这个特定的行为被确认为ECMA-262-3的一个bug，这个在新版的ECMA-262-5中修复了。这样，在特定的激活对象中，this指向全局对象。而不是catch对象。

view source print ?

01.try {

02. throw function () {

03. alert(this);

04. };

05.} catch (e) {

06. e(); // __catchObject - in ES3, global - fixed in ES5

07.}

08.// on idea

09.var eReference = {

10. base: __catchObject,

11. propertyName: 'e'

12.};

13.// but, as this is a bug

14.// then this value is forced to global

15.// null => global

16.var eReference = {

17. base: global,

18. propertyName: 'e'

19.};

同样的情况出现在命名函数（函数的更对细节参考Chapter 5. Functions）的递归调用中。在函数的第一次调用中，base对象是父激活对象（或全局对象），在递归调用中，base对象应该是存储着函数表达式可选名称的特定对象。但是，在这种情况下，this总是指向全局对象。

view source print ?

1.(function foo(bar) {

2.

3. alert(this);

4.

5. !bar && foo(1); // "should" be special object, but always (correct) global

6.

7.})(); // global

作为构造器调用的函数的this

还有一个与this值相关的情况是在函数的上下文中，这是一个构造函数的调用。

view source print ?

1.function A() {

2. alert(this); // newly created object, below - "a" object

3. this.x = 10;

4.}

5.

6.var a = new A();

7.alert(a.x); // 10

在这个例子中，new运算符调用“A”函数的内部的[[Construct]] 方法，接着，在对象创建后，调用内部的[[Call]] 方法。所有相同的函数“A”都将this的值设置为新创建的对象。

手动设置一个函数调用的this

在函数原型中定义的两个方法（因此所有的函数都可以访问它）允许去手动设置函数调用的this值。它们是.apply和.call方法。他们用接受的第一个参数作为this值，this 在调用的作用域中使用。这两个方法的区别很小，对于.apply，第二个参数必须是数组（或者是类似数组的对象，如arguments，反过来，.call能接受任何参数。两个方法必须的参数是第一个——this。

例如：

view source print ?

01.var b = 10;

02.function a(c) {

03. alert(this.b);

04. alert(c);

05.}

06.

07.a(20); // this === global, this.b == 10, c == 20

08.

09.a.call({b: 20}, 30); // this === {b: 20}, this.b == 20, c == 30

10.a.apply({b: 30}, [40]) // this === {b: 30}, this.b == 30, c == 40

结论

在这篇文章中，我们讨论了ECMAScript中this关键字的特征（对比于C++ 和 Java，它们的确是特色）。我希望这篇文章有助于你准确的理解ECMAScript中this关键字如何工作。同样，我很乐意在评论中回到你的问题。

其它参考

10.1.7 – This
11.1.1 – The this keyword
11.2.2 – The new operator
11.2.3 – Function calls

原文地址：http://www.denisdeng.com/?p=900

英文地址：http://dmitrysoshnikov.com/ecmascript/chapter-3-this/

本文链接

8月前端 tips

2010-09-29T03:06:00Z

8.2 - 8.6

104.【JS】获取当前时间的毫秒数可通过以下方法：new Date().getTime(), new Date().valueOf(), +new Date(), new Date() * 1, Date.parse(Date()) … 等等，前四种方法括号内可以带时间的参数，可以返回相应的时间的毫秒数，而最后一个会忽略掉任何参数。推荐看下：http://www.gracecode.com/archives/3004/ （剑翎，乔福）

105.【Flash】页面中的swf配置参数中wmode一般为 window。即独立窗口模式播放，不与当前HTML产生交互。（龙藏）

106.【Mobile】兼容iPhone/Android的屏幕旋转事件：

var supportsOrientationChange = "onorientationchange" in window,

orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {

switch(window.orientation){

case 0:

//do sth;

break;

case 90:

//do sth;

break;

}

}, false); （王卓）

107.【JS】+ 的字符串连接在传统的 IE 浏览器下性能低下，可考虑使用数组索引（或push，索引略快）添加、join最终拼接的方式（但：Safari、Opera、Chrome和IE8浏览器都已优化了+的字符串连接性能，优于数组的方法）。（圆心）

108.【JS】!!可以便捷的强制把其他类型转换为布尔类型，比如 !!1。

8.9 - 8.13

109.【CSS】应该特别关注的引起 reflow 的几个原因：计算 offsetWidth 和 offsetHeight 属性、改变字体。

详细可阅读：http://www.planabc.net/2009/04/13/reflow/ （圆心）

110.【Mobile】获取当前地理位置的方法：navigator.geolocation.getCurrentPosition(showMap/*回调函数*/)，坐标变量：latitude = position.coords.latitude; longitude = position.coords.longitude;（王卓）

111.【Flash】在页面中应用swf对象的，如果对显示没有特殊要求，请不要将wmode 强制写为 opaque 或 transparent，这会影响其性能。（龙藏）

112.【JS】在使用 parseInt 函数转换数字的时候，尽量带上第二个参数，强制转换为某一进制类型的数字，否则，如 parseInt('080') 可能不能获得你想要的结果，推荐使用 parseInt('080', 10)

113.【JS】在 IE 中当重新设置新的 href 属性值时，如果链接文字含有 “http://” 或 “@” ，则其 innerHTML 将显示不正确，显示成设置的 href 属性。解决方法是在修改href时，赋值前面加一个空格。（圆心）

8.16 - 8.20

114.【JS】在做数组或者其它依赖 length 属性的循环时，建议先对 length 赋值，这样可以避免每次循环都去计算 length（特殊情况除外），例如：

var myString = "Hello";

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

alert( myString.charAt( i ) );

}

115.【Mobile】Android 2.2 webkit新APIs：navigator.connection.type可以判断当前网络连接的类型；navigator.onLine检测设备是否联网；navigator.isApplicationInstalled检测是否安装某一个本地应用（王卓）

116.【JS】当脚本将 img 元素 innerHTML 给其他创建的元素，未添加到 DOM 树，则除 Opera 外，其他浏览器都会立即请求图片。（圆心）

117.【Flash】对于swf的内容，优雅降级的最佳事件是给出可替换内容“alternative content”. 这部分内容仅在<object>中被直接支持。这就是为什么推荐一般采用 <object> 进行swf嵌入的原因。（龙藏）

118.【CSS】IE bug Table： http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/ （龙刚）

8.22 - 8.26

119.【JS】IE为setInterval提供的延时时间不能为0。当setInterval的延时时间为0时，它会转变成 setTimeout（仅执行一次回调函数），可以通过为其提供1ms的延迟来解决这个问题。（圆心）

120.【Flash】swf在不绑定或动态加载字体的情况下，一般仅支持 _sans (类似 Helvetica 或 Arial)、_serif (类似 Times Roman) 和_typewriter (类似 Courier) 三类字体。（龙藏）

121.【Mobile】iPhone上使用Gestures API来实现缩放和旋转：

var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){

var node = e.target;

// 缩放和旋转都是相对值，

// 所以要等手势结束时再更改我们的变量

node.style.width = (width * e.scale) + "px";

node.style.height = (height * e.scale) + "px";

node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";

}

node.ongestureend = function(e){

// 更新这些变量，以备后用

width *= e.scale;

height *= e.scale;

rotation = (rotation + e.rotation) % 360;

}

（王卓）

122.【JS】对于select中的值，用JS选中它，除了用xxx.options[指定的index]以外，如果已经预先知道需要选中的那项的值，还可以直接用select.value=指定的值来快速搞定。（龙刚）

123.【JS】条件判断时，比如 if ( myNum == 3 )，建议书写为 if ( 3 == myNum )，因为后者在你误写 == 为 = 或者其它失误时，错误发生后你可以很容易的发行问题，浏览器的报错提示也会有更友好的提示。

8.30 - 8.31

124.【Flash】给swf传递参数或者以flashvars方式传递。可以支持内容编码过的JSON和 XML。如对 JSON的所有 value 进行 encodeURIComponent。（龙藏）

125.【JS】在使用 setTimeout 或者 setInterval 函数时，需要注意，如果第一个参数传入的是字符串，那么将在全局作用域里寻找此函数，而不会在当前作用域中寻找，所以建议第一个参数传入函数，比如：setTimeout( function() { loop(counter); }, 1000 );。

本文链接

To forever Tracy McGrady

2010-08-07T02:19:00Z

特雷西·麦克格雷迪一直是我喜欢的篮球运动员，而且永远是！

昨天又在视频网站上看了他的集锦,中间配乐是It'S MY LIFE~抒情版

歌词如下：

This ain't a song for the broken-hearted
这不是一首给伤心人的歌
No silent prayer for the faith-departed
没有为失去信仰者的默祷
I ain't gonna be just a face in the crowd
我不希望自己只是芸芸众生之一
You're gonna hear my voice
你将会听到我的声音
When I shout it out loud
当我大声呐喊出来

Chorus:
It's my life
这是我的人生
It's now or never
把握现在，机会稍纵即逝
I ain't gonna live forever
我不希望长生不死
I just want to live while I'm alive
我只想趁活著得时候认真的生活
(It's my life)
（这是我的人生）
My heart is like an open highway
我的心像是开放的高速公路
Like Frankie said
就像法兰克辛那屈唱的：
I did it my way
我走自己的路
I just wanna live while I'm alive
我只想趁活著的时候认真的生活
It's my life
这是我的人生

This is for the ones who stood their ground
这是为坚守信念的人们而唱
For Tommy and Gina who never backed down
为从不退缩的汤米和吉娜而唱
Tomorrow's getting harder make no mistake
毫无疑问的，未来日趋艰辛
Luck ain't even lucky
幸运不再幸运
Got to make your own breaks
你必须自己寻求突破

Chorus:
It's my life
这是我的人生
It's now or never
把握现在，机会稍纵即逝
I ain't gonna live forever
我不希望长生不死
I just want to live while I'm alive
我只想趁活著得时候认真的生活
(It's my life)
（这是我的人生）
My heart is like an open highway
我的心像是开放的高速公路
Like Frankie said
就像法兰克辛那屈唱的：
I did it my way
我走自己的路
I just wanna live while I'm alive
我只想趁活著的时候认真的生活
'Cause it's my life
这是我的人生

Better stand tall when they're calling you out
当别人找你麻烦，挺直身子
Don't bend, don't break, baby, don't back down
不要屈服，不要放弃，宝贝，不要畏缩

Chorus:
It's my life
这是我的人生
It's now or never
把握现在，机会稍纵即逝
I ain't gonna live forever
我不希望长生不死
I just want to live while I'm alive
我只想趁活著得时候认真的生活
(It's my life)
（这是我的人生）
My heart is like an open highway
我的心像是开放的高速公路
Like Frankie said
就像法兰克辛那屈唱的：
I did it my way
我走自己的路
I just wanna live while I'm alive
我只想趁活著的时候认真的生活

Chorus:
It's my life
这是我的人生
It's now or never
把握现在，机会稍纵即逝
I ain't gonna live forever
我不希望长生不死
I just want to live while I'm alive
我只想趁活著得时候认真的生活
(It's my life)
（这是我的人生）
My heart is like an open highway
我的心像是开放的高速公路
Like Frankie said
就像法兰克辛那屈唱的：
I did it my way
我走自己的路
I just wanna live while I'm alive
我只想趁活著的时候认真的生活
'Cause it's my life
这是我的人生

回顾麦克格雷迪的过去的成长历程,非常令人惊叹,不得不说,麦克格雷迪是一个天才球员,更是一个好球员：【2002年秋，得知华盛顿狙击案的受害者——13岁的伊安-布朗（Iran Brown）想要自己的签名，他给布朗寄去了自己的球衣、签名、还有亲口祝福康复的录像带，在布朗的情况有所好转后，邀请到奥兰多旅游并观看训练，12/25/02，魔术主场与活塞圣诞大战，此前已因伤停战3场的T-Mac复出，砍下46分，为场边的布朗献上一场胜利】球场外的麦克格雷迪一直令我感动,你可以查看相关资料。

今天，视频中钢琴和高亢的嗓音令我震撼,麦蒂的辉煌与伤感令我神伤,下个赛季还不知道麦克格雷迪何去何从,但不管怎样,我都会一致支持你——永远的特雷西·麦克格雷迪！

本文链接

三谈Iframe自适应高度[转自口碑网UED博客]

2010-08-04T08:08:00Z

说明：本篇文章转自口碑网UED博客，原文地址：http://ued.koubei.com/?p=1217 转载请作必要的版权说明,谢谢！

在构建B/S系统界面的时候，经常会遇到主页面index.html中嵌套其他页面的情况，虽然已经有的库已经提供了控件(例如jQuery easy UI),但是有时候iframe的使用是不可避免的,这篇文章应该给你一个相对来说比较实用的答案,正象文章所说,互联网上的大部分东西都是垃圾或者是不可相信的！原文有KOUBEI UED 由校整理！

为什么是三谈

为什么是三谈呢？一是因为这真的是一个被说烂的话题，二是因为太师傅在n年前就写过这篇再谈iframe自适应高度。之所以再提该问题，是因为之前项目中确实遇到了这个问题的方方面面，有必要总结一下。希望对各位有帮助，有错误请指正。

同域、子页面高度不会动态增加

这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可。但有二点必须注意：

如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括Webkit内核的浏览器，具体请看这个Demo。所以你要么进行浏览器检测，要么用Math.max计算一个最大值，要么你想别的方法。
iframe所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是，IE下必须使用微软事件模型obj.attachEvent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。

同域、子页面高度会动态增加

原理与第一种情况一样，多一个计时器，一直检测字页面高度，当子页面高度和iframe的高度不一致时，重新设置iframe的高度。这边也可以加一个try在js出错时，加一个足够的高度。

同域、子页面高度会动态增加、脚本可能完全失效

第二个例子中，考虑到了脚本出错的情况，但是万一脚本根本不执行了呢，那iframe中的内容就会因为iframe的高度不够而显示不了。为此我们通常事先设置一个足够的高度，为了前端控制方便，我觉得写在CSS文件中比较合适，需要修改时只改CSS就行了。这里我设置了selector{ height:1800px; }。需要注意的是，写在样式表里的样式，不能直接用node.style[property]来取，对于微软模型，要用node.currentStyle[property]（题外话：悲剧的IE模型不支持CSS伪类），对于W3C模型，要用window.getComputedStyle(node,null)[property]来取。我这里图方便直接用了YUI。

这里又有一个问题，设置iframe的高度大于其包含页面的高度时，各个浏览器的处理不一样。例如在Firefox下，必须计算body元素的高度，而html元素的高度等于iframe的高度，然而当恰巧这个页面又有绝对定位、未清浮动元素时，又不能通过body元素来取，显然第一种方法缺点更小一些。具体请看这个Demo。

从上面这个Demo可以看到，除IE浏览器外，别的浏览器计算出来的都是iframe的高度，即CSS里设置的#frame_content_parent{ height:1800px; }。而IE计算出来的是iframe所引用页面的实际高度。

#frame_content_parent{ height:1800px; }

跨域

这里提供一个Iframe代理的方法，简单地说一下原理。假设有3个页面，分别是主页面A.html，字页面B.html，代理页面C.html。其中A与B是跨域的，而A和C是同域的。它们的关系：A包含B，B包含C。很显然A和B，以及B和C，因为跨域不能相互通信，而A和C同域，可以相互通信。为此我们就想到让C页面告诉A页面，B页面到底有多少高。因为B和C也是跨域的不能相互通信，所以想在C页面中，直接window.parent.document.body.scrollHeight这样是行不通的，所以我们只能让B页面自己计算自身的高度，然后通过某种方法告诉C页面，再由C页面告诉A页面。这里的一个方法就是在B页面生成一个Iframe节点，然后设置它的src属性，在这个地址上附加一个参数，即B页面计算出来的高度，然后C页面就可以通过window.location获取这个地址栏中的地址，提取出高度值，通过window.top找到A页面，设置A页面的Iframe的高度。基本的原理就是这样，看代码吧：

DEMO

//B页面脚本
//任务：计算其实际高度，然后生成一个iframe节点，将高度作为代理页面C的地址的一部分赋值给Src属性
(function(){
    var agent_iframe = document.createElement("iframe"),
        b_height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe_once.html#" + b_height;
    document.body.appendChild(agent_iframe);
    agent_iframe.style.display = "none";
})();

//C页面脚本
//任务：获取请求地址中的高度值，将其赋值给A页面的Iframe的高度
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

跨域、字页面高度动态变化

这里结合了第2、第4两种方法，我的想法是在B页面通过一个计时器，不停计算B页面的高度，一但变化，马上修改iframe标签的src属性，而C页面也有计时器不断监听src的变化，改变Aiframe标签的高度。需要注意的是仅仅修改src属性后面的锚点值（如“#1234”），页面并不会刷新，不会重新请求，这也是在C页面增加计时器的原因。

DEMO

//B页面脚本
(function(){
    var getHeight = function(){
        return Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
    };

    var preHeight = getHeight(),
        agent_iframe;

    var createIframe = function(height){
        agent_iframe = document.createElement("iframe");
        agent_iframe.style.height = "0";
        agent_iframe.style.width = "0";
        agent_iframe.style.border = "none";
        agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + height;
        document.body.appendChild(agent_iframe);
    }

    createIframe(preHeight);

    var checkHeight = function(){
        var currentHeight = getHeight();
        if(currentHeight != preHeight){
            agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html#" + currentHeight;
            preHeight = currentHeight;
        }
        setTimeout(checkHeight,500);
    }

    setTimeout(checkHeight,500);
})();

//C页面脚本
(function(){
    var preHeight = parseInt(window.location.hash.substring(1),10),
        ifrmae = window.top.document.getElementById("frame_content_parent");

    ifrmae.height = preHeight;
    setInterval(function(){
        var newHeight = parseInt(window.location.hash.substring(1),10);
        if (newHeight !== preHeight){
            ifrmae.height = newHeight;
            preHeight = newHeight;
        }
    },500);
})();

这里还有另一种方案，就是让iframe每一次都重新请求，这样C页面就不需要计时器了，但是如果2次计算高度重复的话，就会导致src属性的值相同，这样浏览器就很可能不重新请求该页面了，那么C页面中的脚本也就不运行了。要修复这个问题很简单，只要在每次计算出来的src属性上增加一个随机数的参数就行了。比如http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?temp=123123423712937#1563

//B页面关键脚本
agent_iframe.src = "http://demo.zhouqicf.com/js/2010/iframe_height/agent_iframe.html?a=" + Math.random() + "#" + currentHeight;

//C页面脚本
window.top.document.getElementById("frame_content_parent").height = parseInt(window.location.hash.substring(1),10);

本文链接

淘宝，我来了!

2010-07-23T23:37:00Z

这是一次面试经历：

经朋友推荐，发了份简历给他，第三天左右就接到淘宝的面试电话，说晚上进行电话面试，好吧，我开始紧张，而且这个词一直伴随我接到HR的电话说拿到offer letter为止,正所谓,余感绕心，数日不绝...

说道前端，说道淘宝，说道UED，大家都知道的，可能就是因为太想进去吧，紧张了很多!

晚上的电话面试自我感觉良好,问的技术不是很难,技术上主要问的两个问题是CSS sprites和如何实现圆角效果,其他的问题就是平时爱好，优缺点，如何学习新技术等等，奇怪是四轮面试下来都问到了是否有女朋友，关系怎么样,这个我很费解......

好吧,电话面试就过去了......

第二天又接到电话，说可以来淘宝面试了，又开始紧张，因为不知道会问什么，毕竟机会难得，好吧，把我能准备的东西都看了一遍，什么关于新技术的，框架应用的，IE和FF那些兼容问题的，性能优化的......这样一看我才发现，东西可真多，尽量都看了一遍，据说偏好于新技术问题，我又把html5+css3,ie9和ff4的情况看了一遍(我也不知道这些算不算是新技术.......)

好吧,之前的一天就过去了......

面试的日子来了，中午11：30坐车开始出发，本来想吃中饭再过去了,后来感觉没什么胃口,于是直接杀向淘宝，到了一楼大厅，距离面试约定时间还有40分钟左右,先不着急上去(建议大家整理下思绪,给自己调整一下)，又回顾了一下可能面试的重点，好了，12：45坐电梯上去6楼,到前台MM那里索取表格,填写,填了一半发现面试官来了,是圆心和渔隐，好吧，我更加紧张,给了我份面试题,30分钟差不多，没做完，有个题写html的语义化，很烦人有点长,还有个js的问题，不怎么会.

之后开始聊天，他们两个穿插问了我很多问题，又问到了你有没有女朋友之类,这个我真的不理解.

技术面试，个人感觉他们更关注你的成长空间，潜力，不是现在的能力,是你的学习能力......

好吧,第一轮技术面试过了,他们让我在那里等,肚子开始有点饿了......

第二轮,hr的来了,一个说话很好听的MM,不一会又来了一个大叔,呵呵，开始对侃，我最喜欢HR的面试，明显这轮话比之前的多了很多，就是那些问题，我就不重复了，又问到了是否有女朋友，更扯的是还问了什么星座.....

好吧，HR的面试结束了，那个MM让我等下，说还有个高管面试，等吧，我真的饿了,而且感觉头晕，不是吧，难道中暑？据说紧张的时候容易中暑，今天有37°......

等了大约30分钟,传说中的神秘人物出现了,自报了下花名,我没听过(二当家)，我对他手里拿的IPAD比较感兴趣,呵呵。

又是对侃，又问有没有女朋友，啥时候结婚，什么星座之类......（oh my god!）

好吧，面试结束了！

第二天，接到了第二轮的HRMM的电话，说拿到offer letter了，很高兴，压力感来了......

昨天晚上起草了一份最近的学习计划,需要提升的技能，感觉有很多不会的:

1.加强html语义化的学习,（其实我原来的语义化不错的，只不过现在项目中用的比较少，杯具）

2.css 960框架，淘宝是用960框架的，之前看过，但是没研究过，所以要研究下

3.js提升,主要是OOP方面， YUI

4.相关前端性能优化的知识

5.调试工具的知识

最后给自己取一个好点的花名,其实我感觉一醉这名字不错，不过人家要求是武侠小说中的人物,我武侠小说看的少...

期待入职，期待淘宝!

真正的挑战来了,加油！

本文链接

关于cssText属性

2010-07-14T03:16:00Z

给一个html元素设置css属性,传统做法：

var mybox= document.getElementById("mybox");
mybox.style.width = "200px";
mybox.style.height = "70px";
mybox.style.display = "block";

这样写很烦，尤其是很多的时候，一个样式一行,天啊！

工具函数 :

function setStyle(obj,css){
for(var atr in css)
obj.style[atr] = css[atr];
}
var mybox = document.getElementById("mybox");
setStyle(mybox,{width:"200px",height:"70px",display:"block"})

使用cssText属性,想怎么写就怎么写：

var mybox = document.getElementById("mybox");
mybox.style.cssText="width:200px;height:70px;display:bolck";

跟书写CSS一样，还可以支持属性值缩写border:#000 solid 1px;

测试浏览器版本如下(与浏览器模式无关)：

IE 6/7
IE 8 (Emulate IE7)

IE 8 (Enforce IE8)

Opera 10.10

Firefox 3.5.6
Safari 4.0.3
Chrome 4.0.266.0

本文链接