boin

fighting with IE memory leak

boin — Mon, 24 Mar 2008 22:04:09 +0800

作者: boin 链接：http://boin.javaeye.com/blog/175583 发表时间: 2008年03月24日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

在某个Ajax项目中使用到了Adobe Spry框架。

在项目部署测试中，发现有内存泄露。仔细检查了所有的代码，发现该注意的地方都已经清理过，一时找不到原因。最后突发奇想是不是用到的Spry框架的问题？用测试工具详细分析后表明，Spry的MenuBar组件在IE6下有内存泄露。晕，让Adobe的名号害惨了项目组的同志们，即使最新的1.6.1版本也不例外。最后分析代码表明，这还是那个IE6JS引擎与DOM引擎相互分离的老BUG了，当dom元素绑定到的事件响应函数引用到自身的时候。在page unload的时候，该元素就会成为孤儿，它占用的内存就不会被系统所回收。

经过测试，这个全局的菜单每次会有56个泄露的节点，占用内存200k左右。当页面浏览次数增加时，甚至会有数十M的内存泄露！

找到了问题的所在，那么解决起来就很容易了。hack部分代码，解决内存泄露。项目顺利验收...

在注册事件响应时，把匿名函数绑定在该元素上

Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent) //IE6 needs more to handle memory
		{
			element.attachEvent('on' + eventType, handler);
			if(!element._handlers) element._handlers = [];
			element._handlers['on' + eventType] = handler;
		}
	}
	catch (e) {}
}

增加一个clearLeak方法，在onload事件中清除这些绑定。

Spry.Widget.MenuBar.clearLeak = function(menu)
{
	if(!Spry.is.ie)return;
	alert('reged with' + menu.element.id);
	window.attachEvent('onunload', function(){
		//alert('recycling...');
		var recycler = document.createElement('div');
		var element = menu.element;
		
		loopLeak(element);
		
		function loopLeak(object)
		{
			var children = object.childNodes;
			if(children.length > 0)
			{
				for(var i in children)
				{
					var child = children[i];
					if(child && child.nodeType == 1)loopLeak(child);
				}				
			}
			if(object && object._handlers)
			{
				for(var index in object._handlers)
				{
					var handler = object._handlers[index];
					object.detachEvent(index, handler);
				}
				var a = object.attributes, i, l, n;
				if (a) {
					l = a.length;
					for (i = 0; i < l; i += 1) {
						n = a[i].name;
						if (typeof object[n] === 'function') {
							object[n] = null;
						}
					}
				}
				object._handlers = null;
			}
		}
		//alert('recycling...done');
		element = null;
	});
}

最后在构造方法中，绑定menubar实例与清除函数。完成。

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	//...ommitted
		if(Spry.is.ie)
		{
			//... 
 			Spry.Widget.MenuBar.clearLeak(this);
		}
	}
};

参考文章：
JScript Memory Leaks
Understanding and Solving Internet Explorer Leak Patterns
Closures and IE Circular References
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

HTTP Header Status Graph

boin — Wed, 19 Mar 2008 19:02:20 +0800

作者: boin 链接：http://boin.javaeye.com/blog/173871 发表时间: 2008年03月19日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

NICE EXPLIATION!
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Condensed Meyer Reset

boin — Mon, 10 Mar 2008 23:35:39 +0800

作者: boin 链接：http://boin.javaeye.com/blog/170007 发表时间: 2008年03月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding: 0;
	margin: 0;
	}
