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);
					}
				}
			}
		}
	};
}();

刚洗完澡的轩轩，最喜欢打电话和玩手机了，经常一个人跑到电话旁拿起听筒叽哩哇啦地说个不停。

NIKKOR AF 50mm 1.8D

50mm 1.8D 试拍

试用了一下发现，景深的确很浅，适合拍糖水片，1.8的光圈下，会比较虚，所以还是缩两档较好。
定焦镜头，还需要多多使用，了解构图技巧。

下面是我的套机头 NIKKOR AF-S 18-105 VR

嘀咕宣传片，感觉节奏快了点，不过挺有创意。

我在嘀咕：@Foxling，欢迎跟随交流。

针对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应该是做了优化，相差不大

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

送货方式：EMS
承 运 人：京东
货运单号：2249457148 点击查询
承运人电话：020-28809135

“点击查询”的链接是http://www.ems.com.cn/
事实上，这个单号在ems网站是查询不了的，ems页面提示，单号是13位。
于是想到，京东应该是有很多家快递商合作的，但这里的状态显示却相当地不人性化。
应该针对不同的单号，显示各家快递的网站以及查询网址的链接，如果可以的话，直接从对方网站读取状态信息。（淘宝就做得不错）

之后，到了京东的投诉中心提了一条关于这个货运状态的建议，
客服回复： 您好,因快递输入回执较慢，还请您稍后查询，为您带来的不便还请您见谅！
这客服回答也太敷衍了事..对京东的印象减分了~

对于网上购物来说，物流状态应该是相当基础的一项服务，从技术角度来说，也是不难实现的。
小细节，好体验。

——-2009-4-11更新———————–
今天在京东网站看到物流状态这一块貌似改版了：

不错的改进，如果再能读出快递的相关状态，并给出快递公司的网站链接，就更好了！