记得当时看了玉伯的文章后就知道他在考《命名函数表达式探秘》的内容，并没有太在意，只是觉得对于浏览器或者Javascript的某些怪异现象，有一定的了解就OK，在实际的运用中，肯定是会避免出现这样的问题。

但看到译飞的文章里提到的 [] == ![] //为true 时，的确愣了一下。
最后，译飞还留下了一道思考题：

{} == !{}; //返回什么值？
[] == [] //返回什么值？

把我的兴趣给提了起来，追根究底一翻再睡觉。
[] == [] 不用讲，肯定是false，两个不同的对象。
通过译飞的分析

Step01: [] == ![] // 由于[]是对象，则 ![] 返回fasle，演变为 Step02。
Step02: [] == fasle // 由于 fasle 是 Boolean 值，则转换成数字 0，演变为 Step03。
Step03: [] == 0 // 由于 0是数字，[]是对象，[] 转换成数字 Number([]) -> 0，演变为 Step04。
Step04: 0 == 0 // 返回最终结果：true

[] == ![] //为true，同理，{}也是对象，{} == !{};应该也是true。
通过运行得到结果false。很明显，中间还有道道。

通过翻看ECMAScript得知，在译飞的Step03：

Step03: [] == 0 // 由于 0是数字，[]是对象，[] 转换成数字 Number([]) -> 0，演变为 Step04。

针对{}和[]处理的结果是不一样的。

Number([]) ：
Step01: [] 转换成 空字符串
Step02: Number(”) -> 0;

Number({})：
Step01: {} 转换成 ‘[object Object]‘
Step01: Number(‘[object Object]‘) -> NaN

结果：
NaN == 0 //false

具体见ECMAScript 8.6.2.6
还有其它各种类型的转换，可以仔细再看看。

最后，了解浏览器和Javascript的某些怪异现象和特性，可以在项目中避免遇到一些诡异的问题。

—————–我只是条无辜的分割线—————————-

最后的最后，很晚了，睡觉。

ANT，是 Apache 的一个开源项目，用于自动化调用程序完成项目的编译，打包，测试等。
Eclipse 内置了Ant，可以很方便地对JS, CSS进行压缩合并处理。

比如 js, css 文件都放在 web_assets 目录下，那么目录结构如下：

web_assets
    +-- ant-build  //存放ant build xml 配置文件
        +-- js.build.xml //处理 js 的配置文件
    +-- js  //最终的js文件
    +-- lib  //其它依赖的程序
    +-- src  //源文件

lib目录下有yuicompressor.jar, 用 YUI Compressor 压缩 JavaScript 和 CSS

ant-bild/js.build.xml 文件内容如下：

<project name="js.build" default="clean" basedir="../">
    <description>js.build for ANT</description>
    <property name="src" location="src" />
    <property name="build" location="build" />
    <property name="target" location="js" />
    <property name="lib" location="lib"/>
    <property name="charset" value="utf-8"/>

    <target name="init">
        <mkdir dir="${build}"/>
    </target>

    <target name="concat" depends="init">
        <concat destfile="${build}/core.js" encoding="${charset}" outputencoding="${charset}">
        	<path path="${src}/core.js" />
		<path path="${src}/dialog.js" />
        </concat>
        <replaceregexp match="@DEBUG@" replace="" flags="g" byline="true" file="${build}/core.js" encoding="${charset}" />
    </target>

    <target name="compress" depends="concat">
        <java jar="${lib}/yuicompressor.jar" fork="true">
            <arg line="--type js --charset utf-8 ${build}/core.js -o ${target}/core.js"/>
        </java>

    </target>

    <target name="clean" depends="compress">
        <delete dir="${build}"/>
    </target>

</project>

这个 ant 配置文件要经过4个流程：

1. target init 进行初始化处理，创建一个目录build，用于暂存文件；
2. target concat 合并两个 js 文件，放到 build 目录下；
3. target compress 调用 Yui Compressor 对合并后的 js 进行压缩
4. target clean 进行清理动作，删除生成的 build 目录

ANT标签和属性解释：

• project 的 default 对应某个 target 的 name 值，表示默认执行哪个步骤；
• target 的 depends 对应其他某些 target 的 name 属性，表示依赖性；
• ${name} 可以引用 property 中定义的值。
• mkdir 标签创建一个目录
• replaceregexp, 正则表达式替换，将DEBUG标识替换为空，在正式环境不处理DEBUG信息
• 注意设置文件的 encoding 属性，否则可能有乱码情况

关于ANT的详细文档，请看官方手册：http://ant.apache.org/manual/