fieldset, img { 
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before, q:after {
	content: '';
	}
abbr, acronym { 
	border: 0;
	}

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

任何一款拥有socket操作能力的语言都有一个专门用于组包的函数，php也不例外!

boin — Sat, 26 Jan 2008 17:36:13 +0800

作者: boin 链接：http://boin.javaeye.com/blog/159530 发表时间: 2008年01月26日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

用了很久php了却很少有机会用php进行一些二进制操作。最近用php写一个socket客户端连接一个用C++语言开发的游戏服务端。服务器端开发人员使用了二进制的形式来定义协议的格式。协议格式如下：

包头(2bytes)+加密(1byte)+命令码(2bytes)+帧内容

1.包头的内容是记录帧内容的长度;
2. 加密:0表示不加密，1表示加密；
3. 命令码为服务端命令识别符号；

一开始不了解php原来有pack可以来组装二进制包, 走了弯路，让服务端开发人员用C语言帮忙开发了的几个内存操作函数，按照协议规则返回二进制包，然后我将这几个方法编译成一组扩展函数供php使用。

话归正题，本文是介绍如何使用pack和unpack这两个方法的。php官方手册举例太少，不能很容易理解，特别是那些格式化参数的使用。

转摘的参数中文说明：

pack/unpack 的摸板字符字符含义
a 一个填充空的字节串
A 一个填充空格的字节串
b 一个位串，在每个字节里位的顺序都是升序
B 一个位串，在每个字节里位的顺序都是降序
c 一个有符号 char（8位整数）值
C 一个无符号 char（8位整数）值；关于 Unicode 参阅 U
d 本机格式的双精度浮点数
f 本机格式的单精度浮点数
h 一个十六进制串，低四位在前
H 一个十六进制串，高四位在前
i 一个有符号整数值，本机格式
I 一个无符号整数值，本机格式
l 一个有符号长整形，总是 32 位
L 一个无符号长整形，总是 32 位
n 一个 16位短整形，“网络”字节序（大头在前）
N 一个 32 位短整形，“网络”字节序（大头在前）
p 一个指向空结尾的字串的指针
P 一个指向定长字串的指针
q 一个有符号四倍（64位整数）值
Q 一个无符号四倍（64位整数）值
s 一个有符号短整数值，总是 16 位
S 一个无符号短整数值，总是 16 位，字节序跟机器芯片有关
u 一个无编码的字串
U 一个 Unicode 字符数字
v 一个“VAX”字节序（小头在前）的 16 位短整数
V 一个“VAX”字节序（小头在前）的 32 位短整数
w 一个 BER 压缩的整数
x 一个空字节（向前忽略一个字节）
X 备份一个字节
Z 一个空结束的（和空填充的）字节串
@ 用空字节填充绝对位置
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

KOMODO IDE 文档编码问题 (KOMODO document encoding)

boin — Sat, 10 Nov 2007 13:08:07 +0800

作者: boin 链接：http://boin.javaeye.com/blog/139641 发表时间: 2007年11月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

KMODO 是一个非常优秀的IDE，可以用来编写 P 开头的所有语言，当然，C，Java 都可以，只是没有P系列的语言强大而已。 JS的支持也是相当好。:D

回归正题，几乎所有的IDE都会有字符编码问题。KOMODO也不例外。在最新的版本中，已经解决了很多关于编码的问题和bug了，但是还是有些地方不尽人意。比如说，明明你的文档是GBK编码了，但是它还是给你检测为Latin-1(ISO-8859-1)。虽然可以每个文件都可以单独手动设置一次，但是那是多么的麻烦！

好在这个IDE有着及其强大的扩展功能，其中包括自定义脚本(Macro)，可以用Python和Javascript编写。脚本中可以访问komodo的各种设置和当前编辑的文档的属性。然后，通过查询相关API我发现了KOMODO可以动态编辑当前打开的文档的编码。

这不就OK了！

新建一个Macro，敲入

komodo.document.setEncodingFromEncodingName("GBK");

（你也可以根据需要调整 "GBK" 为 "UTF-8" 或者其他编码）
保存，然后设定在所有文档打开的时候运行。
ALL Done！ Have Fun with KOMODO IDE.

附件为脚本安装包(kpz)
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

淘宝的UED招聘试题，来试试

boin — Wed, 19 Sep 2007 16:28:00 +0800

作者: boin 链接：http://boin.javaeye.com/blog/125363 发表时间: 2007年09月19日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

引用

小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。

从这段描述可以得到以下对象：

function Dog() {
this.wow = function() {
alert('Wow');
}
this.yelp = function() {
this.wow();
}
}

小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。

请根据描述，按示例的形式用代码来实现（提示关键字: 继承，原型，setInterval）。

解答：

/****疯狂的小狗...*****/
var MagDog = function(){
    var obj = this;
    return window.setInterval(function(){
	obj.yelp();
    },500)
};
MagDog.prototype = new Dog();
var md = new MagDog();

引用

以下两道题目您可以任选一道：

1.使用纯CSS实现未知尺寸的图片(高宽都小于200px)在200px的正方形容器中同时水平和垂直居中。
2.在不使用 border 样式的情况下，画出一条高为1px的横线，在不同浏览器的Quirksmode和CSSCompat模式下都保持同一效果。

回答：

提问：

引用

请给Array本地对象增加一个原型方法，它的用途是删除数组条目中重复的条目(可能有多个)，返回值是一个仅包含被删除的重复条目的新数组。

回答：

/**** 疯狂的数组 *****/
Array.prototype.distinct = function(){
   var arr = this;
   var distincted = new Array();
   for(var i in arr){
       if(i=='distinct')continue;
       if(distincted.length==0)distincted.push(arr[i]);
       for(var j=0;jdistincted.length-2)distincted.push(arr[i]);
       }
       
   }
   return distincted; 
}

