<?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>iColin</title>
	<atom:link href="http://icolin.org/feed" rel="self" type="application/rss+xml" />
	<link>http://icolin.org</link>
	<description>Do what you want</description>
	<lastBuildDate>Sat, 21 Jan 2012 15:33:22 +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>Macbook Air使用小记</title>
		<link>http://icolin.org/life/mac-start-guide.html</link>
		<comments>http://icolin.org/life/mac-start-guide.html#comments</comments>
		<pubDate>Sat, 21 Jan 2012 15:23:05 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Life]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=288</guid>
		<description><![CDATA[入手MBA也有一段时间了，从一个初级小白进阶成为一个中级小白，下面就分享了使用MAC的一些经验（老手可以直接飘过了）。
GUI介绍
顶部的是任务栏和菜单栏，底部（默认在底部）的是Dock栏，可以理解为快捷方式栏。
设置
一个东西拿到手，总是忍不住研究下里面的设置项。点击任务栏左侧的apple图标，选择-系统偏好设置，弹出的界面中有各种设置项。换下桌面，更改下Dock栏的位置，hover态图标大小。设置输入法什么的。
手势（默认）
一个手指轻敲触摸板/单击触摸板 单击
二个手指上下滑动 滚动
三个手指滑动 在页面中可以选中内容，当焦点在文件上时，可以拖动文件
四个手指
左右滑动 切换屏幕
上下滑动 将当前运行的应用程序全部显式在桌面上，也是快速切换其他应用程序的一种方式
四个手指合起来，显式应用程序列表；四个手指分开，回到之前的应用程序
可以去系统偏好设置-触摸板里面自定义手势    
快捷键
command + m ：最小化 （右手按）
Command + q ：关闭当其应用程式（退出进程）
Command + w ：关闭窗口，不会退出进程（比如关闭当其聊天窗口）
Command + o  :  打开选中的文件/文件夹
command + , ：进入当其应用程序的设置界面 (右手按右边的command的，很方便)
command + h ：隐藏当其应用程序 （点击Dock栏的图标即可显式程序）
command + tab ：在多个打开的应用程序中切换
command + delete ： 删除一个项目到回收站
command + shift + delete：清空回收站
enter : 重命名选中的文件/文件夹
ctrl + a : 回到行首
ctrl + e ：回到行尾
fn + [...]]]></description>
			<content:encoded><![CDATA[<p>入手MBA也有一段时间了，从一个初级小白进阶成为一个中级小白，下面就分享了使用MAC的一些经验（老手可以直接飘过了）。</p>
<h3 >GUI介绍</h3>
<p>顶部的是任务栏和菜单栏，底部（默认在底部）的是Dock栏，可以理解为快捷方式栏。</p>
<h3 >设置</h3>
<p>一个东西拿到手，总是忍不住研究下里面的设置项。点击任务栏左侧的apple图标，选择-系统偏好设置，弹出的界面中有各种设置项。换下桌面，更改下Dock栏的位置，hover态图标大小。设置输入法什么的。</p>
<h3 >手势（默认）</h3>
<p>一个手指轻敲触摸板/单击触摸板 单击<br />
二个手指上下滑动 滚动<br />
三个手指滑动 在页面中可以选中内容，当焦点在文件上时，可以拖动文件<br />
四个手指<br />
左右滑动 切换屏幕<br />
上下滑动 将当前运行的应用程序全部显式在桌面上，也是快速切换其他应用程序的一种方式<br />
四个手指合起来，显式应用程序列表；四个手指分开，回到之前的应用程序<br />
可以去系统偏好设置-触摸板里面自定义手势    </p>
<h3 >快捷键</h3>
<p>command + m ：最小化 （右手按）<br />
Command + q ：关闭当其应用程式（退出进程）<br />
Command + w ：关闭窗口，不会退出进程（比如关闭当其聊天窗口）<br />
Command + o  :  打开选中的文件/文件夹<br />
command + , ：进入当其应用程序的设置界面 (右手按右边的command的，很方便)<br />
command + h ：隐藏当其应用程序 （点击Dock栏的图标即可显式程序）<br />
command + tab ：在多个打开的应用程序中切换<br />
command + delete ： 删除一个项目到回收站<br />
command + shift + delete：清空回收站<br />
enter : 重命名选中的文件/文件夹</p>
<p>ctrl + a : 回到行首<br />
ctrl + e ：回到行尾<br />
fn + delete ：删除光标后的一个字符<br />
command + l ：定位到地址栏<br />
command + r ：刷新</p>
<h3 >应用程序</h3>
<ul>
<li>finder：文件管理器，在finder中，可以按command + 1～4 的组合键来指定项目按照图标、列表、分栏等方式来显式</li>
<li>spotlight：号称超强的搜索工具（个人用得比较少，coding直接从vim开始，找文件要进入加密镜像照，spotlight也找不到）</li>
<li>iCal：日历软件，可以和google日历同步，很爽哇</li>
</ul>
<h3 >安装程序</h3>
<p>我了解的有两种方式，一种是DMG格式的文件，打开dmg之后，直接运行里面的install文件，一路Next。另一个中是app格式的，直接把这个app拖动到applications里面即可。</p>
<p>安装的程序去哪里找？可以使用前面说到的手势——四个手指合起来，就能显示应用列表，或者去finder里面的应用程序文件夹下找。注意，系统设置、插件等程序安装后不一定出现。</p>
<h3>应用列表</h3>
<p><strong>日常类：</strong></p>
<ul>
<li>chrome</li>
<li>qq</li>
<li>fit输入法</li>
<li>迅雷</li>
<li>MplayerX （SPlayerX有个自动搜索字幕的优势）</li>
<li>iWork</li>
<li>DropBox</li>
<li>CleanApp （有洁癖的同学可以用这个更彻底的删除应用）</li>
<li>betterZip</li>
<li>Evernote</li>
<li>Omni Graffle （思维导图工具）</li>
<li>豆瓣FM</li>
</ul>
<p><strong>开发类：</strong></p>
<ul>
<li>vim </li>
<li>xampp</li>
<li>Fireworks</li>
<li>VMWare fusion</li>
</ul>
<h3 >双系统</h3>
<p>    准备好一个U盘，一个windows操作系统的镜像文件，使用bootCamp很Easy的完成安装。需要注意的是，如果你安装的是win7系统，请使用windows loader激活。如果你使用其他工具激活，启动系统时黑屏等待时间变为30～40s。对这种情况也可以windows loader再次激活即可解决。当然如果你时正版用户，就无需担忧。</p>
<p>    另一点，按照双系统后，默认启动的是后面按照的那个系统，可以进入系统偏好设置-启动磁盘，来选择默认启动的系统。</p>
<h3 >规划个人文件存储</h3>
<p>    和win不同的是，mac下默认没有各种盘符，所有文件都在Macintosh HD这个磁盘里面，你可以直接在Macintosh HD磁盘下按喜好建立各文件夹存储资料。我个人是这样做的：在磁盘根目录新建code、design、fun三个目录分别存储个人代码、设计和好玩的东西。图片、视频、音乐等都放在mac默认的那些分类里面。对了，隐私文件放哪里好，spotlight太强，我可不想随便让人搜索到。</p>
<p>    Mac提供了方便的数据加密功能。即建立一个加密镜像，把隐私数据都扔到这个镜像中。每次访问镜像的数据时需要提供密码。一起来试试吧：</p>
<p>进入应用程序-实用工具-磁盘工具，新建映像，依次填写镜像名称、存储位置、镜像文件夹名称、镜像大小，然后选择128位AES加密，点击创建就OK了。再运行镜像文件，输入密码，你可以放肆向镜像里面放隐私数据了。可是，可是一定要记得密码哦。</p>
<h3 >更改文件默认打开程序</h3>
<p>两手指轻按一个文件，选择-显式简介，然后选择要使用的应用程序，点击全部更改即可。</p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/life/mac-start-guide.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Android开发环境搭建</title>
		<link>http://icolin.org/android/android-development-environment-building.html</link>
		<comments>http://icolin.org/android/android-development-environment-building.html#comments</comments>
		<pubDate>Sun, 21 Aug 2011 13:18:23 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[android]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=268</guid>
		<description><![CDATA[零基础开始搭建Android开发环境，我们开始吧：
先理解这些名词

JDK：Java Development Kit（Java开发工具包）
SDK：Software Development Kit（软件开发工具包）

下载必备软件

下载JDK
下载Eclipse
下载Android SDK 1.6，可能需要翻墙
下载Android SDK Setup，可能需要翻墙

安装并配置JDK
双击Java安装文件，可以安装到默认路径，亦可自己选择路径，我这里安装到C:/Java/jdk/目录下。然后配置环境变量：
1. 设置JAVA路径
打开“控制面板”-“系统”-“高级”-“环境变量”，在打开的对话框中的&#8221;系统变量&#8221;下方点&#8221;新建&#8221;，在对话框
中的“变量名”中填写“JAVA_HOME”，值为&#8221;C:\Java\jkd\&#8221;，点“确定”。
2. 设置CLASS路径
再新建一个系统变量，变量名为CLASSPATH，值为.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\toojs.jar;。
3. 设置PATH路径
PATH变量一般系统中已存在，所以选择PATH变量，点击“编辑”，在变量值的最后面加上;%JAVA_HOME%\bin;%JAVA_HOME\jre\bin;。
JDK配置完毕，测试下，在命令行中输入“java -verison”，即可看到当前Java的版本信息。
安装并配置SDK 1.6
先解释下这里为什么要安装SDK1.6，而不是SDK2.2或者更高。据测试官方提供的SDK2.2的安装包缺少adb.exe文件，因此在eclipse中无法指定SDK的位置。所以只能先安装SDK 1.6，然后再升级到所需要的版本(后面步骤会有提到)。
解压SDK到D:\SDK\(任意目录皆可)，配置环境变量：
1. 设置Android路径
如配置JAVA环境变量的步骤一样，新建一个系统变量，变量名为Android_home，变量值为SDK的路径，D:\SDK\
2. 设置PATH路径
编辑PATH变量，在值后面加上;%Android_home%\tools。
SDK配置完毕，在命令行中输入“Android -help”就能看到相关帮助信息。
解压Eclipse，安装ADT，关联SDK
解压Eclipse，双击eclipse.exe
安装ADT：在菜单栏，选择&#8221;help&#8221;-&#8221;install new software&#8221;，在打开的对话框中点击Add按钮，在名称处输入ADT，在地址中输入http://dl-ssl.google.com/android/eclipse/ ，执行install操作安装ADT插件
关联SDK：重启Eclipse，在菜单栏选择&#8221;Window&#8221;-&#8221;Preferences&#8221;，在对话框中点击Android，点击右侧的Browse按钮选择SDK的目录(D:\SDK\)，点击&#8221;确定&#8221;。
通过SDK Setup更新SDK
把SDK Setup解压到SDK的根目录下(D:\SDK\)，双击SDK setup.exe，启动Andriod SDK and AVD Manager，选中左侧setting，在右侧选择&#8221;Force https://xxx to be fetched using http://&#8221;，选择&#8221;save &#038; apply&#8221;，选择所需要的更新内容，比如我这里选了3项：

Android SDK Tools, revision 5
SDK Platform Android 2.1, API 7 revision 1
Sapmles for SDK API 7, revision 1

若更新中有提示目录被占用，请尝试关闭杀毒软件再进行更新。更新完毕之后，Android开发环境就搭建好了。
]]></description>
			<content:encoded><![CDATA[<p >零基础开始搭建Android开发环境，我们开始吧：</p>
<h3 >先理解这些名词</h3>
<ul>
<li>JDK：Java Development Kit（Java开发工具包）</li>
<li>SDK：Software Development Kit（软件开发工具包）</li>
</ul>
<h3 >下载必备软件</h3>
<ul>
<li><a href="http://www.java.com/zh_CN/download/chrome.jsp?locale=zh_CN" target="_blank">下载JDK</a></li>
<li><a href="http://www.eclipse.org/downloads/" target="_blank" >下载Eclipse</a></li>
<li><a href="http://dl.google.com/android/archives/android-sdk-windows-1.6_r1.zip" target="_blank">下载Android SDK 1.6</a>，可能需要翻墙</li>
<li><a href="http://dl.google.com/android/android-sdk_r04-windows.zip" target="_blank">下载Android SDK Setup</a>，可能需要翻墙</li>
</ul>
<h3 >安装并配置JDK</h3>
<p >双击Java安装文件，可以安装到默认路径，亦可自己选择路径，我这里安装到C:/Java/jdk/目录下。然后配置环境变量：</p>
<h4>1. 设置JAVA路径</h4>
<p >打开“控制面板”-“系统”-“高级”-“环境变量”，在打开的对话框中的&#8221;系统变量&#8221;下方点&#8221;新建&#8221;，在对话框<br />
中的“变量名”中填写“JAVA_HOME”，值为&#8221;C:\Java\jkd\&#8221;，点“确定”。</p>
<h4 >2. 设置CLASS路径</h4>
<p >再新建一个系统变量，变量名为CLASSPATH，值为.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\toojs.jar;。</p>
<h4 >3. 设置PATH路径</h4>
<p >PATH变量一般系统中已存在，所以选择PATH变量，点击“编辑”，在变量值的最后面加上;%JAVA_HOME%\bin;%JAVA_HOME\jre\bin;。</p>
<p >JDK配置完毕，测试下，在命令行中输入“java -verison”，即可看到当前Java的版本信息。</p>
<h3 >安装并配置SDK 1.6</h3>
<p >先解释下这里为什么要安装SDK1.6，而不是SDK2.2或者更高。据测试官方提供的SDK2.2的安装包缺少adb.exe文件，因此在eclipse中无法指定SDK的位置。所以只能先安装SDK 1.6，然后再升级到所需要的版本(后面步骤会有提到)。</p>
<p >解压SDK到D:\SDK\(任意目录皆可)，配置环境变量：</p>
<h4 >1. 设置Android路径</h4>
<p >如配置JAVA环境变量的步骤一样，新建一个系统变量，变量名为Android_home，变量值为SDK的路径，D:\SDK\</p>
<h4 >2. 设置PATH路径</h4>
<p >编辑PATH变量，在值后面加上;%Android_home%\tools。</p>
<p >SDK配置完毕，在命令行中输入“Android -help”就能看到相关帮助信息。</p>
<h3 >解压Eclipse，安装ADT，关联SDK</h3>
<p >解压Eclipse，双击eclipse.exe</p>
<p >安装ADT：在菜单栏，选择&#8221;help&#8221;-&#8221;install new software&#8221;，在打开的对话框中点击Add按钮，在名称处输入ADT，在地址中输入http://dl-ssl.google.com/android/eclipse/ ，执行install操作安装ADT插件</p>
<p >关联SDK：重启Eclipse，在菜单栏选择&#8221;Window&#8221;-&#8221;Preferences&#8221;，在对话框中点击Android，点击右侧的Browse按钮选择SDK的目录(D:\SDK\)，点击&#8221;确定&#8221;。</p>
<h3 >通过SDK Setup更新SDK</h3>
<p >把SDK Setup解压到SDK的根目录下(D:\SDK\)，双击SDK setup.exe，启动Andriod SDK and AVD Manager，选中左侧setting，在右侧选择&#8221;Force https://xxx to be fetched using http://&#8221;，选择&#8221;save &#038; apply&#8221;，选择所需要的更新内容，比如我这里选了3项：</p>
<ul>
<li>Android SDK Tools, revision 5</li>
<li>SDK Platform Android 2.1, API 7 revision 1</li>
<li>Sapmles for SDK API 7, revision 1</li>
</ul>
<p >若更新中有提示目录被占用，请尝试关闭杀毒软件再进行更新。更新完毕之后，Android开发环境就搭建好了。</p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/android/android-development-environment-building.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>字符集和编码方式</title>
		<link>http://icolin.org/javascript/character-set-and-character-encoding.html</link>
		<comments>http://icolin.org/javascript/character-set-and-character-encoding.html#comments</comments>
		<pubDate>Wed, 30 Mar 2011 16:05:43 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[charset]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=252</guid>
		<description><![CDATA[什么是字符集和字符编码
根据wiki对现代字符集的定义，字符集是一个字符序列，将一个字符集对应到一指定集合中某一东西（比如自然数序列）的过程称之为字符集编码（比如将拉丁字母编码成ASCII字符集），这样的一个字符集和对应的自然数序列叫做编码字符集。比如字母“A”对应的整数是65，“B”对应的整数为66。通常将字符集通俗的理解为字符和数字的对应表。
字符集的历史
为了更形象描述字符集，这里引用一部分资料上的历史：

起源及ASCII的诞生
很久以前，一群人用八个可以开合的晶体管来组成不同状态来表示万物，这样的一个字节(byte)就可以表示256种字符(2^8)，他们把前32种状态叫做控制码，控制码有特殊的用途，比如打印机遇到0&#215;10就输出换行等。这样，他们继续把大小写字母、数字和标点符号都用字节的各种状态来表示，一直排到了127位，这样计算机就可以用存储英文数据。当时计算机普及率很低，这样的方案看起来很不错，于是大家把这种方案叫做ANSI的ASCII(Aemerican Standard Code for Information Interchange)编码。
随后，世界上其他国家的人也开始使用计算机，他们发现ASCII里面没有想要的字符，于是把127位之后的空位来表示他们所需的新字符和符号，这样一直排到了255号，128-255之间的字符称为扩展字符集。
GB2312字符集
到中国人开始使用计算机时，已经没有位置来表示中文字符，于是亲们把127位以后的字符废除掉，并规定：127位之前和ASCII字符集一样，127位后，每两个字节表示一个汉字（前后两字节叫做
高字节和低字节），这样大部分简体汉字都可以表示了，另外还把字母、数字和标点符号都重新收编了一次，这就是所谓的“全角字符”。这种字符集叫做GB2312，它是对ASCII的中文扩展。（以
前常听程序员默念：一个汉字的长度等于2个英文字符的长度）
GBK和GB18030字符集的由来
随着计算机的普及，中国人发现还有好多繁体字没法表示呢！于是再次取消低字节大于127位的限制，只要是第一个字节大于127位就表示这是一个汉字的开始，这种方案叫做GBK字符集，它完整包含了GB2312字符集，还增加了很多繁体字和特殊符号。
再后来，少数民族也用电脑了，还得给照顾他们，于是在GBK的基础上又增加了很多少数民族的文字，这样GB18030字符集便诞生了。GB2312，GBK，GB18030通称DBCS(Double Byte Character Set双字节字符集)
想一统宇宙的Unicode
当时，很多国家都搞出一套自己的字符集方案，这就给信息交换带来了不少麻烦。于是ISO决定解决这个问题：废除所有地区性字符集，制定了一套囊括所有字符的字符集。即Universal Multiple-Octet Coded Character Set，简称UCS，俗称Unicode。

关于Unicode字符集
Unicode规定：统一使用双字节(16位)来表示一个字符，对于ASCII的字符，编码序号保持不变，只是由原来的8位扩展到16位(在存储海量数据时有浪费空间的诟病)，其他的文字和符号全部重新编码。Unicode用UTF(Unicode Transformation Format)来实现，UTF-8即每次编码8个字节。
关于UTF-8
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，关于UTF-8编码方式，可以通过下面的表描述：

1
2
3
4
5
6
7
8
U+00000000 – U+0000007F:    0xxxxxxx
U+00000080 – U+000007FF:    110xxxxx 10xxxxxx
U+00000800 – U+0000FFFF:    1110xxxx 10xxxxxx 10xxxxxx
U+00010000 – U+001FFFFF:    11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
U+00200000 – U+03FFFFFF:    111110xx 10xxxxxx [...]]]></description>
			<content:encoded><![CDATA[<h3>什么是字符集和字符编码</h3>
<p>根据wiki对现代字符集的定义，字符集是一个字符序列，将一个字符集对应到一指定集合中某一东西（比如自然数序列）的过程称之为字符集编码（比如将拉丁字母编码成ASCII字符集），这样的一个字符集和对应的自然数序列叫做编码字符集。比如字母“A”对应的整数是65，“B”对应的整数为66。通常将字符集通俗的理解为字符和数字的对应表。</p>
<h3>字符集的历史</h3>
<p>为了更形象描述字符集，这里引用一部分资料上的历史：</p>
<blockquote>
<h3>起源及ASCII的诞生</h3>
<p>很久以前，一群人用八个可以开合的晶体管来组成不同状态来表示万物，这样的一个字节(byte)就可以表示256种字符(2^8)，他们把前32种状态叫做控制码，控制码有特殊的用途，比如打印机遇到0&#215;10就输出换行等。这样，他们继续把大小写字母、数字和标点符号都用字节的各种状态来表示，一直排到了127位，这样计算机就可以用存储英文数据。当时计算机普及率很低，这样的方案看起来很不错，于是大家把这种方案叫做ANSI的ASCII(Aemerican Standard Code for Information Interchange)编码。</p>
<p>随后，世界上其他国家的人也开始使用计算机，他们发现ASCII里面没有想要的字符，于是把127位之后的空位来表示他们所需的新字符和符号，这样一直排到了255号，128-255之间的字符称为扩展字符集。</p>
<h3>GB2312字符集</h3>
<p>到中国人开始使用计算机时，已经没有位置来表示中文字符，于是亲们把127位以后的字符废除掉，并规定：127位之前和ASCII字符集一样，127位后，每两个字节表示一个汉字（前后两字节叫做<br />
高字节和低字节），这样大部分简体汉字都可以表示了，另外还把字母、数字和标点符号都重新收编了一次，这就是所谓的“全角字符”。这种字符集叫做GB2312，它是对ASCII的中文扩展。（以<br />
前常听程序员默念：一个汉字的长度等于2个英文字符的长度）</p>
<h3>GBK和GB18030字符集的由来</h3>
<p>随着计算机的普及，中国人发现还有好多繁体字没法表示呢！于是再次取消低字节大于127位的限制，只要是第一个字节大于127位就表示这是一个汉字的开始，这种方案叫做GBK字符集，它完整包含了GB2312字符集，还增加了很多繁体字和特殊符号。<br />
再后来，少数民族也用电脑了，还得给照顾他们，于是在GBK的基础上又增加了很多少数民族的文字，这样GB18030字符集便诞生了。GB2312，GBK，GB18030通称DBCS(Double Byte Character Set双字节字符集)</p>
<h3>想一统宇宙的Unicode</h3>
<p>当时，很多国家都搞出一套自己的字符集方案，这就给信息交换带来了不少麻烦。于是ISO决定解决这个问题：废除所有地区性字符集，制定了一套囊括所有字符的字符集。即Universal Multiple-Octet Coded Character Set，简称UCS，俗称Unicode。
</p></blockquote>
<h3>关于Unicode字符集</h3>
<p>Unicode规定：统一使用双字节(16位)来表示一个字符，对于ASCII的字符，编码序号保持不变，只是由原来的8位扩展到16位(在存储海量数据时有浪费空间的诟病)，其他的文字和符号全部重新编码。Unicode用UTF(Unicode Transformation Format)来实现，UTF-8即每次编码8个字节。</p>
<h3>关于UTF-8</h3>
<p>UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，关于UTF-8编码方式，可以通过下面的表描述：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">U<span style="color: #339933;">+</span>00000000 – U<span style="color: #339933;">+</span>0000007F<span style="color: #339933;">:</span>    0xxxxxxx
U<span style="color: #339933;">+</span>00000080 – U<span style="color: #339933;">+</span>000007FF<span style="color: #339933;">:</span>    110xxxxx 10xxxxxx
U<span style="color: #339933;">+</span>00000800 – U<span style="color: #339933;">+</span>0000FFFF<span style="color: #339933;">:</span>    1110xxxx 10xxxxxx 10xxxxxx
U<span style="color: #339933;">+</span>00010000 – U<span style="color: #339933;">+</span>001FFFFF<span style="color: #339933;">:</span>    11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
U<span style="color: #339933;">+</span>00200000 – U<span style="color: #339933;">+</span>03FFFFFF<span style="color: #339933;">:</span>    111110xx 10xxxxxx 10xxxxxx 10xxxxxx  10xxxxxx
U<span style="color: #339933;">+</span>04000000 – U<span style="color: #339933;">+</span>7FFFFFFF<span style="color: #339933;">:</span>    1111110x 10xxxxxx 10xxxxxx 10xxxxxx  10xxxxxx 10xxxxxx
&nbsp;
<span style="color: #006600; font-style: italic;">//ps: Unicode在范围D800-DFFF中不存在任何字符</span></pre></td></tr></table></div>

<p>第一行的意思是：如果遇到0xxxxxxx(以0开头)的UTF8编码，则说明这是单字节表示的ASCII字符（0&#215;00-0&#215;7F）。</p>
<p>在一长串二进制中，有可能2-6个字节来表示一个字符，这样的话就需要额外的信息来描述多字节字符<br />
的起始位置(starter)，以及字节的长度(length)</p>
<p>接下来的几行表明：如果遇到10xxxxxx(以10开头)的字节，说明这是一个非ASCII字符中的一个字节，并且不是该字符的第一个字节编码。那么，除去以0和10开头的字节都是字符的首字节了。如果字节是110开头就<br />
表示这是一个两字节字符，如果是1110，就表示这是一个三字节字符&#8230;以此类推，可以看出首字节的1的个数就表示这个字符占有的字节个数<br />
(length)。</p>
<h3>UTF-8编码示例</h3>
<p>看明白这个表以后，举例说明下字符的UTF-8编码。以“零”这个汉字为例：</p>
<p>“零”的unicode码是38646，对应十六进制码是ox96f6。转换成二进制为1001011011110110。根据上面的理论，“零”（0&#215;96f6）在U+0800-U+FFFF区间内，需要用三个字节编码，把这些二进制码拆<br />
分放到“1110xxxx  10xxxxxx 10xxxxxx”各个x处（从低位往高位放，高位不足补0），组合得<strong>11101001 10011011 10110110</strong>，“零”就是以这样的二进制字节流存储和传输的。</p>
<p>把上面得到的三个二进制数转换成十六进制，可得：0xE9,0&#215;9B,0xB6，然后我们在javascript中用encodeURI方法对“零”编码，得到%E9%9B%B6，很眼熟吧，就是前面的3个二进制数的十六进制表示。（encodeURI是一种percent encoding，ECMA262上有记载，但据说该编码没有通过w3标准）</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">    <span style="color: #006600; font-style: italic;">// 说明：零的unicode为38646， 38646 == ox96F6 == 1001011011110110</span>
    <span style="color: #003366; font-weight: bold;">var</span> z <span style="color: #339933;">=</span> <span style="color: #3366CC;">'零'</span> <span style="color: #339933;">;</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'11101001'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 e9</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'10011011'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 9b</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>parseInt<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'10110110'</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 b6</span>
&nbsp;
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">encodeURI</span><span style="color: #009900;">&#40;</span>z<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/%/gi</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'  '</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 e9 9b b6</span></pre></td></tr></table></div>

</pre>
<h3>HTML和Javascript中使用Unicode</h3>
<p>HTML和Javascript都是支持Unicode字符集的，所以你可以在HTML中直接使用Unicode码来表示字符，符号实体就是这样的应用。比如我们用"&gt;"或者"&#62;"来表示">"，前一种方式叫做<strong>符号实体</strong>，后一种方式叫做<strong>实体编号</strong>。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">    <span style="color: #006600; font-style: italic;">// 说明：零的unicode为38646， 38646 == ox96F6 == 1001011011110110</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 以下HTML语言在浏览器中会输出两个“零”</span>
    <span style="color: #339933;">&lt;</span>strong<span style="color: #339933;">&gt;&amp;</span>#<span style="color: #CC0000;">38646</span><span style="color: #339933;">;&lt;/</span>strong<span style="color: #339933;">&gt;</span>
    <span style="color: #339933;">&lt;</span>strong<span style="color: #339933;">&gt;&amp;</span>#x96f6<span style="color: #339933;">;&lt;/</span>strong<span style="color: #339933;">&gt;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> z <span style="color: #339933;">=</span> <span style="color: #3366CC;">'零'</span> <span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// 在javascript也可以直接是用unicode码来表示字符</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\u</span>96f6'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">//输出 零</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>String.<span style="color: #660066;">fromCharCode</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'38646'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 零</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 查看“零”的Unicode码和十六进制码</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>z.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 38646</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>z.<span style="color: #660066;">charCodeAt</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">16</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 96f6</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// escape编码——percent encoding，返回百分比格式的十六进制</span>
    console.<span style="color: #660066;">log</span><span style="color: #009900;">&#40;</span>escape<span style="color: #009900;">&#40;</span>z<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//输出 %u96f6</span></pre></td></tr></table></div>

<p>PS: 感谢stauren</p>
<p>参考：<br />
<a href="http://en.wikipedia.org/wiki/Charset" >http://en.wikipedia.org/wiki/Charset</a><br />
<a href="http://en.wikipedia.org/wiki/Character" >http://en.wikipedia.org/wiki/Character</a><br />
<a href="http://en.wikipedia.org/wiki/Unicode" >http://en.wikipedia.org/wiki/Unicode</a><br />
<a href="http://en.wikipedia.org/wiki/Utf-8" >http://en.wikipedia.org/wiki/Utf-8</a><br />
<a href="http://stauren.net/log/fpev3c89q.html" >http://stauren.net/log/fpev3c89q.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/character-set-and-character-encoding.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>关于reflow和repaint</title>
		<link>http://icolin.org/javascript/about-reflow-and-repaint.html</link>
		<comments>http://icolin.org/javascript/about-reflow-and-repaint.html#comments</comments>
		<pubDate>Sat, 19 Mar 2011 15:51:18 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=213</guid>
		<description><![CDATA[最近又重新查阅了一些关于reflow(回流)、repaint(重绘)的资料，整理成笔记：
1. 什么是reflow和repaint
“Repaint is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. ”
“Reflow is a more significant change. It is the name of the web browser process for re-calculating the positions and geometries of elements in the document”
Repaint发生在当某些元素由不可见变为可见，或由可见变为可见的情况下，前提是不改变文档的layout模型。
Reflow是一个更加明显的改变，它是浏览器重新计算文档元素的尺寸和位置的一个过程。
2. 什么情况下会发生reflow和repaint
a) Repaint

Adding an outline to [...]]]></description>
			<content:encoded><![CDATA[<p>最近又重新查阅了一些关于reflow(回流)、repaint(重绘)的资料，整理成笔记：</p>
<h3>1. 什么是reflow和repaint</h3>
<blockquote><p>“Repaint is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. ”<br />
“Reflow is a more significant change. It is the name of the web browser process for re-calculating the positions and geometries of elements in the document”</p></blockquote>
<p>Repaint发生在当某些元素由不可见变为可见，或由可见变为可见的情况下，前提是不改变文档的layout模型。<br />
Reflow是一个更加明显的改变，它是浏览器重新计算文档元素的尺寸和位置的一个过程。</p>
<h3>2. 什么情况下会发生reflow和repaint</h3>
<p>a) Repaint</p>
<ul>
<li>Adding an outline to a element //增加outline属性</li>
<li>Changing the background color //改变背景色</li>
<li>Changing the visibility style //改变visibility属性</li>
</ul>
<p>b) Reflow</p>
<ul>
<li>Resize the window //调整浏览器窗口大小</li>
<li>A script manipulating DOM tree //脚本操作DOM</li>
<li>Manipulating the className property of an element //操纵className属性</li>
<li>Style changed that affect the layout //修改影响layout的样式</li>
<li>Adding or removing a stylesheet //添加一处样式表</li>
<li>Calculating offsetWidth and offsetHeight //计算offsetWidth和offsetHeight</li>
<li>Contents changed,such as typing text in an input box //内容改变，比如在文本框内输入文本</li>
<li>Activation of CSS pseudo classes  //激活伪类</li>
</ul>
<h3>3. reflow和repaint带来什么影响</h3>
<p>过多Reflow和Repaint会导致DOM渲染变慢，甚至破坏layout模型</p>
<blockquote><p>Repaint requires the engine to search through all elements to determine what is visible, and what should be displayed.<br />
The engine must reflow the relevant element to work out where the various parts of it should now be displayed. Its children will also be reflowed to take the new layout of their parent into account. Elements that appear after the element in the DOM will also be reflowed to calculate their new layout, as they may have been moved by the initial reflows. Ancestor elements will also reflow, to account for the changes in size of their children. Finally, everything is repainted.</p></blockquote>
<p>对于Repaint，需要浏览器引擎搜索整个DOM节点，然后决定各部分该如何呈现。<br />
对于Reflow，引擎需要reflow相关的元素来计算各部分的现实方式，该元素的子节点也要根据新的layout模型reflow，出现在该元素之后的元素也需要reflow来计算新的layout模型，因为他们可能被初始化reflow移除掉，并且该元素的祖先元素也要reflow来计算这些子级元素的改变，总之，所有的都被repaint了。</p>
<p>下图列举了各浏览器对于各种样式修改引发的reflow次数：<br />
<a href="http://icolin.org/blog/wp-content/uploads/2011/03/reflow-time.png"><img class="size-full wp-image-240" title="reflow time by various browser" src="http://icolin.org/blog/wp-content/uploads/2011/03/t.png" alt="reflow time by various browser" width="401" height="301" /></a></p>
<h3>4. 如何避免reflow</h3>
<ul>
<li>Reduce unnecessary DOM depth //减少不必要的DOM层级</li>
<li>Making several style changes at once //一次修改多个样式</li>
<li>Avoid tables for layout //避免使用table布局</li>
<li>Avoid css expression //避免使用cssExpression</li>
<li>Apply animations to elements that are position fixed or absolute //让动画元素绝对或者固定定位</li>
<li>Trading smoothness for speed //牺牲流畅度来换取速度</li>
<li>Avoid inspecting large numbers of nodes //避免大规模操作节点</li>
<li>Avoid modifications while traversing the DOM //避免边渲染DOM边改变DOM</li>
<li>Cache DOM values in script variables //缓存DOM信息</li>
</ul>
<h3>5. 实例</h3>
<p>Bug描述：winxp的IE7/8浏览器中，搜索页面会在页面加载后异步载入部分DOM结构，此时后面的DOM内容位置偏离了原始位置（见红框部分DOM内容）。<br />
<a href="http://icolin.org/blog/wp-content/uploads/2011/03/bug-caused-by-reflow.jpg"><img src="http://icolin.org/blog/wp-content/uploads/2011/03/bug-caused-by-reflow.jpg" alt="bug-caused-by-reflow" title="bug-caused-by-reflow" width="444" height="364" class="alignnone size-full wp-image-250" /></a></p>
<p>分析：javascript脚本操作DOM时引起的reflow导致祖先节点reflow和同一个祖先节点下的临近节点的reflow。在reflow时，layout模型发生了变化，部分浏览器引擎重新计算DOM的位置发生了一些错误。</p>
<h3>6. 参考文献</h3>
<ul>
<li><a href="http://code.google.com/intl/zh-CN/speed/articles/reflow.html" target="_blank">http://code.google.com/intl/zh-CN/speed/articles/reflow.html</a></li>
<li><a href="http://code.google.com/intl/zh-CN/speed/tools.html">http://code.google.com/intl/zh-CN/speed/tools.html</a></li>
<li><a href="https://developer.mozilla.org/en/Notes_on_HTML_Reflow" target="_blank">https://developer.mozilla.org/en/Notes_on_HTML_Reflow</a></li>
<li><a href="http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow" target="_blank">http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow</a></li>
<li><a href="http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/" target="_blank">http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/about-reflow-and-repaint.html/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>区分IE和非IE的最短判断</title>
		<link>http://icolin.org/javascript/check-browser-is-ie-or-not.html</link>
		<comments>http://icolin.org/javascript/check-browser-is-ie-or-not.html#comments</comments>
		<pubDate>Sun, 27 Feb 2011 13:16:44 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=205</guid>
		<description><![CDATA[由于会议邀请者的系统时间出错，我被早到了一个小时到达会议室，闲着无聊，就顺便看看新闻，在JE里面看到一个“区分IE和非IE的最短判断”，帖子中的解释是：根据IE在对数组使用toString方法时报错来判断，代码大致如下：

1
2
3
4
5
if &#40;+&#91;1,&#93;&#41;&#123;
    alert&#40;'您正在使用非IE浏览器'&#41;;
&#125;else &#123;
    alert&#40;'您正在使用IE浏览器'&#41;;
&#125;

Well，这里使用了一元加法运算符，对这个不了解到可以看看下面的代码（关于对数组使用一元加法运算符，我暂时没找到正规文档，只好以实例来说明来推测）：

1
2
3
4
// 当数组只有1个元素时，返回这个数组元素
alert&#40;+&#91;1&#93;&#41;;
// 当数组长度大于1时，返回NaN
alert&#40;+&#91;1,2&#93;&#41;;

好吧，其实我想说“区分IE和非IE的最短判断”的是根据IE和标准浏览器对数组容错处理不一致的特性来实现的。
标准浏览器会忽悠数组中最后一个&#8221;,&#8221; （当作这是开发者不小心写上去的）， 而IE则不会忽略它，而且用undefined来填充最后一个数组元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = &#91;1,&#93; ;
// 查看数组a的length属性 枚举数组
// 通过这两步可以测试出非IE是忽略掉数组中最后一个空元素的
// 而IE却用undefined来填充最后一个元素
alert&#40;&#91;1,&#93;.length&#41;;
for &#40;var i = 0, le = a.length ; i &#60; le; i++ &#41; &#123;
    alert&#40;a&#91;i&#93;&#41;;
&#125;
&#160;
// 由上述得知 +[1,] 相当于 +[1, undefined] 
// 根据上面一元运算符的实例，你不难想到在IE下+[1,]会返回NaN了
alert&#40;+&#91;1,&#93;&#41;;
alert&#40;+&#91;1,undefined&#93;&#41;;

&#8212;&#8211; split &#8212;&#8211;
BTW：最近时间排得紧，走路都在想些事情，以至于生活方面的事情都有点昏昏的，买东西忘了拿找零，取钱忘记了拿。一心无二用，以后做什么事情都要专注，哪怕是取钱，也要盯着带着印钞机余温的RMB从ATM中徐徐吐出，然后收回卡，放好钱包再走人。
]]></description>
			<content:encoded><![CDATA[<p>由于会议邀请者的系统时间出错，我被早到了一个小时到达会议室，闲着无聊，就顺便看看新闻，在JE里面看到一个“区分IE和非IE的最短判断”，帖子中的解释是：根据IE在对数组使用toString方法时报错来判断，代码大致如下：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'您正在使用非IE浏览器'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'您正在使用IE浏览器'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Well，这里使用了<strong>一元加法运算符</strong>，对这个不了解到可以看看下面的代码（关于对数组使用一元加法运算符，我暂时没找到正规文档，只好以实例来说明来推测）：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// 当数组只有1个元素时，返回这个数组元素</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 当数组长度大于1时，返回NaN</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>好吧，其实我想说“区分IE和非IE的最短判断”的是根据IE和标准浏览器对数组容错处理不一致的特性来实现的。</p>
<p>标准浏览器会忽悠数组中最后一个&#8221;,&#8221; （当作这是开发者不小心写上去的）， 而IE则不会忽略它，而且用undefined来填充最后一个数组元素。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> a <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">// 查看数组a的length属性 枚举数组</span>
<span style="color: #006600; font-style: italic;">// 通过这两步可以测试出非IE是忽略掉数组中最后一个空元素的</span>
<span style="color: #006600; font-style: italic;">// 而IE却用undefined来填充最后一个元素</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> le <span style="color: #339933;">=</span> a.<span style="color: #660066;">length</span> <span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> le<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span>a<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// 由上述得知 +[1,] 相当于 +[1, undefined] </span>
<span style="color: #006600; font-style: italic;">// 根据上面一元运算符的实例，你不难想到在IE下+[1,]会返回NaN了</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>undefined<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>&#8212;&#8211; split &#8212;&#8211;</p>
<p>BTW：最近时间排得紧，走路都在想些事情，以至于生活方面的事情都有点昏昏的，买东西忘了拿找零，取钱忘记了拿。一心无二用，以后做什么事情都要专注，哪怕是取钱，也要盯着带着印钞机余温的RMB从ATM中徐徐吐出，然后收回卡，放好钱包再走人。</p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/check-browser-is-ie-or-not.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>2010年的流水账</title>
		<link>http://icolin.org/life/life-in-the-year-2010.html</link>
		<comments>http://icolin.org/life/life-in-the-year-2010.html#comments</comments>
		<pubDate>Fri, 11 Feb 2011 05:29:37 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Life]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=172</guid>
		<description><![CDATA[第一季度

遭遇两次重感冒，两次都去医院输液才恢复，真郁闷啊！看来久宅必病啊，我得动起来，
于是我便去同事组的足球队凑热闹了。快乐并痛着，短短几个月，摔伤两次，撞伤两次。
两个项目都上线了，关注数据反馈，及时优化。

第二季度

夏天临近，心情也逐渐躁动起来，在这个躁动的季节，躁动的我遭遇了很多事情.好的，不好的，扑面而来，我尽力冷静地分析思考再选择，然而在某些环节上，我依然离谱的错了。错的不能以常理推断我为何会做出那样的举动，仔细回想下，其实这种类似的举动，我高一就有过。冷汗！下不为例。
团队小outting，我居然忘了地名，只记得那里的瀑布和那片适合踢球的草坪了
在这个季度末，我辞职了


第三季度

开始了新的征程，感觉有点昏。首月是新环境的适应期,适应之后便是一如既往的上下班和折腾，本想拉omiga入团的，谁知那小子一心吵着要跟老婆走。
和CM小聚了一下
去大连看小迟,看到了大海(兴奋)
开始玩freeline,快乐背后总是有痛苦默默伴随,摔伤N次,有次摔得手都伸不直,痛得看AV都睡不着觉。
国庆的时候，回了两次家，一次看望家人，一次庆祝兄弟结婚。

第四季度

团队业余产出物获奖了，珠海泡温泉;
去广州看望阿毛、哑铃、耗子、军君等读研的兄弟(阿毛踩着自行车载我并高歌爱情买卖的情景至今让我捧腹,紧紧地为哑铃的自行车捏一把汗 -_-!)
开了N次年会，哥神马奖都没中，情何以堪！
最后一个月重心放在做内部工具
 哥开始折腾VIM

年假

享受一个人的宅男生活，看了几部动画片，在看片的间隙温习了几把游戏；
和omiga打游戏，逛红树林，食饭，喝酒；
独自去大梅沙游泳，在沙滩上翻滚！

2011 should be more Geilivable !
]]></description>
			<content:encoded><![CDATA[<p><strong>第一季度</strong></p>
<ul>
<li>遭遇两次重感冒，两次都去医院输液才恢复，真郁闷啊！看来久宅必病啊，我得动起来，</li>
<li>于是我便去同事组的足球队凑热闹了。快乐并痛着，短短几个月，摔伤两次，撞伤两次。</li>
<li>两个项目都上线了，关注数据反馈，及时优化。</li>
</ul>
<p><br/><strong>第二季度</strong></p>
<ul>
<li>夏天临近，心情也逐渐躁动起来，在这个躁动的季节，躁动的我遭遇了很多事情.好的，不好的，扑面而来，我尽力冷静地分析思考再选择，然而在某些环节上，我依然离谱的错了。错的不能以常理推断我为何会做出那样的举动，仔细回想下，其实这种类似的举动，我高一就有过。冷汗！下不为例。</li>
<li>团队小outting，我居然忘了地名，只记得那里的瀑布和那片适合踢球的草坪了</li>
<li>在这个季度末，我辞职了</li>
</ul>
<p><span id="more-172"></span><br />
<strong>第三季度</strong></p>
<ul>
<li>开始了新的征程，感觉有点昏。首月是新环境的适应期,适应之后便是一如既往的上下班和折腾，本想拉omiga入团的，谁知那小子一心吵着要跟老婆走。</li>
<li>和CM小聚了一下</li>
<li>去大连看小迟,看到了大海(兴奋)</li>
<li>开始玩freeline,快乐背后总是有痛苦默默伴随,摔伤N次,有次摔得手都伸不直,痛得看AV都睡不着觉。</li>
<li>国庆的时候，回了两次家，一次看望家人，一次庆祝兄弟结婚。</li>
</ul>
<p><br/><strong>第四季度</strong></p>
<ul>
<li>团队业余产出物获奖了，珠海泡温泉;</li>
<li>去广州看望阿毛、哑铃、耗子、军君等读研的兄弟(阿毛踩着自行车载我并高歌爱情买卖的情景至今让我捧腹,紧紧地为哑铃的自行车捏一把汗 -_-!)</li>
<li>开了N次年会，哥神马奖都没中，情何以堪！</li>
<li>最后一个月重心放在做内部工具</li>
<li> 哥开始折腾VIM</li>
</ul>
<p><br/><strong>年假</strong></p>
<ul>
<li>享受一个人的宅男生活，看了几部动画片，在看片的间隙温习了几把游戏；</li>
<li>和omiga打游戏，逛红树林，食饭，喝酒；</li>
<li>独自去大梅沙游泳，在沙滩上翻滚！</li>
</ul>
<p><br/><strong>2011 should be more Geilivable !</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/life/life-in-the-year-2010.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery源码阅读笔记(1)</title>
		<link>http://icolin.org/javascript/jquery-sourcecode-reading.html</link>
		<comments>http://icolin.org/javascript/jquery-sourcecode-reading.html#comments</comments>
		<pubDate>Sun, 16 Jan 2011 15:25:36 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=160</guid>
		<description><![CDATA[“阅读jQuery源码”，在2010年尾时，我写下了这个plan。该是执行的时候了。
我选择的jQuery版本是1.4.4，在逐行阅读分析jQuery代码前，我首先快速阅读了jQuery的全部代码，大致了解了jQuery源码的结构：整个jQuery源码是一个自执行的匿名函数。给匿名函数有个传递一个window参数，这样做便于压缩源码内的window字符串。在源码中，通过自执行函数来将jQuery和$变量保留给全局作用域供用户使用（#898）。
在接下来的时间，我将jQuery源码分成几大块进行逐行阅读分析。本文记录了第一部分的一些笔记。
构造jQuery对象（#20-#898）
jQuery对象并不是new jQuery()生成的，而是实例化构造函数jQuery.fn.init()生成的，看看源码中这几个关系：

1
2
3
4
5
6
7
8
jQuery.prototype = jQuery.fn #99
//  jQuery的fn属性和其原型是指向同一个对象
&#160;
jQuery.fn.init.prototype = jQuery.fn  #327
// 把jQuery的原型挂在jQuery.fn.init的原型链上，以便于外部的jQuery对象能访问jQuery原型链上的所有方法
&#160;
jQuery.extend = jQuery.fn.extend #329
// 他们指向同一个扩展方法

这个部分伊始定义了很多正则，比如判断查询器字符类型的，判断JSON数据相关的，判断浏览器userAgent等待。还有定义一些Object方法的别名。
jQuery的原型函数
在#99开始定义jQuery的原型，jQuery大部分功能都是通过其的静态方法来实现的，原型中的方法只是暴露给外部的API接口，其中：

init方法根据传递的selector参数查询出对应的对象并返回；
get方法会根据传递参数返回指定的对象元素；
pushStack方法将传递的对象压入jQuery对象中；
each 你懂的；
ready 判断DOM是否加载完毕；
eq 根据参数获取指定位置的数组元素；


扩展函数——extend
这是jQuery源码用得最为频繁的一个方法了，很多jQuery的方法都是通过此函数扩展来的。extend方法可以将几个对象扩展到一个空对象上（对象合并），也可以将对象扩展到jQuery本身。而且支持深度克隆。
关于extend方法，有个疑问：

1
2
3
4
5
6
7
clone = src &#38;amp;&#38;amp; jQuery.isArray&#40;src&#41; ? src : &#91;&#93;  #371
// 深度克隆对象时必须保证对象类型一致
...
target&#91;name&#93; = jQuery.extend&#40;deep, clone, copy&#41;; #378
...
// 如果目标对象的a属性是一个字符串，而源对象的a属性是一个数组
// 那么扩展后岂不是改变了目标对象a属性的类型了？

jQuery的静态方法——ready
ready方法用来判断DOM是否加载完毕，jQuery会把onDOMReady后要执行的函数放入一个列表中，对于支持W3C标准事件的浏览器，使用DOMContentLoaded事件来完成这一任务。对于不支持DOMContentLoaded的浏览器，比如IE，使用doScrollCheck方法来判断DOM是否加载完毕（doScrollCheck，即反复执行document.documentElement的doScroll方法，如果执行成功则表示DOM完全加载，业界大部分js库使用这种方法判断IE中DOM是否加载完毕。）
jQuery的静态方法——each
遍历对象元素，执行callback方法，如果执行结果为false，则返回。最终返回初始传入的对象，便于链式调用。
jQuery的静态方法——inArray
inArray开始判断了Array对象本身是否具有indexOf方法，如果没有的话才重写inArray。估计John Resig认为在Array对象就应该要有indexOf方法的。不知道ES5的规范中有无给Array对象加入这个便捷的方法呢。
jQuery的静态方法——access
仔细看过源码才知道，access方法是在调用函数前修正参数的。整个源码中就用到了两次。

1
2
3
4
5
// value 可以是一个回调函数哦，这样的话在写js时会很方便了
// write less , do more , and learn more
access: function &#40;elems, key, value, exec, fn, [...]]]></description>
			<content:encoded><![CDATA[<p>“阅读jQuery源码”，在2010年尾时，我写下了这个plan。该是执行的时候了。</p>
<p>我选择的jQuery版本是1.4.4，在逐行阅读分析jQuery代码前，我首先快速阅读了jQuery的全部代码，大致了解了jQuery源码的结构：整个jQuery源码是一个自执行的匿名函数。给匿名函数有个传递一个window参数，这样做便于压缩源码内的window字符串。在源码中，通过自执行函数来将jQuery和$变量保留给全局作用域供用户使用（#898）。</p>
<p>在接下来的时间，我将jQuery源码分成几大块进行逐行阅读分析。本文记录了第一部分的一些笔记。</p>
<h3>构造jQuery对象（#20-#898）</h3>
<p>jQuery对象并不是new jQuery()生成的，而是实例化构造函数jQuery.fn.init()生成的，看看源码中这几个关系：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span> #<span style="color: #CC0000;">99</span>
<span style="color: #006600; font-style: italic;">//  jQuery的fn属性和其原型是指向同一个对象</span>
&nbsp;
jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">init</span>.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span>  #<span style="color: #CC0000;">327</span>
<span style="color: #006600; font-style: italic;">// 把jQuery的原型挂在jQuery.fn.init的原型链上，以便于外部的jQuery对象能访问jQuery原型链上的所有方法</span>
&nbsp;
jQuery.<span style="color: #660066;">extend</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span> #<span style="color: #CC0000;">329</span>
<span style="color: #006600; font-style: italic;">// 他们指向同一个扩展方法</span></pre></td></tr></table></div>

<p>这个部分伊始定义了很多正则，比如判断查询器字符类型的，判断JSON数据相关的，判断浏览器userAgent等待。还有定义一些Object方法的别名。</p>
<h4>jQuery的原型函数</h4>
<p>在#99开始定义jQuery的原型，jQuery大部分功能都是通过其的静态方法来实现的，原型中的方法只是暴露给外部的API接口，其中：</p>
<ul>
<li>init方法根据传递的selector参数查询出对应的对象并返回；</li>
<li>get方法会根据传递参数返回指定的对象元素；</li>
<li>pushStack方法将传递的对象压入jQuery对象中；</li>
<li>each 你懂的；</li>
<li>ready 判断DOM是否加载完毕；</li>
<li>eq 根据参数获取指定位置的数组元素；</li>
</ul>
<p><span id="more-160"></span></p>
<h4>扩展函数——extend</h4>
<p>这是jQuery源码用得最为频繁的一个方法了，很多jQuery的方法都是通过此函数扩展来的。extend方法可以将几个对象扩展到一个空对象上（对象合并），也可以将对象扩展到jQuery本身。而且支持深度克隆。</p>
<p><del datetime="2011-01-16T14:28:20+00:00">关于extend方法，有个疑问：</del></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">clone <span style="color: #339933;">=</span> src <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> jQuery.<span style="color: #660066;">isArray</span><span style="color: #009900;">&#40;</span>src<span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> src <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span>  #<span style="color: #CC0000;">371</span>
<span style="color: #006600; font-style: italic;">// 深度克隆对象时必须保证对象类型一致</span>
...
<span style="color: #660066;">target</span><span style="color: #009900;">&#91;</span><span style="color: #000066;">name</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span>deep<span style="color: #339933;">,</span> clone<span style="color: #339933;">,</span> copy<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> #<span style="color: #CC0000;">378</span>
...
<span style="color: #006600; font-style: italic;">// 如果目标对象的a属性是一个字符串，而源对象的a属性是一个数组</span>
<span style="color: #006600; font-style: italic;">// 那么扩展后岂不是改变了目标对象a属性的类型了？</span></pre></td></tr></table></div>

<h4>jQuery的静态方法——ready</h4>
<p>ready方法用来判断DOM是否加载完毕，jQuery会把onDOMReady后要执行的函数放入一个列表中，对于支持W3C标准事件的浏览器，使用DOMContentLoaded事件来完成这一任务。对于不支持DOMContentLoaded的浏览器，比如IE，使用doScrollCheck方法来判断DOM是否加载完毕（doScrollCheck，即反复执行document.documentElement的doScroll方法，如果执行成功则表示DOM完全加载，业界大部分js库使用这种方法判断IE中DOM是否加载完毕。）</p>
<h4>jQuery的静态方法——each</h4>
<p>遍历对象元素，执行callback方法，如果执行结果为false，则返回。最终返回初始传入的对象，便于链式调用。</p>
<h4>jQuery的静态方法——inArray</h4>
<p>inArray开始判断了Array对象本身是否具有indexOf方法，如果没有的话才重写inArray。估计John Resig认为在Array对象就应该要有indexOf方法的。不知道ES5的规范中有无给Array对象加入这个便捷的方法呢。</p>
<h4>jQuery的静态方法——access</h4>
<p>仔细看过源码才知道，access方法是在调用函数前修正参数的。整个源码中就用到了两次。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// value 可以是一个回调函数哦，这样的话在写js时会很方便了</span>
<span style="color: #006600; font-style: italic;">// write less , do more , and learn more</span>
access<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>elems<span style="color: #339933;">,</span> key<span style="color: #339933;">,</span> value<span style="color: #339933;">,</span> exec<span style="color: #339933;">,</span> fn<span style="color: #339933;">,</span> pass<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    ...
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>其中一些比较基础的静态方法就没有记录了。你懂的~</p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/jquery-sourcecode-reading.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>jQuery 动画组件(Animate)浅析</title>
		<link>http://icolin.org/javascript/jquery-animation.html</link>
		<comments>http://icolin.org/javascript/jquery-animation.html#comments</comments>
		<pubDate>Sun, 26 Dec 2010 07:43:36 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=143</guid>
		<description><![CDATA[之前自己在做js动画组件时遇到了JS时钟精度问题，遂去参考下jQuery的处理方式，顺便把jQuery的动画组件部分简要分析了一遍。
jQuery组件都是由一个API接口函数暴露给用户的，组件的核心功能由有底层函数去完成。JQuery动画组件的接口函数就是animate。在了解animate之前，先了解到jQuery中动画相关的几个属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 用来设置定时器的变量
var timerId ;
&#160;
jQuery.extend&#40;&#123;
    // 修正一些参数，比如在回调函数中加入队列控制，并把这些修正后的参数放置一个对象里面返回
    speed: function&#40; speed, easing, fn &#41; &#123;&#125;,
&#160;
    // 缓冲函数，决定动画运行方式
    easing: &#123;&#125;,
&#160;
    // 用来存储 执行动画实例单步的方法 的数组（有点拗口）
    timers: &#91;&#93;,
&#160;
    // 动画构造函数
    fx: function&#40; elem, options, prop &#41; [...]]]></description>
			<content:encoded><![CDATA[<p>之前自己在做js动画组件时遇到了<a href="http://icolin.org/?p=95" target="_blank">JS时钟精度问题</a>，遂去参考下jQuery的处理方式，顺便把jQuery的动画组件部分简要分析了一遍。</p>
<p>jQuery组件都是由一个API接口函数暴露给用户的，组件的核心功能由有底层函数去完成。JQuery动画组件的接口函数就是animate。在了解animate之前，先了解到jQuery中动画相关的几个属性：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// 用来设置定时器的变量</span>
<span style="color: #003366; font-weight: bold;">var</span> timerId <span style="color: #339933;">;</span>
&nbsp;
jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// 修正一些参数，比如在回调函数中加入队列控制，并把这些修正后的参数放置一个对象里面返回</span>
    speed<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> fn <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 缓冲函数，决定动画运行方式</span>
    easing<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 用来存储 执行动画实例单步的方法 的数组（有点拗口）</span>
    timers<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 动画构造函数</span>
    fx<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> elem<span style="color: #339933;">,</span> options<span style="color: #339933;">,</span> prop <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>结合我在源码中加的一些注释，简要描述jQuery的动画过程：<br />
<strong>animate</strong>方法，首先调用<strong>speed</strong>方法去修正参数，然后用枚举或者队列的方式去执行多个动画。接下来，遍历动画中要修改的属性，修正属性值，并将每个属性生成一个动画实例。调用实例<strong>custom</strong>方法将属性从开始值过渡到结束值。</p>
<p><strong>custom</strong>方法，把动画的单步操作(<strong>step</strong>方法)压入到前面提到的timers数组中，并调用<strong>tick</strong>遍历执行所有动画。</p>
<p><strong>step</strong>方法——动画的单步操作，计算动画的逝去时间，并将逝去时间与预定动画时长的比值作为动画的变化比值，将比比值结合动画缓冲函数，计算出动画变化值。如果动画逝去时间超过预定动画时长，则将属性更新到最后一帧，并调用预定的回调函数。返回false，表示该动画实例已完成。</p>
<p><strong>tick</strong>方法——定时遍历执行所有动画实例的step方法。如果step方法返回为false（该动画实例已完成），则将包含执行step方法的函数从timers数组中移除，如果timers数组为空（全部动画实例都运行完毕），执行stop方法。</p>
<p><strong>stop</strong>方法——终止动画，停止定时器，并清空定时器变量timerId</p>
<p>看完jQuery源码，自己也改造了一个。满足最基本的功能呢 <a href="http://icolin.org/demo/jq_anim_demo.html" target="_blank">查看Demo</a></p>
<p>下面是JQuery动画组件的大部分源码（我加了一些注释）：<br />
<span id="more-143"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">jQuery.<span style="color: #660066;">fn</span>.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// 动画组件接口函数（四个参数分别是要变化的属性以及属性值， 动画时长， 动画缓冲方法， 动画完成的回调函数）</span>
    animate<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> prop<span style="color: #339933;">,</span> speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> callback <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// 调用speed方法修正参数</span>
        <span style="color: #003366; font-weight: bold;">var</span> optall <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">speed</span><span style="color: #009900;">&#40;</span>speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> callback<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 如果属性是空对象，则调用回调函数</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">isEmptyObject</span><span style="color: #009900;">&#40;</span> prop <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> optall.<span style="color: #660066;">complete</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 枚举或者队列的方式来执行多个动画</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#91;</span> optall.<span style="color: #660066;">queue</span> <span style="color: #339933;">===</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;each&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;queue&quot;</span> <span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
            <span style="color: #003366; font-weight: bold;">var</span> opt <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> optall<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> p<span style="color: #339933;">,</span>
                isElement <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nodeType</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span>
                hidden <span style="color: #339933;">=</span> isElement <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066; font-weight: bold;">is</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;:hidden&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
                self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 遍历属性 修正参数</span>
            <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> p <span style="color: #000066; font-weight: bold;">in</span> prop <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// 将属性名修改为驼峰命名</span>
                <span style="color: #003366; font-weight: bold;">var</span> <span style="color: #000066;">name</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">camelCase</span><span style="color: #009900;">&#40;</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> p <span style="color: #339933;">!==</span> <span style="color: #000066;">name</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    prop<span style="color: #009900;">&#91;</span> <span style="color: #000066;">name</span> <span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> prop<span style="color: #009900;">&#91;</span> p <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">delete</span> prop<span style="color: #009900;">&#91;</span> p <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    p <span style="color: #339933;">=</span> <span style="color: #000066;">name</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// 如果当前状态已经是目标状态 则调用回调函数</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;hide&quot;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> hidden <span style="color: #339933;">||</span> prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;show&quot;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>hidden <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> opt.<span style="color: #660066;">complete</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// 如果修改DOM的高度或者宽度属性，则添加相应的css属性 (比如overflow，display等)</span>
                <span style="color: #006600; font-style: italic;">// 太智能了，算不算过渡设计？</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> isElement <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span> p <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;height&quot;</span> <span style="color: #339933;">||</span> p <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;width&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    opt.<span style="color: #660066;">overflow</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">overflow</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">overflowX</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">overflowY</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;display&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;inline&quot;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span>
                            jQuery.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;float&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;none&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>jQuery.<span style="color: #660066;">support</span>.<span style="color: #660066;">inlineBlockNeedsLayout</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;inline-block&quot;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                            <span style="color: #003366; font-weight: bold;">var</span> display <span style="color: #339933;">=</span> defaultDisplay<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">nodeName</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> display <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;inline&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;inline-block&quot;</span><span style="color: #339933;">;</span>
                            <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">display</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;inline&quot;</span><span style="color: #339933;">;</span>
                                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">zoom</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
                            <span style="color: #009900;">&#125;</span>
                        <span style="color: #009900;">&#125;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// 属性为数组? 我是土人，没见到css属性为数组的。或者我领悟错了</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">isArray</span><span style="color: #009900;">&#40;</span> prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #009900;">&#40;</span>opt.<span style="color: #660066;">specialEasing</span> <span style="color: #339933;">=</span> opt.<span style="color: #660066;">specialEasing</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> prop<span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> opt.<span style="color: #660066;">overflow</span> <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">style</span>.<span style="color: #660066;">overflow</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;hidden&quot;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 把属性对象作为opt的一个属性存储起来</span>
            opt.<span style="color: #660066;">curAnim</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> prop<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 遍历属性 执行每个属性的动画</span>
            jQuery.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> prop<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> <span style="color: #000066;">name</span><span style="color: #339933;">,</span> val <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #006600; font-style: italic;">// 为每个属性生成一个动画实例</span>
                <span style="color: #003366; font-weight: bold;">var</span> e <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> jQuery.<span style="color: #660066;">fx</span><span style="color: #009900;">&#40;</span> self<span style="color: #339933;">,</span> opt<span style="color: #339933;">,</span> <span style="color: #000066;">name</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #006600; font-style: italic;">// 如果是使用预定义的动画比如 toggle，show或者hide的，直接调用对应的方法</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> rfxtypes.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>val<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    e<span style="color: #009900;">&#91;</span> val <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;toggle&quot;</span> <span style="color: #339933;">?</span> hidden <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;show&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;hide&quot;</span> <span style="color: #339933;">:</span> val <span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span> prop <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #006600; font-style: italic;">// 修正变化值</span>
                    <span style="color: #003366; font-weight: bold;">var</span> parts <span style="color: #339933;">=</span> rfxnum.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>val<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
                    <span style="color: #006600; font-style: italic;">// 获取当前属性值</span>
                        start <span style="color: #339933;">=</span> e.<span style="color: #660066;">cur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">||</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> parts <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        <span style="color: #003366; font-weight: bold;">var</span> end <span style="color: #339933;">=</span> parseFloat<span style="color: #009900;">&#40;</span> parts<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span>
                            unit <span style="color: #339933;">=</span> parts<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">;</span>
&nbsp;
                        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> unit <span style="color: #339933;">!==</span> <span style="color: #3366CC;">&quot;px&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            jQuery.<span style="color: #660066;">style</span><span style="color: #009900;">&#40;</span> self<span style="color: #339933;">,</span> <span style="color: #000066;">name</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#40;</span>end <span style="color: #339933;">||</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> unit<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                            start <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>end <span style="color: #339933;">||</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> e.<span style="color: #660066;">cur</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> start<span style="color: #339933;">;</span>
                            jQuery.<span style="color: #660066;">style</span><span style="color: #009900;">&#40;</span> self<span style="color: #339933;">,</span> <span style="color: #000066;">name</span><span style="color: #339933;">,</span> start <span style="color: #339933;">+</span> unit<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span>
&nbsp;
                        <span style="color: #006600; font-style: italic;">// 处理相对动画</span>
                        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> parts<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                            end <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span>parts<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;-=&quot;</span> <span style="color: #339933;">?</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">1</span> <span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> end<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> start<span style="color: #339933;">;</span>
                        <span style="color: #009900;">&#125;</span>
&nbsp;
                        <span style="color: #006600; font-style: italic;">// 调用动画实例的custom方法（使属性从开始值变化到最终值）</span>
                        e.<span style="color: #660066;">custom</span><span style="color: #009900;">&#40;</span> start<span style="color: #339933;">,</span> end<span style="color: #339933;">,</span> unit <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                        e.<span style="color: #660066;">custom</span><span style="color: #009900;">&#40;</span> start<span style="color: #339933;">,</span> val<span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;&quot;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// 修正参数</span>
    speed<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> speed<span style="color: #339933;">,</span> easing<span style="color: #339933;">,</span> fn <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// 把参数放入一个对象</span>
        <span style="color: #003366; font-weight: bold;">var</span> opt <span style="color: #339933;">=</span> speed <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">typeof</span> speed <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;object&quot;</span> <span style="color: #339933;">?</span> jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> speed<span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
            complete<span style="color: #339933;">:</span> fn <span style="color: #339933;">||</span> <span style="color: #339933;">!</span>fn <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> easing <span style="color: #339933;">||</span>
                jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span> speed <span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> speed<span style="color: #339933;">,</span>
            duration<span style="color: #339933;">:</span> speed<span style="color: #339933;">,</span>
            easing<span style="color: #339933;">:</span> fn <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> easing <span style="color: #339933;">||</span> easing <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span>easing<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> easing
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 修正easing参数</span>
        opt.<span style="color: #660066;">duration</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">off</span> <span style="color: #339933;">?</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">typeof</span> opt.<span style="color: #660066;">duration</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">&quot;number&quot;</span> <span style="color: #339933;">?</span> opt.<span style="color: #660066;">duration</span> <span style="color: #339933;">:</span>
            opt.<span style="color: #660066;">duration</span> <span style="color: #000066; font-weight: bold;">in</span> jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">speeds</span> <span style="color: #339933;">?</span> jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">speeds</span><span style="color: #009900;">&#91;</span>opt.<span style="color: #660066;">duration</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">:</span> jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">speeds</span>._default<span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 在回调函数中加入队列控制</span>
        opt.<span style="color: #660066;">old</span> <span style="color: #339933;">=</span> opt.<span style="color: #660066;">complete</span><span style="color: #339933;">;</span>
        opt.<span style="color: #660066;">complete</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> opt.<span style="color: #660066;">queue</span> <span style="color: #339933;">!==</span> <span style="color: #003366; font-weight: bold;">false</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">dequeue</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span> opt.<span style="color: #660066;">old</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                opt.<span style="color: #660066;">old</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 返回包含各种参数的对象</span>
        <span style="color: #000066; font-weight: bold;">return</span> opt<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 动画缓冲函数</span>
    easing<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// 线性</span>
        linear<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> p<span style="color: #339933;">,</span> n<span style="color: #339933;">,</span> firstNum<span style="color: #339933;">,</span> diff <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// 匀速直线运动 s = s0 + vt</span>
            <span style="color: #000066; font-weight: bold;">return</span> firstNum <span style="color: #339933;">+</span> diff <span style="color: #339933;">*</span> p<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
        swing<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> p<span style="color: #339933;">,</span> n<span style="color: #339933;">,</span> firstNum<span style="color: #339933;">,</span> diff <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">-</span>Math.<span style="color: #660066;">cos</span><span style="color: #009900;">&#40;</span>p<span style="color: #339933;">*</span>Math.<span style="color: #660066;">PI</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">/</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.5</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> diff <span style="color: #339933;">+</span> firstNum<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 用来存储 执行动画实例单步的方法 的数组（有点拗口）</span>
    timers<span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 动画构造函数</span>
    fx<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> elem<span style="color: #339933;">,</span> options<span style="color: #339933;">,</span> prop <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span> <span style="color: #339933;">=</span> options<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span> <span style="color: #339933;">=</span> elem<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span> <span style="color: #339933;">=</span> prop<span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>options.<span style="color: #660066;">orig</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            options.<span style="color: #660066;">orig</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">prototype</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// 更新css属性</span>
    update<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">step</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">step</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">now</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">step</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">||</span> jQuery.<span style="color: #660066;">fx</span>.<span style="color: #660066;">step</span>._default<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 获取当前属性值</span>
    cur<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span>.<span style="color: #660066;">style</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span>.<span style="color: #660066;">style</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #009900;">&#91;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> r <span style="color: #339933;">=</span> parseFloat<span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> r <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> r <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">10000</span> <span style="color: #339933;">?</span> r <span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 使属性从开始值变化到最终值</span>
    custom<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> from<span style="color: #339933;">,</span> to<span style="color: #339933;">,</span> unit <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> self <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span>
            fx <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">fx</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 把当前时间储存起来</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">startTime</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">now</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span> <span style="color: #339933;">=</span> from<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">end</span> <span style="color: #339933;">=</span> to<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">unit</span> <span style="color: #339933;">=</span> unit <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">unit</span> <span style="color: #339933;">||</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">now</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pos</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">function</span> t<span style="color: #009900;">&#40;</span> gotoEnd <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// 调用动画实现的单步处理方法</span>
            <span style="color: #000066; font-weight: bold;">return</span> self.<span style="color: #660066;">step</span><span style="color: #009900;">&#40;</span>gotoEnd<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        t.<span style="color: #660066;">elem</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 初次执行动画实例的单步</span>
        <span style="color: #006600; font-style: italic;">// 并将执行单步的方法压入timers数组(前面有解释过timers的作用)</span>
        <span style="color: #006600; font-style: italic;">// 设置动画定时器，定时调用tick方法（一个动画中有且只能有一个定时器）</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> t<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> jQuery.<span style="color: #660066;">timers</span>.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>t<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>timerId <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            timerId <span style="color: #339933;">=</span> setInterval<span style="color: #009900;">&#40;</span>fx.<span style="color: #660066;">tick</span><span style="color: #339933;">,</span> fx.<span style="color: #660066;">interval</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 动画单步</span>
    step<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span> gotoEnd <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// 获取当前时间</span>
        <span style="color: #003366; font-weight: bold;">var</span> t <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">now</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> done <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 如果手动结束动画 或者 动画逝去时间大于等于预定动画时长，则结束动画</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> gotoEnd <span style="color: #339933;">||</span> t <span style="color: #339933;">&amp;</span>gt<span style="color: #339933;">;=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">duration</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">startTime</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// 将动画更新到最后一步</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">now</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">end</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pos</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">update</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 设置当前动画实例结束的标志</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">curAnim</span><span style="color: #009900;">&#91;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span> <span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #000066; font-weight: bold;">in</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">curAnim</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">curAnim</span><span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">!==</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    done <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 如果全部动画实例都结束了 则重置相应css属性（比如overflow等），并调用回调函数</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> done <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">overflow</span> <span style="color: #339933;">!=</span> <span style="color: #003366; font-weight: bold;">null</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #339933;">!</span>jQuery.<span style="color: #660066;">support</span>.<span style="color: #660066;">shrinkWrapBlocks</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> elem <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #339933;">,</span>
                        options <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span><span style="color: #339933;">;</span>
&nbsp;
                    jQuery.<span style="color: #660066;">each</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#91;</span> <span style="color: #3366CC;">&quot;&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;X&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">&quot;Y&quot;</span> <span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>index<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        elem.<span style="color: #660066;">style</span><span style="color: #009900;">&#91;</span> <span style="color: #3366CC;">&quot;overflow&quot;</span> <span style="color: #339933;">+</span> value <span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> options.<span style="color: #660066;">overflow</span><span style="color: #009900;">&#91;</span>index<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">hide</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    jQuery<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">hide</span> <span style="color: #339933;">||</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">show</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> p <span style="color: #000066; font-weight: bold;">in</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">curAnim</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        jQuery.<span style="color: #660066;">style</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span><span style="color: #339933;">,</span> p<span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">orig</span><span style="color: #009900;">&#91;</span>p<span style="color: #009900;">&#93;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span>
&nbsp;
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">complete</span>.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">elem</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 返回false</span>
            <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// 计算动画逝去时间</span>
            <span style="color: #003366; font-weight: bold;">var</span> n <span style="color: #339933;">=</span> t <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">startTime</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 计算动画变化比值</span>
            <span style="color: #006600; font-style: italic;">// JQuery每一步的变化值是根据动画逝去时间来计算的，这样来弥补XP系统IE下JS时钟精度问题</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span> <span style="color: #339933;">=</span> n <span style="color: #339933;">/</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">duration</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 根据变化比值，结合动画缓冲函数计算出本帧变化值</span>
            <span style="color: #003366; font-weight: bold;">var</span> specialEasing <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">specialEasing</span> <span style="color: #339933;">&amp;</span>amp<span style="color: #339933;">;&amp;</span>amp<span style="color: #339933;">;</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">specialEasing</span><span style="color: #009900;">&#91;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">prop</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            <span style="color: #003366; font-weight: bold;">var</span> defaultEasing <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">easing</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#40;</span>jQuery.<span style="color: #660066;">easing</span>.<span style="color: #660066;">swing</span> <span style="color: #339933;">?</span> <span style="color: #3366CC;">&quot;swing&quot;</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;linear&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pos</span> <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">easing</span><span style="color: #009900;">&#91;</span>specialEasing <span style="color: #339933;">||</span> defaultEasing<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">state</span><span style="color: #339933;">,</span> n<span style="color: #339933;">,</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">options</span>.<span style="color: #660066;">duration</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">now</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span> <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">end</span> <span style="color: #339933;">-</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">start</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">pos</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">// 更新css属性</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">update</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
jQuery.<span style="color: #660066;">extend</span><span style="color: #009900;">&#40;</span> jQuery.<span style="color: #660066;">fx</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// 执行动画</span>
    tick<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> timers <span style="color: #339933;">=</span> jQuery.<span style="color: #660066;">timers</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 遍历执行动画实例的单步方法</span>
        <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span> <span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> timers.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">// timers[i]就是custom中定义的函数t，用来执行动画实例的单步</span>
            <span style="color: #006600; font-style: italic;">// 如果单步返回为false（表明该动画实例已运行完毕），则将其从timers数组中移除</span>
            <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>timers<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                timers.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">--,</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #006600; font-style: italic;">// 如果timers数组为空（表明全部动画实例都运行完毕了），执行stop</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> <span style="color: #339933;">!</span>timers.<span style="color: #660066;">length</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            jQuery.<span style="color: #660066;">fx</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    interval<span style="color: #339933;">:</span> <span style="color: #CC0000;">13</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 停止定时器，并清空定时器变量</span>
    <span style="color: #000066;">stop</span><span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        clearInterval<span style="color: #009900;">&#40;</span> timerId <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        timerId <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// 预设的speed取值</span>
    speeds<span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        slow<span style="color: #339933;">:</span> <span style="color: #CC0000;">600</span><span style="color: #339933;">,</span>
        fast<span style="color: #339933;">:</span> <span style="color: #CC0000;">200</span><span style="color: #339933;">,</span>
        _default<span style="color: #339933;">:</span> <span style="color: #CC0000;">400</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/jquery-animation.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Editplus一键同步到FTP</title>
		<link>http://icolin.org/php/editplus-sync-to-ftp-server.html</link>
		<comments>http://icolin.org/php/editplus-sync-to-ftp-server.html#comments</comments>
		<pubDate>Sat, 11 Dec 2010 04:22:47 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://icolin.org/?p=129</guid>
		<description><![CDATA[在Dreamweaver中，可以将正在编辑的文件一键同步到FTP服务器中，很是便利。如果Editplus也能快捷同步就好了，想到在Editplus可以调用外部程序或者命令，于是用php写了个同步到FTP的脚本文件，并作为工具添加到Editplus中。
原理很简单：首先定义FTP的相关参数，比如主机名，用户名，密码等；再指定FTP的路径和本地环境的路径，以便于将本地环境中的文件上传到FTP上对应路径，然后通过php的相关函数连接FTP服务器，并上传文件。
脚本配置很简单（脚本地址在文章底部，当然你可以去googleCode上获取）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
&#60;?php
// 定义FTP参数
$ftp_host = '192.168.0.1';
$ftp_user = 'username';
$ftp_pass = 'password';
$ftp_port = 21;
$pasv_mode = true;
&#160;
// 定义开发环境路径
$remote_root_dir = '/domains/xxx.com/public_html/blog' ;
&#160;
// 定义本地上传路径(此路径等价于开发环境路径)
$local_root_path = 'D:/www/blog' ;
&#160;
...


接下来在Editplus中添加这个脚本，点击菜单栏的“工具”——“参数”，添加一个工具（类型选择“程序”）：
a. “菜单文本”这栏填写“Ftp”之类皆可；
b. “命令”这栏选择php.exe的路径；
c. “参数”这栏：  （尖括号里面的内容，其中d:/ftpUpload.php就是php脚本的放置位置，我放在D盘根目录下的。后面的直接Copy过去）
d. 最后，把下面的“捕获输出”勾上

配置好之后，来测试下，打开“本地上传路径”下的一个文件，随意修改下，然后按下 ctrl + 1 (工具的位置拍在第一个就是ctrl+1)，如图：

此时在Editplus的输出窗口就可以看到结果“uploaded”，如图：

点击下载php脚本文件
]]></description>
			<content:encoded><![CDATA[<p>在Dreamweaver中，可以将正在编辑的文件一键同步到FTP服务器中，很是便利。如果Editplus也能快捷同步就好了，想到在Editplus可以调用外部程序或者命令，于是用php写了个同步到FTP的脚本文件，并作为工具添加到Editplus中。</p>
<p>原理很简单：首先定义FTP的相关参数，比如主机名，用户名，密码等；再指定FTP的路径和本地环境的路径，以便于将本地环境中的文件上传到FTP上对应路径，然后通过php的相关函数连接FTP服务器，并上传文件。</p>
<p>脚本配置很简单（脚本地址在文章底部，当然你可以去<a href="http://code.google.com/p/php-colin/downloads/list"><strong>googleCode</strong></a>上获取）：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
<span style="color: #666666; font-style: italic;">// 定义FTP参数</span>
<span style="color: #000088;">$ftp_host</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'192.168.0.1'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$ftp_user</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'username'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$ftp_pass</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'password'</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$ftp_port</span> <span style="color: #339933;">=</span> <span style="color: #cc66cc;">21</span><span style="color: #339933;">;</span>
<span style="color: #000088;">$pasv_mode</span> <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// 定义开发环境路径</span>
<span style="color: #000088;">$remote_root_dir</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'/domains/xxx.com/public_html/blog'</span> <span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">// 定义本地上传路径(此路径等价于开发环境路径)</span>
<span style="color: #000088;">$local_root_path</span> <span style="color: #339933;">=</span> <span style="color: #0000ff;">'D:/www/blog'</span> <span style="color: #339933;">;</span>
&nbsp;
<span style="color: #339933;">...</span></pre></td></tr></table></div>

<p><span id="more-129"></span><br />
接下来在Editplus中添加这个脚本，点击菜单栏的“工具”——“参数”，添加一个工具（类型选择“程序”）：<br />
a. “菜单文本”这栏填写“Ftp”之类皆可；<br />
b. “命令”这栏选择php.exe的路径；<br />
c. <strong>“参数”这栏：</strong><-f d:/ftpUpload.php -- -f $(FilePath)>  （尖括号里面的内容，其中d:/ftpUpload.php就是php脚本的放置位置，我放在D盘根目录下的。后面的直接Copy过去）<br />
d. 最后，把下面的“捕获输出”勾上</p>
<p><a href="http://icolin.org/blog/wp-content/uploads/2010/12/ftpUpload_editplus_config1.png"><img src="http://icolin.org/blog/wp-content/uploads/2010/12/ftpUpload_editplus_config1.png" alt="Editplus 同步到FTP的配置" title="Editplus 同步到FTP的配置" width="482" height="357" class="alignnone size-full wp-image-130" /></a></p>
<p>配置好之后，来测试下，打开“本地上传路径”下的一个文件，随意修改下，然后按下 ctrl + 1 (工具的位置拍在第一个就是ctrl+1)，如图：<br />
<a href="http://icolin.org/blog/wp-content/uploads/2010/12/editplus_ftp_do.png"><img src="http://icolin.org/blog/wp-content/uploads/2010/12/editplus_ftp_do.png" alt="editplus同步FTP操作" title="editplus同步FTP操作" width="405" height="233" class="alignnone size-full wp-image-132" /></a></p>
<p>此时在Editplus的输出窗口就可以看到结果“uploaded”，如图：<br />
<a href="http://icolin.org/blog/wp-content/uploads/2010/12/editplus_ftp_ret.png"><img src="http://icolin.org/blog/wp-content/uploads/2010/12/editplus_ftp_ret.png" alt="editplus 同步FTP结果" title="editplus 同步FTP结果" width="333" height="139" class="alignnone size-full wp-image-133" /></a></p>
<p><a href="http://icolin.org/code/ftpUpload.rar"><strong>点击下载php脚本文件</strong></a></p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/php/editplus-sync-to-ftp-server.html/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>IE下setTimeout 的bug</title>
		<link>http://icolin.org/javascript/settimeout-bug-in-ie-with-winxp.html</link>
		<comments>http://icolin.org/javascript/settimeout-bug-in-ie-with-winxp.html#comments</comments>
		<pubDate>Sat, 06 Nov 2010 08:05:18 +0000</pubDate>
		<dc:creator>icolin</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://icolin.org/blog/?p=95</guid>
		<description><![CDATA[用Js封装了一个常用的动画组件 (googleCode) ，发现动画完成所需的时间在IE和在其他浏览器下有很大的差别。
开始以为是组件中调用的函数过于复杂，导致IE计算太耗时，拖延了整个动画的完成时间。于是选择了最简单的函数来实现动画，但问题依旧存在。排除了函数的复杂性，那就只可能是setTimeout的问题了。
setTimeout(code, millisec); 在指定的毫秒数后调用函数或者表达式。(我在后面将称“指定的毫秒数”为调用间隔)
疑问：IE是否在我指定的毫秒数之后执行了函数呢？
把代码精简到最少，继续测试，下面的的一段代码用来连续10次调用run函数（调用间隔是10ms），执行完后弹出的结果是调用10次函数耗费的总毫秒数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
&#60;script type=&#34;text/javascript&#34;&#62;
//&#60;![CDATA[
var animAlex = function &#40;d&#41; &#123;
    var t = 0 ;
    var run = function &#40;&#41; &#123;
        if &#40;t &#60; d&#41;&#123;
            t++;
     [...]]]></description>
			<content:encoded><![CDATA[<p>用Js封装了一个常用的<a href="http://icolin.org/code/animalex_demo.html" target="_blank" title="点击在新窗口查看demo"><strong>动画组件</strong></a> (<a href="http://code.google.com/p/animalex/" target="_blank" title="我放在googleCode上了，那里有详细的说明">googleCode</a>) ，发现动画完成所需的时间在IE和在其他浏览器下有很大的差别。</p>
<p>开始以为是组件中调用的函数过于复杂，导致IE计算太耗时，拖延了整个动画的完成时间。于是选择了最简单的函数来实现动画，但问题依旧存在。排除了函数的复杂性，那就只可能是setTimeout的问题了。</p>
<blockquote><p>setTimeout(code, millisec); 在指定的毫秒数后调用函数或者表达式。(<strong>我在后面将称“指定的毫秒数”为调用间隔</strong>)</p></blockquote>
<p><strong>疑问：IE是否在我指定的毫秒数之后执行了函数呢？</strong></p>
<p>把代码精简到最少，继续测试，下面的的一段代码用来连续10次调用run函数（调用间隔是10ms），执行完后弹出的结果是调用10次函数耗费的总毫秒数：</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
<span style="color: #006600; font-style: italic;">//&lt;![CDATA[</span>
<span style="color: #003366; font-weight: bold;">var</span> animAlex <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>d<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> t <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> run <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>t <span style="color: #339933;">&lt;</span> d<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            t<span style="color: #339933;">++;</span>
            <span style="color: #006600; font-style: italic;">//尝试修改这里的参数 从0到15 都会按15计算</span>
            setTimeout<span style="color: #009900;">&#40;</span>run<span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">+</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> s <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #339933;">;</span>
    run<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span> <span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> s <span style="color: #339933;">=</span> <span style="color: #339933;">+</span> <span style="color: #003366; font-weight: bold;">new</span> Date<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">;</span>
animAlex<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #006600; font-style: italic;">//]]&gt;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div>

<p> <a href="http://icolin.org/demo/setTimeout.html" title="setTimeout的bug，请分别在IE和其他浏览器下运行" target="_blank">点击查看demo</a></p>
<p>忽略函数执行时间(这里，函数的执行时间确实可忽略)，调用10次函数所需时间的理论值等于调用间隔和执行次数的乘积，这里调用间隔是10ms ， 执行了10次，则总需时间 10&#215;10 = 100ms ，当然浏览器不可能完全精准。但误差也应该保证在正负10ms以内。</p>
<p>面对现实，执行结果是：<br />
<span id="more-95"></span><br />
1. IE下，调用10次函数所需时间平均值为 156ms<br />
2. FF下，调用10次函数所需时间平均值为 102ms<br />
3. chrome下，调用10次函数所需时间平均值为 110ms<br />
4. opera下，调用10次函数所需时间平均值为 110ms </p>
<p>看来IE杯具了，测试继续在上面代码基础上测试，尝试改变调用间隔(time)，经过多次折腾，发现一个不稳定规律：<br />
a. 当time >= 0 &#038;&#038; time < 16 时， 按time = 15计算<br />
b. 当time = 16 ，按 time = 25计算<br />
c. 当time >=17 &#038;&#038; time <=31 时， 按time = 31计算<br />
d. 当time = 32 ，按 time = 42计算<br />
c. 当time >=33 &#038;&#038; time <=46 时， 按time = 46计算<br />
...<br />
很纠结。如果不看中间两个特殊值，姑且可认为IE下setTimeout的调用间隔是根据参数的范围来决定取某个值的</p>
<p>当然只是我个人在本本上测试，测试结果难免有所纰漏，欢迎指正。</p>
<p>最后，当你需要连续调用setTimeout时，为了IE，调用间隔的取值可以是：15ms、 31ms ...</p>
<p>未完待纠结</p>
<p>只是通过暴力测试得出IE下有15~16ms的精度问题，后来<a href="http://omiga.org/">Omiga</a>给我看了这篇文字<br />
<a href="http://blog.csdn.net/aimingoo/archive/2006/12/21/1451556.aspx">再谈JavaScript时钟中的16ms精度问题</a>，才知道自己只看到了表象。</p>
]]></content:encoded>
			<wfw:commentRss>http://icolin.org/javascript/settimeout-bug-in-ie-with-winxp.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