在 Eclipse 里右击这个文件，选择 Run As -> ANT Build
即可以控制台看到信息：

Buildfile: D:\eclipse\workspace\JS-Test\web_assets\ant-build\build.xml
init:
concat:
compress:
clean:
   [delete] Deleting directory D:\eclipse\workspace\JS-Test\web_assets\build
BUILD SUCCESSFUL
Total time: 875 milliseconds

这时候 js 目录就生成了合并压缩后的 core.js 文件，相当方便。

使用script标签加载

通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。

猛击测试页面block.html

使用JSLoader异步加载JS

当使用异步加载方式加载JS时，test.js与图片同时加载，加快了页面的呈现：

猛击测试页面js-loader

JSLoader

JSLoader.load(url, [fun1], [funN]);
参数：
url 要加载的JS的地址
fun 依赖该JS执行的函数

使用示例：

JSLoader.load('test.js', function(){
    document.getElementById('test').innerHTML = test;
});

猛击这里下载JSLoader.js

JSLoader源码：

var JSLoader = function(){

	var scripts = {};

	function getScript(url){
		var script = scripts[url];
		if (!script){
			script = {loaded:false, funs:[]};
			scripts[url] = script;
			add(script, url);
		}
		return script;
	}

	function run(script){
		var funs = script.funs,
			len = funs.length,
			i = 0;

		for (; i < len; i++){
			var fun = funs.pop();
			fun();
		}
	}

	function add(script, url){
		var scriptdom = document.createElement('script');
		scriptdom.type = 'text/javascript';
		scriptdom.loaded = false;
		scriptdom.src = url;

		scriptdom.onload = function(){
			scriptdom.loaded = true;
			run(script);
			scriptdom.onload = scriptdom.onreadystatechange = null;
		};

		//for ie
		scriptdom.onreadystatechange = function(){
			if ((scriptdom.readyState === 'loaded' ||
					scriptdom.readyState === 'complete') && !scriptdom.loaded) {

				run(script);
				scriptdom.onload = scriptdom.onreadystatechange = null;
			}
		};

		document.getElementsByTagName('head')[0].appendChild(scriptdom);
	}

	return {
		load: function(url){
			var arg = arguments,
				len = arg.length,
				i = 1,
				script = getScript(url),
				loaded = script.loaded;

			for (; i < len; i++){
				var fun = arg[i];
				if (typeof fun === 'function'){
					if (loaded) {
						fun();
					}else{
						script.funs.push(fun);
					}
				}
			}
		}
	};
}();

针对IE的这个bug，写了如下方法获取background-position的值：
请忽略getCSS方法，这是一个简易的获取css的方法，并不完善，了解不同浏览器获取CSS的方法

var getCSS = function(){
	var rdashAlpha = /-([a-z])/ig,
		fcamelCase = function( all, letter ) {
			return letter.toUpperCase();
		};
	return function(el, name){
		if (typeof el === 'string') el = document.getElementById(el);

		var cssValue,
			camelCase = name.replace(rdashAlpha, fcamelCase);

		if (el.currentStyle){
			cssValue = el.currentStyle[camelCase];
		}else if(window.getComputedStyle){
			cssValue = window.getComputedStyle(el,null)[camelCase];
		}
		return cssValue;
	};
}();

var getBackgroundPosition = function (){
	var s = getCSS(document.body, 'background-position') === undefined;
	return function(el){
		if (s){
			return getCSS(el, 'background-positionX') + ' ' + getCSS(el, 'background-positionY');
		}else{
			return getCSS(el, 'background-position');
		}
	};
}();

猛击DEMO可以看到效果

var a = Math.PI++, b = ++Math.PI;
alert(a);
alert(b);
alert(Math.PI);

不加思索的写下：
3.14
4.14
3.14

后来经常提醒才想到Math.PI是常量，修改一个常量的值，会抛出错误。
而上面的操作中，b = ++Math.PI 可以理解为将Math.PI递增加1，并且赋值给变量 b;
这时候开始迟疑了：
在javascript中，给常量赋值是否会抛出错误呢？

复制代码执行一下，奇怪了，的确和我刚开始不加思索的结果那样，并没有抛出错误。
为什么在javascript中可以对常量进行这样的计算呢？

翻开ECMAScript规范：

This property has the attributes { DontEnum, DontDelete, ReadOnly }

继续找到 ReadOnly 定义：

The property is a read-only property. Attempts by ECMAScript code to write to the property will be ignored. (Note, however, that in some cases the value of a property with the ReadOnly attribute may change over time because of actions taken by the host environment; therefore “ReadOnly” does not mean “constant and unchanging”!)