//alert([1,1,1,1,2,2,3,4].distinct())

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

在MySQL中如何为连接添加索引[转]

boin — Tue, 11 Sep 2007 11:37:41 +0800

作者: boin 链接：http://boin.javaeye.com/blog/122845 发表时间: 2007年09月11日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

我先通过一个简单的例子说明在MySQL中如何为连接添加索引，然后再看一个有挑战性的例子。

简单的3个表的连接

表结构很简单，3个表tblA, tblB, tblC，每个表有3个字段：col1, col2, col3。
在没有索引的情况下连接3个表

SELECT
*
FROM
tblA,
tblB,
tblC
WHERE
tblA.col1 = tblB.col1
AND tblA.col2 = tblC.col1;

explain的结果如下：

   +-------+------+---------------+------+---------+------+------+-------------+
   | table | type | possible_keys | key  | key_len | ref  | rows | Extra       |
   +-------+------+---------------+------+---------+------+------+-------------+
   | tblA  | ALL  | NULL          | NULL |    NULL | NULL | 1000 |             |
   | tblB  | ALL  | NULL          | NULL |    NULL | NULL | 1000 | Using where |
   | tblC  | ALL  | NULL          | NULL |    NULL | NULL | 1000 | Using where |
   +-------+------+---------------+------+---------+------+------+-------------+

最后，在MySQL的手册中(7.2.1)：
表以它们在处理查询过程中将被MySQL读入的顺序被列出。MySQL用一遍扫描多次联接（single-sweep multi-join）的方式解决所有联接。这意味着MySQL从第一个表中读一行，然后找到在第二个表中的一个匹配行，然后在第3个表中等等。当所有的表处理完后，它输出选中的列并且返回表清单直到找到一个有更多的匹配行的表。从该表读入下一行并继续处理下一个表。
如手册所说的，MySQL读第一个表(tnlA)，然后第二个(tblB)，然后第三个(tblC)，像explain中输出的一样。先前的表中的值用来查找当前表中的行。在我们的例子中，tblA中的值用来找tblB中的匹配行，然后tblB的值来找tblC的行。当一个完整的扫描结束(在表tblA,tblB,tblC中找到了结果)，MySQL不会返回tblA,它到tblB中查看是否有更多的行匹配当前tblA的值。如果有，它拿出这一行，然后再在tblC中找匹配的。记住 MySQL连接的基本原则是很重要的：先前的表中的值用来查找当前表中的行。

按原理建索引

知道了MySQL使用从tblA中得到的值查找tblB中的行，我们需要怎么建索引来帮助MySQL？为此我们要知道它需要什么。考虑连接tblA和 tblB：它们通过“tblA.col1 = tblB.col1”来连接。我们已经有了tblA.col1的值，所以MySQL需要一个tblB.col1的值来完成等值操作。因此如果MySQL需要tblB.col1，我们就在tblB.col1上加索引。加了之后，这是新的explain结果：

+-------+------+---------------+----------+---------+-----------+------+-------------+
| table | type | possible_keys | key      | key_len | ref       | rows | Extra       |
+-------+------+---------------+----------+---------+-----------+------+-------------+
| tblA  | ALL  | NULL          | NULL     |    NULL | NULL      | 1000 |             |
| tblB  | ref  | ndx_col1      | ndx_col1 |       5 | tblA.col1 |    1 | Using where |
| tblC  | ALL  | NULL          | NULL     |    NULL | NULL      | 1000 | Using where |
+-------+------+---------------+----------+---------+-----------+------+-------------+

如上，MySQL现在使用ndx_col1索引来连接tblB到tblA。就是说，当MySQL要找tblB中的行时，使用了ndx_col1索引通过 tblA.col1的值直接得到匹配的行，而不是像以前需要做表扫描。这就是为什么tblB的ref列说“tablA.col1”。tblC现在还是用表扫描，这可以通过同样的方法解决。查看MySQL的需求：从sql中连接两表的语句“tblA.col2 = tblC.col1”可以看出它需要tblC.col1因为我们已经有了tblA.col2。给这一列加上索引之后explain：

