<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>哈哈小老虎&#039;s Blog</title>
	<atom:link href="http://www.mytcer.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.mytcer.com</link>
	<description></description>
	<lastBuildDate>Thu, 19 Aug 2010 12:46:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>【学习笔记】执行上下文</title>
		<link>http://www.mytcer.com/688</link>
		<comments>http://www.mytcer.com/688#comments</comments>
		<pubDate>Sat, 24 Jul 2010 14:37:01 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[ecmascript]]></category>
		<category><![CDATA[执行上下文]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=688</guid>
		<description><![CDATA[
一. 什么是执行上下文？
执行上下文是一个代码环境，当代码被执行时，JS引擎可以在这个环境中确定变量/函数标识符/函数形参/属性的值。当JS引擎开始执行代码时，即会进入到相应的执行上下文中。



二. 执行上下文的特点
活动的执行上下文在逻辑上组成一个堆栈，堆栈的底部永远都是全局上下文，堆栈顶部是当前的执行上下文。


三. 执行上下文的类型
执行上下文与可执行代码密切相关，可执行代码的类型不同，对应的执行上下文也不同。在ECMAScript中，可执行代码有三种：全局代码；函数代码；eval代码，让我们来看看这三种代码对应的执行上下文长啥样？

1. 全局代码
全局代码不包括任何函数体内的代码。当全局代码被执行时，会进入全局上下文，此时，执行上下文堆栈是这个样子：

// 用ECStack表示执行上下文堆栈
ECStack = [globalContext];



2. 函数代码
具体的函数代码不包括内部函数的代码。当函数代码被执行时(所有类型的函数)，执行上下文堆栈被推入新元素&#8211;函数上下文，函数执行完毕后，函数上下文从堆栈中被移除：

// 示例：
function foo() {alert('hello');}
foo();

ECStack的变化过程为：

(1) 进入全局上下文，ECStack = [globalContext]
ECStack.push(globalContext);

(2) 执行foo，ECStack = [fooFunctionContext, globalContext]
ECStack.push(fooFunctionContext);

(3) foo执行完毕，ECStack = [globalContext]
ECStack.pop();



3. eval代码
当eval代码被执行时，会产生一个调用上下文，它是对eval所在执行上下文的一个引用，eval执行时产生的变量只能在这个调用上下文中访问，当eval执行完毕时，调用上下文从上下文堆栈中被移除：

// 示例：
eval('var x = 10');
(function foo() {
  eval('var y = 20');
  alert(y); // 20
})();

alert(x); // 10
alert(y); // y is not defined

分析：eval(&#8216;var x = 10&#8242;)是在全局上下文中调用的，其调用上下文是全局上下文，故而alert(x)输出结果为10；eval(&#8216;var y = 20&#8242;)是在foo函数中被调用的，其调用上下文是foo函数上下文，故而只能在foo函数上下文中访问。整个过程中，上下文堆栈的变化如下：

(1) 进入全局上下文，ECStack = [globalContext];
ECStack.push(globalContext);

// 这里有3个疑问：
// [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/688/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>IE7 bug：浮动元素无法自动换行</title>
		<link>http://www.mytcer.com/680</link>
		<comments>http://www.mytcer.com/680#comments</comments>
		<pubDate>Thu, 27 May 2010 13:42:26 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Css]]></category>
		<category><![CDATA[float]]></category>
		<category><![CDATA[IE7]]></category>
		<category><![CDATA[line]]></category>
		<category><![CDATA[自动换行]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=680</guid>
		<description><![CDATA[
项目中，一不留神就碰到了这个bug，虽未找到根本原因，但还是先和大家分享一下。。。



一. 重现bug
重现条件：当一个容器中的所有子元素被浮动，未显示的设置子元素宽度，且将元素设置为溢出隐藏，我们来看看具体的code：

// html：
&#60;ul&#62;
    &#60;li&#62;我是第一项&#60;/li&#62;
    &#60;li&#62;我是第二项二项&#60;/li&#62;
    &#60;li&#62;我是第三项三项三项&#60;/li&#62;
    &#60;li&#62;我是第四项四项四项四项&#60;/li&#62;
&#60;/ul&#62;

// css：
* {
    margin: 0;
    padding: 0;
}
ul {
    width: 400px;
    overflow: hidden;
    margin: 20px auto;
    padding: 10px;
   [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/680/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>探秘数组的push方法</title>
		<link>http://www.mytcer.com/667</link>
		<comments>http://www.mytcer.com/667#comments</comments>
		<pubDate>Tue, 25 May 2010 14:33:09 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[length]]></category>
		<category><![CDATA[push]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=667</guid>
		<description><![CDATA[
今天看到下面这段有趣的代码(据说是出自jQuery的作者哦)，让我对push方法的执行机制产生了兴趣，决定一探究竟。。。

var elems = {
     length: 0,
     add: function(elem) {
          Array.prototype.push.call(this, elem);
     }
};




一. 疑问
在上段代码中，通过elems.add添加东西后，elems对象会变成了啥样呢？为什么要指定length属性？我们来操作看看：

// 分别打印出初始状态和操作后的elems，方便对比
console.dir(elems);
elems.add(1);
elems.add(2);
console.dir(elems);

结果如下图：

我们看到：元素被成功添加(各浏览器均如此)，且elems对象的length属性值发生了改变，其值即为添加项的数量，为什么会这样？？？


二. 解惑
看来一切都和push方法有关，我们到MDC中看看push方法的相关说明，我们着重看看下面几点说明：

(1) This method can be called or applied to objects resembling arrays；
理解：类数组的对象可以通过call或apply方法来调用push方法. (这里的类数组对象，指的应该是拥有length属性的对象，不过函数和字符串是个例外，这个后面再讲)


(2) The return value of this method is [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/667/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>&#8220;模拟mouseenter和mouseleave&#8221;的前因后果</title>
		<link>http://www.mytcer.com/661</link>
		<comments>http://www.mytcer.com/661#comments</comments>
		<pubDate>Fri, 21 May 2010 09:53:01 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[mouseenter]]></category>
		<category><![CDATA[mouseleave]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=661</guid>
		<description><![CDATA[
这个话题，之前已经聊过一次，昨天和同事再次聊起时，发现自己理解的依然不够透彻，决定重新整理一次，我想从以下几个方面聊下自己的理解：
1. mouseenter和mouseleave何时被触发？
2. 与mouseover和mouseout的区别是什么？
3. 为什么要模拟？
4. 如何模拟？



一. mouseenter和mouseleave何时被触发
我们来看下官方解释(mouseenter，mouseleave)：

// onmouseenter：
Fires when the user moves the mouse pointer inside the boundaries of an object.
即：当鼠标移入元素对象的边界之内时，激活该事件

// onmouseleave：
Fires when the user moves the mouse pointer outside the boundaries of the object.
即：当鼠标移出元素对象的边界之外时，激活该事件



二. 与mouseover和mouseout的区别
官方站点在介绍mouseenter和mouseleave时，同时说明了与mouseover和mouseout的不同：

// onmouseenter vs onmouseover
Unlike the onmouseover event, the onmouseenter event does not bubble. In other words, the onmouseenter event does not [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/661/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>传统事件注册模式在FF中的怪异表现</title>
		<link>http://www.mytcer.com/624</link>
		<comments>http://www.mytcer.com/624#comments</comments>
		<pubDate>Tue, 04 May 2010 14:04:30 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[事件]]></category>
		<category><![CDATA[事件注册]]></category>
		<category><![CDATA[传统事件注册模式]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=624</guid>
		<description><![CDATA[
在上一篇文章的评论中，释然提出了一个很有趣的问题，查阅了一些资料，这里分享下。。。



一. 有趣的问题

// example 1
document.onclick = function() {
alert(‘cecilia’);
}
E.on(document, ‘click’, function() {
alert(‘notify’);
});
document.onclick = function() {
alert(‘handler’);
}
E.on(document, ‘click’, function() {
alert(‘jolin’);
});

在各浏览器下的执行情况：
(1) IE6/7/8：handler -> jolin -> notify
(2) FF：handler -> notify -> jolin
(3) webkit, opera：notify -> handler -> jolin


// example 2
E.on(document, ‘click’, function() {
alert(‘notify’);
});
document.onclick = function() {
alert(‘handler’);
}
E.on(document, ‘click’, function() {
alert(‘jolin’);
});

在各浏览器下的执行情况：
(1) IE6/7/8：handler -> jolin -> notify
(2) FF：notify -> handler -> jolin
(3) webkit, opera：notify [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/624/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE对事件监听程序的&#8221;胡乱执行&#8221;</title>
		<link>http://www.mytcer.com/607</link>
		<comments>http://www.mytcer.com/607#comments</comments>
		<pubDate>Fri, 30 Apr 2010 16:39:18 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[attachEvent]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[监听程序执行顺序]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=607</guid>
		<description><![CDATA[
今天，有个同事遇到这样的问题：IE下，给某个事件添加多个监听程序，在事件被激活时，监听程序没有按照添加顺序执行，但其他浏览器下却会按序执行，杯具。。。



一. 示例

// 基于YUI
var E = YAHOO.util.Event;
E.on(document, 'click', function() {
      alert(1);
});
E.on(document, 'click', function() {
      alert(2);
});
E.on(document, 'click', function() {
      alert(3);
});

我机器上(winxp)，各浏览器下的显示顺序:
(1) IE6：2,3,1
(2) IE7/8：3,2,1
(3) 非IE：1,2,3



二. 相关资料
在msdn上找到了一份关于attachEvent方法的官方说明，文章的Remarks部分对上例中的问题作出了说明：

If you attach multiple functions to the same event on the same object, the functions are called in random [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/607/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>【IE BUG】被relative吓傻的overflow</title>
		<link>http://www.mytcer.com/579</link>
		<comments>http://www.mytcer.com/579#comments</comments>
		<pubDate>Mon, 05 Apr 2010 10:16:33 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Css]]></category>
		<category><![CDATA[IE bug]]></category>
		<category><![CDATA[overflow]]></category>
		<category><![CDATA[relative]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=579</guid>
		<description><![CDATA[
一. bug自述
我不会随便吓唬人：我只吓IE6, 7；
我的出场费也蛮高哦：给父元素A显示设定一个高度，并设置overflow（3个属性值均会失效），然后将其子元素B（inline的，block的，都可以哦）设置为相对定位。
如果这些你都能做到（你是怎么做到的？），那么：hi，很高兴认识你！



二. bug真人秀

&#60;div&#62;&#60;p&#62;哇，淫荡的真人秀终于开始咯，好期待哦！！！&#60;/p&#62;&#60;/div&#62;

div {
     width: 200px;
     height: 100px;
     overflow: auto;
     border: 1px solid #36c;
}
div p {
     position: relative;
     height: 200px;
     background: #ccc;
}

// 此时，p元素完全溢出，即使设置div的overflow为hidden也是如此



三. bug生活照



四. 如何fix？
（1）给div设置position: relative，但这依然要确保div的父元素不会出现同样的情况。


五. [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/579/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>利用字符串实现数组的复杂排序</title>
		<link>http://www.mytcer.com/562</link>
		<comments>http://www.mytcer.com/562#comments</comments>
		<pubDate>Sat, 27 Mar 2010 14:38:57 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[字符串比较]]></category>
		<category><![CDATA[数组排序]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=562</guid>
		<description><![CDATA[
一. 场景
有这样一个数组：

[
   {inuse: '0', order: 10},
   {inuse: '1', order: 10},
   {inuse: '0', order: 9},
   {inuse: '1', order: 8},
   ...
]


现在需要根据inuse和order的值进行排序，排序规则是：inuse为&#8217;0&#8242;的数据排在前面，为‘1’的排在后面，且为&#8217;0&#8242;和&#8217;1&#8242;的数据还要按照order的大小进行降序排列，预期结果如下：

[
   {inuse: '1', order: 10},
   {inuse: '1', order: 8}，
   {inuse: '0', order: 10},
   {inuse: '0', order: 9},
   [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/562/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>学习笔记：JS运算符 &#8212; 其它运算符</title>
		<link>http://www.mytcer.com/534</link>
		<comments>http://www.mytcer.com/534#comments</comments>
		<pubDate>Mon, 15 Mar 2010 12:59:28 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[delete]]></category>
		<category><![CDATA[typeof]]></category>
		<category><![CDATA[void]]></category>
		<category><![CDATA[逗号]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=534</guid>
		<description><![CDATA[
一. delete运算符

1. 它用于删除对象的属性或方法，数组元素。对于一个对象来说，继承来的属性或方法是无法删除的。



// 被删除的属性是继承的，该属性是用户定义的
function a() {}
a.prototype.name = 'aa';
var b = new a();
alert(b.name); // 'aa'
delete b.name;
alert(b.name); // 'aa'，name属性无法被删除


// 被删除的属性是继承的，该属性是原生的
var obj = {name: 'changtian'};
delete obj.toString;
alert(obj.toString); // function toString() {[native code]}，toString方法无法被删除


2. 用户定义的变量无法被删除


var a = 1;
function b() {};
delete a;
delete b;
alert(a); // 1，变量a无法被删除
alert(b); // function b() {}，变量b无法被删除


// 老外出的测试题
(function(x){
    delete x;
    alert(x); // 输出1, x的值是无法被删除的
})(1);


3. [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/534/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>学习笔记：JS运算符 &#8212; 位运算符</title>
		<link>http://www.mytcer.com/544</link>
		<comments>http://www.mytcer.com/544#comments</comments>
		<pubDate>Sun, 14 Mar 2010 14:18:47 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[Js]]></category>
		<category><![CDATA[位运算符]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=544</guid>
		<description><![CDATA[
一. 按位与运算符（&#038;）

1. 该运算符对它的运算数逐位执行布尔AND操作，只有两个运算数中相应的位都为1时，结果中的这一位才为1，它要求其运算数为整型，如果运算数不是整型，则会尝试将其转换为32位整型，如果无法转换，就返回NaN。



// 运算数均为整型
alert(9 &#038; 9); // 9
alert(9 &#038; 10); // 8
alert(1 &#038; 3); // 1

// 运算数可以被转换为整型
alert([9] &#038; '9'); // 9
alert([9] &#038; ['10']); // 8
alert(1.25 &#038; 3.25); // 1

// 一个或两个运算数均无法被转换整型
alert(1 &#038; ['a']); // 0
alert({} &#038; /\d/); // 0
alert(NaN &#038; NaN); // 0
alert(Infinity &#038; Infinity); // 0
alert(NaN &#038; Infinity); // 0
alert(null &#038; null); // 0
alert(undefined &#038; [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/544/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