对该属性的写入将被忽略。
既然写入被忽略了，那 b = ++Math.PI 为什么是4.14而不是3.14呢。

继续翻看++运算符

The production UnaryExpression : ++ UnaryExpression is evaluated as follows:
1. Evaluate UnaryExpression.
2. Call GetValue(Result(1)).
3. Call ToNumber(Result(2)).
4. Add the value 1 to Result(3), using the same rules as for the + operator (see 11.6.3).
5. Call PutValue(Result(1), Result(4)).
6. Return Result(4).

看来并不是给 Math.PI 加上 1 再赋值给 b
而是在Result(3)上加上1，在第5步时，赋值给Math.PI(被忽略)
第6步，返回第4步的值。而不是返回Math.PI

现在，对于开头出现的结果不再感到迷惑了。
遇到问题，不仅仅是需要了解他的正确结果，最好是能了解正确结果是如何得来的。

• Cookie
  4096字节；缺点：存储量小，请求头附带cookie带来性能问题。
• Flash Share Object
  默认支持100k，跨浏览器存储最好的方式，毕竟现在没有安装flash插件的用户是很少的；缺点：需要加载一个swf文件，个别用户不支持flash。
  有一个基于jQuery的插件叫 jStore ，就是通过Flash Share Object实现的。
• IE的 UserData
  最少也能支持640k，IE8后已经支持DOM Storage；缺点：IE only。
• DOM Storage
  默认支持5M存储量；缺点：IE7，IE6不支持。
• Google Gears
  功能最强；缺点：但需要安装软件，而且，安装的用户是较少的。

这里主要学习 IE 的 UserData 和 DOM Storage

DOM Storage

支持：Firefox, Chrome, Opera, Safari, IE8+
关于Web Storage的w3c文档，请移步 http://dev.w3.org/html5/webstorage/
DOM Storage 分为两种， sessionStorage 和 localStorage，顾名思义，sessionStorage是指在当前窗口会话中持续保存的数据，哪怕你在不同的网站中跳转也不会清除，但关闭窗口后就没了；localStorage是在本地永久存储的。

方法：

• key(index) 根据索引获取值
• getItem(key) 获取 key 的值
• setItem(key, data) 设置 key 的值
• removeItem(key) 删除 key
• clear() 清除所有的key

属性：

• length 当前存储的个数

IE UserData

支持：IE5+
关于UserData更详细的文档，请看http://msdn.microsoft.com/en-us/library/ms531424.aspx
通过给 xml 或者 html 标签添加 behavior 来支持 userData
例如：
<input style="behavior:url('#default#userData')" id="userData">
或者，通过脚本来设置：
object.style.behavior = "url('#default#userData')"
object.addBehavior ("#default#userData")

方法：

• getAttribute() 获取指定的属性值。
• load(object) 从 userData 存储区载入存储的对象数据。
• removeAttribute() 移除对象的指定属性。
• save(object) 将对象数据存储到一个 userData 存储区。
• setAttribute() 设置指定的属性值。

属性：

• expires 设置或者获取 userData behavior 保存数据的失效日期，不设置则为永久。
• XMLDocument 获取 XML 的引用。

兼容的解决方法

这是我写的一个通用的本地存储的插件，缺点：数据不能跨浏览器，比如在IE里保存的，只能在IE里读取：
测试通过的浏览器：IE6, IE7, IE8, Firefox, Chrome, Safari, Opera

支持的方法：

• get(key) 读取key的值
• set(key, value) 设置key的值
• del(key) 删除key
• support 检测是否支持本地存储

使用示例：
if ( Storage.support() ) Storage.set('username', 'foxling');

Demo猛击这里

var Storage = function(win, doc){
		var hasSupport = true,
			store = win.localStorage,
			STORE_NAME = 'localstorage',
			obj,
			support = function (){ return hasSupport },
			error = function(){ throw new Error("don't support localStorage") };

		if (store && store.getItem){
			obj = {
				set : function(key, value){
					return store.setItem(key, value);
				},
				get : function(key){
					return store.getItem(key);
				},
				del : function(key){
					return store.removeItem(key);
				}
			};
		}else{
			store = doc.documentElement;
			try{
				store.addBehavior('#default#userdata');
				store.save(STORE_NAME);
			}catch(e){
				hasSupport = false;
			}
			if (hasSupport){
				obj = {
					set : function(key, value){
						store.setAttribute(key, value);
						store.save(STORE_NAME);
					},
					get : function(key){
						store.load(STORE_NAME);
						return store.getAttribute(key);
					},
					del : function(key){
						store.removeAttribute(key);
						store.save(STORE_NAME);
					}
				};

			}
		}
		if (!obj){
			obj = {
				set:error,
				get:error,
				del:error
			};
		}
		obj.support = support;
		return obj;
	}(window, document);