+-------+------+---------------+----------+---------+-----------+------+-------------+
| table | type | possible_keys | key      | key_len | ref       | rows | Extra       |
+-------+------+---------------+----------+---------+-----------+------+-------------+
| tblA  | ALL  | NULL          | NULL     |    NULL | NULL      | 1000 |             |
| tblB  | ref  | ndx_col1      | ndx_col1 |       5 | tblA.col1 |    1 | Using where |
| tblC  | ref  | ndx_col1      | ndx_col1 |       5 | tblA.col2 |    1 | Using where |
+-------+------+---------------+----------+---------+-----------+------+-------------+

更复杂的查询

在实际中不会遇到刚才那种sql。所以你可能更想看看这样的：

SELECT
COUNT(tblB.a_id) as correct,
tblA.type,
tblA.se_type
FROM
tblA,
tblB,
tblC,
tblD
WHERE
tblA.ex_id = tblC.ex_id
AND tblC.st_ex_id = tblB.st_ex_id
AND tblB.q_num = tblA.q_num
AND tblB.se_num = tblA.se_num
AND tblD.ex_id = tblA.ex_id
AND tblD.exp <> tblB.se_num
AND tblB.ans = tblA.ans
AND tblA.ex_id = 1001
AND tblC.r_id = 542
GROUP BY
tblA.type,
tblA.se_type;

乍一看是很复杂的：有4个表，有聚合函数，有9个where条件，还有一个group by。explain的伟大之处在于我们现在可以忽略这些，每次只看两个表，判断每一步MySQL需要什么。这是一个实际的查询，只是字段名有一些改动。explain的结果：

+-------+--------+---------------+---------+---------+---------------+-------+----------------------------------------------+
| table | type   | possible_keys | key     | key_len | ref           | rows  | Extra                                        |
+-------+--------+---------------+---------+---------+---------------+-------+----------------------------------------------+
| tblA  | ALL    | NULL          | NULL    |    NULL | NULL          |  1080 | Using where; Using temporary; Using filesort |
| tblB  | ALL    | NULL          | NULL    |    NULL | NULL          | 87189 | Using where                                  |
| tblC  | eq_ref | PRIMARY       | PRIMARY |       4 | tblB.st_ex_id |     1 | Using where                                  |
| tblD  | eq_ref | PRIMARY       | PRIMARY |       4 | tblA.ex_id    |     1 | Using where                                  |
+-------+--------+---------------+---------+---------+---------------+-------+----------------------------------------------+

判断连接影响的主要看结果集。结果集就是查询的结果。对于连接，一个估计结果集大小的方法是把MySQL预测的读取每个表的行数相乘。作为估计，这样做比较偏向于坏的情况，因为where条件通常会减少很多的行数。但这个查询的结果集有9400万行。这就是没有索引连接很危险的原因；几千行乘几千行你就会有一个上百万的结果集了。
那么现在这个查询需要什么？从tblA和tblB开始。在sql中：

AND tblB.q_num = tblA.q_num
AND tblB.se_num = tblA.se_num
AND tblB.ans = tblA.ans

MySQL 至少需要q_num, se_num, ans中的一个。我选择在se_num和q_num上加索引因为在几乎所有其他的查询中我都会需要它们。折中是优化的一部分，多数人没有时间去为每一个查询找最优的索引方案，只能是找到一个对于大多数情况而言最优的方案。在tblB上加索引(se_num, q_num)，explain的结果：

+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+
| table | type   | possible_keys | key         | key_len | ref                    | rows | Extra                                        |
+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+
| tblA  | ALL    | NULL          | NULL        |    NULL | NULL                   | 1080 | Using where; Using temporary; Using filesort |
| tblB  | ref    | ndx_secn_qn   | ndx_secn_qn |       2 | tblA.se_num,tblA.q_num |  641 | Using where                                  |
| tblC  | eq_ref | PRIMARY       | PRIMARY     |       4 | tblB.st_ex_id          |    1 | Using where                                  |
| tblD  | eq_ref | PRIMARY       | PRIMARY     |       4 | tblA.ex_id             |    1 | Using where                                  |
+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+

