<?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 &#187; JS</title>
	<atom:link href="http://www.mytcer.com/category/js/feed" rel="self" type="application/rss+xml" />
	<link>http://www.mytcer.com</link>
	<description></description>
	<lastBuildDate>Sat, 31 Dec 2011 15:42:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>关于本地存储的几个小TIP</title>
		<link>http://www.mytcer.com/865</link>
		<comments>http://www.mytcer.com/865#comments</comments>
		<pubDate>Sat, 23 Apr 2011 12:44:57 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[localStorage]]></category>
		<category><![CDATA[userData]]></category>
		<category><![CDATA[本地存储]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=865</guid>
		<description><![CDATA[一. 本地存储只能同源共享数据 1. 对于localStorage，只要源（源 = 协议 + 主机名 + 端口号）相同即可共享数据； 2. 对于userData，则需要源和目录都相同时，才能共享数据。 // test.example.com/set.htm，假设oStorage为封装了localStorage和userData的对象 oStorage.setItem('tkey', 'tvalue'); // test.example.com/test/get.htm alert(oStorage.getItem('tkey')); // localStorage返回tvalue，userData返回null // test.example.com/get.htm alert(oStorage.getItem('tkey')); // localStorage与userData均返回tvalue 二. 用户代理会为每个源分配一个独立的存储区域 1. 对于localStorage，W3C推荐用户代理为每个源分配至少5MB的存储区域（IE8+目前是10MB）； 2. 对于userData，存储区域的大小受用户浏览器安全设置的影响，详见这里。 三. 设置document.domain也无法跨子域共享数据 1. 对于localStorage与userData，均是如此。 // test1.example.com/set.htm，假设oStorage为封装了localStorage和userData的对象 document.domain = 'example.com'; oStorage.setItem('tkey', 'tvalue'); // test2.example.com/get.htm document.domain = 'example.com'; alert(oStorage.getItem('tkey')); // localStorage与userData均返回null 四. 在页面A中设置userData的expires属性后，再次访问与A同源同目录的其他页面时（包括A自己），IE会清除通过userData保存的持久化数据。 // 页面A： [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/865/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>ES-262学习笔记：new操作符的工作原理</title>
		<link>http://www.mytcer.com/847</link>
		<comments>http://www.mytcer.com/847#comments</comments>
		<pubDate>Wed, 12 Jan 2011 14:50:52 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[ECMAScript]]></category>
		<category><![CDATA[new]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=847</guid>
		<description><![CDATA[写代码时，时不时会用到new操作符，作为new的”常客”，弄清楚它的工作原理，是必须的。。。 一. 工作原理图解 // 以下面的代码为例 function F() {...} var f = new F(); 二. 关于new的几个注意点 1. 如果new的操作数不是构造函数，运行时会抛出TypeError。 var f = new {}; // "TypeError: ({}) is not a constructor"，来自FF的错误提示 2. 通过new创建的实例，其原型可能是Object.prototype或者构造函数的prototype属性。 exam 1：构造函数的prototype属性是一个对象，此时，实例的原型为构造函数的prototype属性 var oProto = {}; function F() {} F.prototype = oProto; var f = new F(); alert(f.__proto__ === oProto); // true，请在非IE下运行该代码，IE目前还没有__proto__属性 exam 2: [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/847/feed</wfw:commentRss>
		<slash:comments>2</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[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 the new length property of [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/667/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>“模拟mouseenter和mouseleave”的前因后果</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 [...]]]></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’, [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/624/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE对事件监听程序的”胡乱执行”</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 [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/607/feed</wfw:commentRss>
		<slash:comments>14</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}, ... ] 二. 我的解决思路 排序规则的特点：先比较inuse的大小，如果inuse的值相同，再继续比较order的大小，这个比较特点是不是让你觉得非常熟悉，像什么？对，就是字符串比较（逐位比较），说到这里，方法已很明确，即将inuse和order值进行连接，然后对连接后的值进行比较即可，如下： &#60;script&#62; var arr = [ {inuse: '0', order: 10}, {inuse: [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/562/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>学习笔记: JS运算符的优先级</title>
		<link>http://www.mytcer.com/468</link>
		<comments>http://www.mytcer.com/468#comments</comments>
		<pubDate>Sat, 27 Feb 2010 12:24:25 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[运算符的优先级]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=468</guid>
		<description><![CDATA[Nicholas C. Zakas的测试题中，有部分是关于JS运算符的, 一番测试下来，发现对运算符的知识点掌握的不够好，所以决定整理下运算符的知识，这篇先整理运算符的优先级。 一. 运算符的优先级（优先级由高到低，相同优先级按照从左到右执行） 二. 尼大叔的测试题 var num1 = 5, num2 = 10, result = num1+++num2; 问题: num1, num2, result的值分别是多少? 说明: +++不是一个有效的运算符, 由于++的优先级要高于+, JS引擎会将+++解释成++ +, 即先执行num1++, 然后再把表达式num1++的值和num2的值相加, 故而三者的值为6, 10, 15.]]></description>
		<wfw:commentRss>http://www.mytcer.com/468/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>学习笔记: JS变量声明与arguments对象的特点</title>
		<link>http://www.mytcer.com/444</link>
		<comments>http://www.mytcer.com/444#comments</comments>
		<pubDate>Mon, 01 Feb 2010 15:04:19 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[arguments对象]]></category>
		<category><![CDATA[变量声明]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=444</guid>
		<description><![CDATA[最近看了NCZ的Answering Baranovskiy’s JavaScript quiz，文章通过具体的例子说明了变量声明，arguments对象，this的特点，我对变量声明和arguments对象的理解较浅，这里整理一下我对这两个知识点的理解&#8230; 一. javascript引擎会将变量声明”放到”所有语句的前面，优先解释(传说中的预编译)，而对于同名变量，函数声明的优先级要高于var声明，但变量初始化的优先级又高于函数声明。 例一： function exam() { alert(1); } var exam; alert(typeof exam); // 这里输出function, 因为函数声明的优先级高于var声明 例二： function exam() { alert(1); } var exam = 2; alert(typeof exam); // 这里输出number, 因为exam初始化时(exam = 2;)覆盖了exam的函数声明 例三： var exam, func = function exam() {alert(1);}; alert(exam); // IE下，输出function exam() {alert(1);}(被当做函数声明)，非IE下，输出undefined(被当做函数表达式) 二. arguments对象 文中提到的一个关键点：我们通常用arguments[arg](arg为非负整数)的方式去获取对应的参数值，当arg小于arguments.length时，arguments[arg]会和它对应形参的值会始终保持相同，这是由于javascript引擎会保持对它们的内存空间进行同步，这意味着，改变一方的值，另一方的值也会做出相同的改变，这一点可以通过下面的例子来证明： function b(x, y, [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/444/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>YUI自定义事件订阅者的作用域问题</title>
		<link>http://www.mytcer.com/406</link>
		<comments>http://www.mytcer.com/406#comments</comments>
		<pubDate>Fri, 01 Jan 2010 16:33:37 +0000</pubDate>
		<dc:creator>Tcer</dc:creator>
				<category><![CDATA[JS]]></category>
		<category><![CDATA[CustomEvent]]></category>
		<category><![CDATA[scope]]></category>
		<category><![CDATA[YUI]]></category>
		<category><![CDATA[作用域]]></category>
		<category><![CDATA[自定义事件]]></category>

		<guid isPermaLink="false">http://www.mytcer.com/?p=406</guid>
		<description><![CDATA[前几天, 同事在使用YAHOO.util.Event.onDOMReady时, 回调函数得不到执行, 浏览器提示回调函数”is not a function”(可以确定回调函数是存在且有效的), 经检查, 发现是作用域&#8217;惹的祸&#8217;, 这里重现一下场景, 大伙在使用时注意一下. 一. 示例代码 // 基于YUI 2.7或2.8 YAHOO.namespace('Demo'); YAHOO.Demo = function() { var age = 24; return { init: function() { var curAge = this.showAge(); // 浏览器会提示this.showAge is not a function alert(curAge); }, showAge: function(curAge) { return YAHOO.lang.isNumber(curAge) ? curAge : age; } }; }(); // [...]]]></description>
		<wfw:commentRss>http://www.mytcer.com/406/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