• 原生的方法arr.push()
• 通过arr[arr.length]直接赋值
• 把方法二写成一个函数方便调用

测试结果请猛击这里：
/examples/2010/03/array-performance/push.html

测试结果：

• 给arr[arr.length]直接赋值比push方法快
• 函数调用增加了开销，特别是在IE6和opera下表现明显
• Chrome应该是做了优化，相差不大

待续(也许) =，=…….

各浏览器TextArea获得焦点后的光标位置情况：

textarea.focus()

• FireFox: 所有文字结束处
• IE: 文字开头
• Opera: 文字开头
• Chrome: 文字开头
• Safari: 文字开头

IE支持document.selection
Firefox，Chrome,Safari以及Opera都有selectionStart和selectionEnd属性
针对浏览器的特性进行判断并实现，代码如下：

function insertText(obj,str) {
	if (document.selection) {
		var sel = document.selection.createRange();
		sel.text = str;
	} else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
		var startPos = obj.selectionStart,
			endPos = obj.selectionEnd,
			cursorPos = startPos,
			tmpStr = obj.value;
		obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
		cursorPos += str.length;
		obj.selectionStart = obj.selectionEnd = cursorPos;
	} else {
		obj.value += str;
	}
}
function moveEnd(obj){
	obj.focus();
	var len = obj.value.length;
	if (document.selection) {
		var sel = obj.createTextRange();
		sel.moveStart('character',len);
		sel.collapse();
		sel.select();
	} else if (typeof obj.selectionStart == 'number' && typeof obj.selectionEnd == 'number') {
		obj.selectionStart = obj.selectionEnd = len;
	}
}

Demo猛击这里

关于IE TextRange 对象的方法与属性介绍：
http://msdn.microsoft.com/zh-cn/library/ms535872%28en-us,VS.85%29.aspx

TextArea对象的属性：https://developer.mozilla.org/en/DOM/TextArea

DEMO猛击这里

解决方法

直接看代码吧：

function Dialog(){
	this.panel = document.createElement('div');
	this.panel.id = 'bmPanel';
	this.panel.style.position = 'absolute';
	this.panel.style.right = '0px';
	this.panel.style.right = this.scrollTop() + 'px';
	this.panel.style.zIndex = 100000;
	this.panel.style.margin = '10px';
	this.panel.style.width = '200px';
	this.panel.style.height = '200px';
	this.panel.style.border = '5px solid #CCC';
	this.panel.innerHTML = '<iframe id="bmIframe" '
		+ 'token="1" onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"'
		+ 'name="bmIframe" src="main.html" scrolling="no" frameborder="0" style="width:100%; height:100%; '
		+ 'border:1px; padding:0px; margin:0px"></iframe>';
}

Dialog.prototype.show = function(){
	document.body.appendChild(this.panel);
}

Dialog.prototype.scrollTop = function (){
	return document.documentElement && document.documentElement.scrollTop || document.body.scrollTop;
}

注意iframe这一行：

onload="c = this.getAttribute(\'token\'); if (c==3) {this.parentNode.parentNode.removeChild(this.parentNode)} this.setAttribute(\'token\',++c);"

iframe里的关闭按钮链接一个简单的页面，通过不停地提交表单触发load事件，让token累加：

<body onload="document.getElementById('close').submit()">
	<form id="close" action="closeing.html" method="get"></form>
</body>

其实，任何支持HTML代码，或者支持图片的地方，都可以加上你的图片签名，如果你要在你的网页中插入图片签名，只需要添加如下代码：

<img src="http://digushow.com/sign/foxling/bbs_sign.png" alt="Foxling's digu" />

其中，foxling改为你的用户名，alt的属性改成你的说明。
如果是要在支持UBB代码的论坛里做签名，使用下面的代码：

[img]http://digushow.com/sign/foxling/bbs_sign.png[/img]

Flash版提供了5种颜色可以选择，不过我都不喜欢，定制性较差~但大多数博客提供商都不支持JS，Flash就是一个不错的选择了。

嘀咕秀JS版

对于众多自建博客来说，JS版应该算是最好的选择了，CSS样式完全自主控制，如果熟悉JS的话，HTML结构也可以由自己定制，JS的链接代码：