现在结果集下降了99.3%变为692280行。但为什么要停在这里？我们可以很容易的解决tblA的表扫描。因为它是第一个表，我们并不需要为连接加索引，这在tblB上已经做过了。一般来说，给第一个表加索引可以把它当成只在这一个表上查询的情况。在这个例子中很幸运，tblA是："AND tblA.ex_id = 1001"。我们只需要加ex_id索引：

+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+
| table | type   | possible_keys | key         | key_len | ref                    | rows | Extra                                        |
+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+
| tblA  | ref    | ndx_ex_id     | ndx_ex_id   |       4 | const                  |    1 | Using where; Using temporary; Using filesort |
| tblB  | ref    | ndx_secn_qn   | ndx_secn_qn |       2 | tblA.se_num,tblA.q_num |  641 | Using where                                  |
| tblC  | eq_ref | PRIMARY       | PRIMARY     |       4 | tblB.st_ex_id          |    1 | Using where                                  |
| tblD  | eq_ref | PRIMARY       | PRIMARY     |       4 | tblA.ex_id             |    1 | Using where                                  |
+-------+--------+---------------+-------------+---------+------------------------+------+----------------------------------------------+

现在结果集是641行。相比开始的9400万，可以说了下降了100%。如果继续研究这个查询我们还可以去掉temp table和filesort，但现在查询已经很快了，也已经说明了如何为连接加索引。尽管最初看这个查询很麻烦，但可以看到只要每次独立的看两张表，为 MySQL的需求加索引，整个过程并不困难。

结论

为复杂的连接加索引要认识到两件事：

1. 不管sql多复杂，每次只看explain中的两个表

2. 先前表中的值已经有了，我们的工作就是通过索引帮助MySQL在当前表中使用这些值来找到匹配行
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

The this Keyword in JavaScript

boin — Mon, 10 Sep 2007 17:06:00 +0800

作者: boin 链接：http://boin.javaeye.com/blog/122569 发表时间: 2007年09月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

JavaScript this 关键字

翻译自PPK Book

this 是 JavaScript 中很强大的关键字之一。但是不幸的是，如果你不能完全明白它的特征和用法的话，你可能会在使用的时候碰到很多问题。

本文从事件响应的列子开始，来试图说明this关键字的用法和一些知识。

Owner(宿主)

在余下的篇幅中，我们会一直围绕着一个函数来讨论，doSomething()，在这个方法中，this到底指向什么?

function doSomething() {
   this.style.color = '#cc0000';
}

在JavaScript中this是始终指向正在被执行的方法的“owner”(宿主)，或者是包含这个方法的对象本身。如果我们在某个页面中定义了一个doSomething()函数，那么这个方法的owner则是这个页面，即当前window对象或JavaScript的全局对象。举个例子来说：一个“onclick”属性是被包含于某个HTML元素中的，那这个属性的owner就是这个HTML元素。

ownership(存在关系)是JavaScript的面向对象模型的产物。实际上对象都是以关联数组的形式来组织的。

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          --------------------                          |
|          | onclick property |                          |
|          --------------------                          |
|                                                        |
----------------------------------------------------------

当我们不做任何准备直接执行doSomething()函数的话，此时this是指向window对象的，然后方法试图改变window对象的style.color，当然，此时window对象并不存在这样一个style对象，所以该函数执行失败，并抛出一个JavaScript错误。

Copying(拷贝)

如果我们想要这个函数正常工作的话，我们就要让这个函数被包含在正确的HTML对象中。
换句话来说，就是我们要把这个函数“拷贝”到onclick属性上。然后传统的事件注册模型会自动处理余下的工作。

element.onclick = doSomething;

这段代码把整个doSomething()函数拷贝到了某个HTML元素的onclick属性上(然后这个函数变成了一个成员方法)这时再单击该HTML元素时，事件响应会自动调用onclick属性绑定的方法，此时this已经指向了该HTML对象，然后方法顺利执行，改变了element元素的原色。

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

我们可以把这个函数拷贝到很多个HTML对象的事件响应函数中。然后每次运行的时候this就会指向正确的HTML对象。

------------ window --------------------------------------
|                                                        |
|                                                        |
|                                                        |
|   ----------------                                     |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------          |            |
|                                           |            |
|   -----------------------                 |            |
|   | another HTML element| <-- this        |            |
|   -----------------------     |           |            |
|               |               |           |            |
|          -----------------------          |            |
|          |copy of doSomething()|  <-- copy function    |
|          -----------------------                       |
|                                                        |
----------------------------------------------------------