<div id="diguShow">正在加载嘀咕...</div>
<script src="http://digushow.com/js/digushow.js" type="text/javascript">
</script><script src="http://digushow.com/api/digushow.jsp?callback=diguShowCallback&username=foxling&count=5" type="text/javascript"></script>

有三个可定义的参数，callback后面会说到，先说后两个参数：
username:嘀咕用户名
count:读取的嘀咕数目

JS加载的效果如下

在PJBlog和WordPress里添加嘀咕秀JS模块

在Wordpress和Pjblog里添加JS模块都是比较简单的，PJ里可以添加模块，写入HTML代码完成，在WordPress里添加也是非常容易，有多种方法：
1.添加到边栏：后台-外观-小工具，添加一个文本工具，然后进行编辑，填入标题，然后把上面的JS代码复制进去，保存即可。
2.添加到内容栏：写一篇新文章，在HTML代码里输入上面的JS代码，然后把文章置顶~
3.添加到自定义位置：修改你的主题里的index.php文件，把JS代码插入到相应的位置。
我是用第2种方法~可以在首页看到我的嘀咕秀模块。

自定义嘀咕秀JS版的CSS样式

嘀咕秀JS版没有自带任何CSS样式，这样嘀友们可以自己无限发挥~~

JS生成的HTML代码格式如下，生成的代码结构比较简单，并且加上了ID，只需要写相应的CSS即可。

<div id="diguShow">
    <ul id="diguShow_List">
        <li>求Window空间，让我挂个东东吧。<a href="http://digu.com/jump?aid=detail&twId=169480" class="diguShow_time">11小时前</a></li>
    </ul>
    <p id="diguShow_More">
        <a target="_blank" href="http://www.digu.com/foxling">进入<strong>FoxLing</strong>的嘀咕主页»</a>
    </p>
</div>

在主题的style.css里写入CSS(我稍微写了一点样式，不过还是按照我博客简洁的风格)，给每条嘀咕加上了一个小icon，显得更有条理点，可以在我的博客看到效果：

/*DiguShow*/
#diguShow_List {list-style:none;margin:10px 0;padding:0;}
#diguShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.diguShow_time {color:#999;}
#diguShow_More {text-align:right;margin:0 0 10px 0;}

加入Loading图标

嘀咕秀是在网页加载完后才会加载JS，这点比较好，不会因为网络的原因导致页面卡住~
在加载的时候，显示：正在加载嘀咕…
可以加入一个Loading图标，这样显得更爽点~
Loading图标生成网站：http://www.ajaxload.info/，提供各种样式的Loading图标，可以自定义前景色和背景色。

将默认代码里的
<div id="diguShow">正在加载嘀咕...</div>
替换成
<div id="diguShow" style="background:url(/wp-content/themes/sandbox/ajax-loader.gif) no-repeat left center;padding:5px 0 5px 20px;">
正在加载嘀咕...
</div>

更强的自定义

如果你对JS比较熟悉，可以完全重写JS回调函数，输出你需要的HTML结构。
嘀咕秀是通过JSONP的方式传入函数名，返回相应的格式，解决跨域问题。
上面提到的callback参数就是处理数据要用到的JS函数名，给函数传递了一个参数，是JSON格式的数据。
服务端传回来的JS代码如下：

diguShowCallback(
{
user:{userId:10013552,
nickname:"FoxLing",
signPicName:"http://121.14.39.139:80/file/10/01/35/52/default/SIGN10013552_24x24.jpg",
homepage:"http:\/\/www.digu.com\/foxling"},
status:[{created_at:"3小时前",
text:"嘀咕",
id:181855,
picPath:[]}]
}
);

写好了JS函数后，将JS代码里的这一句替换成你自己写的JS函数的文件链接：

<script src="http://digushow.com/js/digushow.js" type="text/javascript"></script>

完工！

———–2009-09-08 更新——————————————
嘀咕秀更名为无敌秀，目前可以使用
CSS的ID和Class名有所改动，改动如下：

/*Wudishow*/
#wudiShow_List {list-style:none;margin:10px 0;padding:0;}
#wudiShow_List li {
background:url(/wp-content/themes/sandbox/diguico.png) no-repeat 0 0;
padding-left:17px;
line-height:16px;
margin-bottom:8px;
}
.wudiShow_time {color:#999;}
#wudiShow_More {text-align:right;margin:0 0 10px 0;}

如果你还想对无敌秀的JS下刀，可以下载这个地址的js文件进行修改：

http://www.wudishow.com/js/wudishow.source.js

目前可以在我的博客首页右侧栏看到效果。