做完所有拷贝后，当函数被执行时，this就被自动指向到正确的响应这个事件的HTML对象上了，此时该HTML对象就包含了doSomething()这个函数的拷贝。

Referring(引用)
你还可以使用inline(内联)的方式来绑定这个函数，即在HTML文档中对HTML元素制定onclick属性。

记住，此时你并没有拷贝这个函数！你只是指向了这个函数，这个差异是很不容忽视的。这时onclick属性并没有包含这个方法，只是包含了对这个方法的一个调用。

doSomething();

此时当元素被单击时，代码的动作是“找到doSomething()方法，然后执行”。然后当我们找到并执行doSomething()方法时，this又被指向到了全局window对象，函数就会产生错误。

------------ window --------------------------------------
|                                          / \           |
|                                           |            |
|                                          this          |
|   ----------------                        |            |
|   | HTML element | <-- this         -----------------  |
|   ----------------      |           | doSomething() |  |
|               |         |           -----------------  |
|          -----------------------         / \           |
|          | go to doSomething() |          |            |
|          | and execute it      | ---- reference to     |
|          -----------------------       function        |
|                                                        |
----------------------------------------------------------

The difference(区别)

如果你要在事件响应中用this来访问HTML元素的话，你就必须保证this关键字已经写入到了onclick属性中。只有这样才能让this正确的指向HTML对象。所以你执行以下代码时：

element.onclick = doSomething;
alert(element.onclick)

你会得到

function doSomething()
{
	this.style.color = '#cc0000';
}

就像alert的结果所展示的，this关键字已经存在于onclick方法中了，于是它就指向到了该HTML元素。

如果这样做：


alert(element.onclick)

你会得到

function onclick()
{
	doSomething()
}

这只是一个包含doSomething()函数的调用，this关键字并不存在于onclick方法中，当然也不会指向HTML对象。

示例 - copying

下列情形中，this已经被写入了onclick方法：

element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}

示例 - referring
下列情形中，this指向的是window对象：

element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)

注意attachEvent()这个方法。微软事件注册模型的主要缺点是attachEvent()只是创建一个函数的引用，而并没有拷贝函数。因此，有些时候它是完全不知道目前的事件是绑定在哪个HTML对象的。

Combination(结合)

当你使用内联方式注册事件时，你可以指定this引用作为参数传递给响应方法。


function doSomething(obj) {
	// this是存在于这个方法中的，只不过名字变成了obj
	// obj此时就指向了正确的HTML对象，然后我们就可以继续操作了
	obj.style.color = '#cc0000';
}

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Smarty in PHP

boin — Mon, 10 Sep 2007 14:08:57 +0800

作者: boin 链接：http://boin.javaeye.com/blog/122561 发表时间: 2007年09月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

PHP 模板框架Smarty。

正在体验中...
本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

caller,callee,call,apply in Javascript

boin — Mon, 10 Sep 2007 14:05:02 +0800

作者: boin 链接：http://boin.javaeye.com/blog/122560 发表时间: 2007年09月10日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

一直对Javascript中的这几个概念比较模糊。最近在网上仔细翻查资料，思考整理出文章一篇。主要来自互联网，作者佚名。

在提到上述的概念之前，首先想说说javascript中函数的隐含参数：arguments

arguments

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

[function.]arguments[n]

参数function ：选项。当前正在执行的 Function 对象的名字。 n ：选项。要传递给 Function 对象的从0开始的参数值索引。
说明

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

//arguments 对象的用法。
function ArgTest(a, b){
   var i, s = "The ArgTest function expected ";
   var numargs = arguments.length;     // 获取被传递参数的数值。
   var expargs = ArgTest.length;       // 获取期望参数的数值。
   if (expargs < 2)
      s += expargs + " argument. ";
   else
      s += expargs + " arguments. ";
   if (numargs < 2)
      s += numargs + " was passed.";
   else
      s += numargs + " were passed.";
   s += "\n\n"
   for (i =0 ; i < numargs; i++){      // 获取参数内容。
   s += "  Arg " + i + " = " + arguments[i] + "\n";
   }
   return(s);                          // 返回参数列表。
}

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

Array.prototype.selfvalue = 1;
alert(new Array().selfvalue);
function testAguments(){
    alert(arguments.selfvalue);
}

运行代码你会发现第一个alert显示1，这表示数组对象拥有selfvalue属性，值为1，而当你调用函数testAguments时，你会发现显示的是“undefined”，说明了不是arguments的属性，即arguments并不是一个数组对象。

caller
返回一个对函数的引用，该函数调用了当前函数。

functionName.caller

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

// caller demo {
function callerDemo() {
    if (callerDemo.caller) {
        var a= callerDemo.caller.toString();
        alert(a);
    } else {
        alert("this is a top function");
    }
}
function handleCaller() {
    callerDemo();
}

callee

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

[function.]arguments.callee

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

说明

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

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

示例

//callee可以打印其本身
function calleeDemo() {
    alert(arguments.callee);
}
//用于验证参数
function calleeLengthDemo(arg1, arg2) {
    if (arguments.length==arguments.callee.length) {
        window.alert("验证形参和实参长度正确！");
        return;
    } else {
        alert("实参长度：" +arguments.length);
        alert("形参长度： " +arguments.callee.length);
    }
}
//递归计算
var sum = function(n){
  if (n <= 0)                       
  return 1;
  else
    return n ＋arguments.callee(n - 1)
}
//比较一般的递归函数：
var sum = function(n){
    if (1==n) return 1;
else return n + sum (n-1);

调用时：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应用另一个函数（类）以后，当前的
函数（类）就具备了另一个函数（类）的方法或者是属性，这也可以称之为“继承”。看下面示例:

// 继承的演示
function base() {
    this.member = " dnnsun_Member";
    this.method = function() {
        window.alert(this.member);
    }
}
function extend() {
    base.call(this);
    window.alert(member);
    window.alert(this.method);
}

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

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

其实现代码如下：

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

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

示例：

var vehicle=Class.create();
vehicle.prototype={
    initialize:function(type){
        this.type=type;
    }
    showSelf:function(){
        alert("this vehicle is "+ this.type);
    }
}

var moto=new vehicle("Moto");
moto.showSelf();

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐

Gucci Shop页面调用流程和API说明

boin — Tue, 04 Sep 2007 23:56:32 +0800

作者: boin 链接：http://boin.javaeye.com/blog/120374 发表时间: 2007年09月04日

声明：本文系JavaEye网站发布的原创博客文章，未经作者书面许可，严禁任何网站转载本文，否则必将追究法律责任！

Gucci Shop页面调用流程和API说明

本说明适用于：架构人员，前台、后台开发人员，假定阅读者已经拥有html，css，js，dom的基础知识。
该站点基于 prototypejs 和 scriptaculous 两个js框架实现，如果要深入研究，必要该框架的相关知识。

1. 目录和文件说明

/根目录：

此目录存放index.html和此说明文件

/images目录：

此目录存放需要的图片

/scripts目录：

此目录存放所有JS脚本文件

/lib目录：

此目录存放JS框架，一般不需要改动

app.js 站点全局定义，存放全局变量和公共方法，一般不需要改动。
debug.js 模拟了Ajax对服务端请求详细信息返回的数据，作为demo显示使用。
debug_format.js 对debug.js做了分析和精简，加入了注释。
ext.js 对lib目录中的JS框架的扩展，增加若干多功能，一般不需要改动。
localize.js 检测访客语言，并跳转至相应的页面。
menu-us.js 菜单文字定义，和多国语言定义（此文件为剥离的默认英文定义）
product.js 产品定义（此文件从页面中剥离）
shop.js 核心js，定义所有页面脚本动作，扩展重点
zoom.js 缩放组件，定义图片缩放操作。

/stylesheets目录：

此目录存放css样式表

2. 系统流程分析

index.html 是一个文件模板，一般由程序生成。
在输出的页面中，根据要显示的产品数量和排列方式在div#content中生成若干个lightbox块，如果一共有20个产品，排列模式是2X3，那么生成4个lightbox的div比较合适
div#content起始代码：



模板循环代码

//定义一个lightbox区域（重要概念，后续JS的所有操作都针对这个lightbox的div来进行），排模式法是2x3（2行3列）

//在div的类名中说明

  //包围容器，用来定义美丽的样式

      //定义1个lightbox中显示6个产品

  //定义一个带阴影的层，作为间隔

//两个lightbox中的间隔

输出完模板以后，以JS对象的方式开始输出数据。demo用列已经把页面输出的js代码放到了product.js文件中，方便分析阅读。输出完数据以后，调用代码 Shop.initialize() 进行解析并且初始化。详细初始化流程请阅读源代码内注释。 (见产品列表API)

页面输出主要完成：

1. 生成lightbox模板框架

2. 生成产品列表内容

页面初始化主要完成：

3. 解析menu.js生成菜单

4. 解析products.js生成显示内容

5. 绑定事件，如菜单单击事件，lightbox中图片单击事件等

初始化完成以后，就可以点击图片查看产品详细资料，在页面初始化过程中已经为每个lightbox生成详细了详细资料显示区域并且已经循环分配了id。

 
 //图片显示区域，循环分配id

 
 //说明显示区域

 
 //同种商品不同款式的显示区域

 
 //尺码选择，购物按钮区域

点击图片后调用Shop.showProduct()方法，显示以上详细资料显示区域，然后使用Ajax取得该产品的详细资料，并且调用 Shop.selectStyle() 方法填充详细资料并且显示。
demo中的 debug.js 是模拟了一个Ajax请求的返回代码，便于离线分析。
debug.js 返回了该特定商品的id，说明、和图片信息，并且初始化了详细信息数据，并且显示。详细流程请阅读 debug_format.js 代码内注释。 (见详细内容API)

Ajax请求的页面主要输出：

6. 该商品的详细资料。

7. 更新了产品详细内容。

Ajax输出页面中的脚本主要完成：

8. 更新了详细内容模板div中的内容。

9. 解析产品数据，生成旋转图片演示。

3. 数据结构和API

页面内所有产品列表

商品列表定义了所有商品。可以在页面中输出灵活控制，也可以包含在外部js中（网站中是输出在页面内，demo把数据从页面内分离到了 product.js 中）。

商品列表是一个对象数组。组织形式为：

products = [ product1, product2, ... , productN ];

商品是一个对象，对象模型为：product = { id: 'String', sorts: [Array], thumburl: 'String', lowlighturl: 'String', thumbOptions: 'String', lowlightOptions: 'String'}

product 对象类型说明
属性名	属性类型	是否必须	附加说明
id	字符串	是	商品id
sorts	数组		该商品属于的类别，允许多个，用于分类显示
thumburl	字符串	是	缩略图地址
lowlighturl	字符串		当列表被分类显示，不在当前分类的商品的低亮度图片，参考页面显示效果
thumbOptions	字符串		当请求服务器时，是否需要携带特别的参数
lowlightOptions	字符串		当请求服务器时，是否需要携带特别的参数

附加说明：

1. 由于源站点的图片输出是用的scene7.com 的整体解决方案，图片参数有严格要求并且复杂，实际开发中可给非必须属性赋予空值

2. 具体格式可以参考product.js，如有错误以js内容的结构为准

3. 关于排序，只要在导航条设置class="欲排序的类别名称(对应sorts数组中的值)" 然后绑定onclick事件为 Shop.selectSort(this) 就好了，但是要提供lowlighturl，不然看不出效果。

例如：a onclick="Shop.selectSort(this); return false" class="sneakers" href="#" _fcksavedurl="#">sneakers

产品详细信息输出
详细信息在点击图片时触发事件 shop.js#443::showProduct() Ajax请求服务器返回产品详细信息，然后处理。实际处理中可以使用ajax，也可以用自定义JS。
服务端返回的数据是产品详情对象数组，
组织形式为： Styles = [ style1, style2, ... , styleN ];
产品详情是一个对象，对象模型为：
Style = { style: 'String', images: { front: { is360: Integer, full: 'String', zoom: 'String', miniThumb: 'String', sku: { sku: 'String', size: 'String' } }
其中 images 对象：images = { front : {Object} }
其中 front 对象：front = { is360: Integer, full: 'String', zoom: 'String', miniThumb: 'String', sku: { Object } }
其中 sku 对象：sku = { sku: 'String', size: 'String' }

Style 对象类型说明
属性名	属性类型	是否必须	附加说明
style	字符串	是	编号，对应某个商品的不同型号（子类别）
style.images.front.is360	整数	是	是否可旋转图片？如果不是，请赋值0
style.images.front.full	字符串		360°完整图片的地址
style.images.front.zoom	字符串		大（完整）图地址
style.images.front.miniThumb	字符串		缩略图地址
style.images.front.sku.sku	字符串		型号名称此项一般不定义，原版页面实现特别复杂
style.images.front.sku.size	字符串		型号值此项一般不定义，原版页面实现特别复杂

附加

本文的讨论也很精彩，浏览讨论>>

JavaEye推荐