<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
	<channel>
		<title>UEDMAGAZINE</title>
		<link>http://www.uedmagazine.com/ued/index.php</link>
		<description><![CDATA[京ICP备09055868号]]></description>
		<copyright>Copyright 2010, jayli</copyright>
		<managingEditor>jayli</managingEditor>
		<language>en-US</language>
		<generator>SPHPBLOG 0.5.1</generator>
		<item>
			<title>Yahoo! 15年</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100302-175723</link>
			<description><![CDATA[<object width="215" height="85"><param value="http://l.yimg.com/a/i/mntl/ww/events/mh/us/yahoo/100302/320x85ymha.swf" name="movie"/><embed width="215" height="85" src="http://l.yimg.com/a/i/mntl/ww/events/mh/us/yahoo/100302/320x85ymha.swf"/></object><br /><br />无评论，祝好～]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100302-175723</guid>
			<author>jayli</author>
			<pubDate>Tue, 02 Mar 2010 09:57:23 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=03&amp;entry=entry100302-175723</comments>
		</item>
		<item>
			<title>淘宝前端安全须知</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100301-211525</link>
			<description><![CDATA[前两天刚做的一些安全相关的摘要，记录下，准备做一套系统的前端安全规范出来。<br /><iframe src="http://docs.google.com/present/embed?id=df8vkjf3_61dq6g86cs" frameborder="0" width="410" height="342"></iframe>]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100301-211525</guid>
			<author>jayli</author>
			<pubDate>Mon, 01 Mar 2010 13:15:25 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=03&amp;entry=entry100301-211525</comments>
		</item>
		<item>
			<title>3D空间的构造</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100222-181412</link>
			<description><![CDATA[接<a href="http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100221-191848" target="_blank" >上篇</a>，曲线的构造依赖于“方程”和“空间变换”，同样图形的构造也唯一依赖于“向量”和“空间”，“向量”指代了图形本身的形状，“空间”指容纳“向量”的坐标系，上一篇我们可以通过曲线方程和空间变换函数来构造简单的平面曲线，依照这个思路我们来继续构造一个立体空间。这里不得不提到3D数学的两个基本概念，矩阵和线性变换。<br /><br />矩阵是描述空间点的参数对，线性变换是真实向量投射到视觉空间的过程。通过一个点和坐标，脑海中会自然形成点的空间位置，要把这个点转换为可视的尺寸投影到2D的画布上，这就需要一个变换的过程。用线性代数的术语讲，线性变换并没有改变物体的形状，改变的只是长度、角度和体积，线性变换是“拉伸”坐标系。<br /><br />向量在几何上能被解释成一系列与轴平行的位移，一般来说，任意向量v都能写成“扩展”形式：<br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100222/1750/p_large_X2bw_4154000566d62d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100222/1750/p_large_X2bw_4154000566d62d0f.jpg" border="0" alt="" /></a><br /><br />另一种略有差别的形式为：<br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100222/1750/p_large_Qas0_4154000566d72d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100222/1750/p_large_Qas0_4154000566d72d0f.jpg" border="0" alt="" /></a><br />右边的单位向量就是x，y，z轴，这里只是将概念数学化，向量的每个坐标都表明了平行于相应坐标轴的有向位移。<br />让我们将上面的向量和重写一遍，这次分别将p、q、r定义为指向+x，+y和+z方向的单位向量，如下所示：<br /><br />v = xp + yq + zr<br /><br />现在，向量v就被表示成向量p，q，r的线性变换了，向量p，q，r称作基向量。举个简单的例子，[[3,2],[-2,3]]的线性变换就表示成这样<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn045/20100222/1750/p_large_bInB_4154000566d82d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn045/20100222/1750/p_large_bInB_4154000566d82d0f.jpg" border="0" alt="" /></a><br /><br />坐标从x轴y轴变换到蓝色箭头，一个点，在原始坐标系中的表示和转换后坐标系的表示就不一样了，我们就依此来构造真实3D中的点到“变换后”的空间点的视觉呈现。<br /><br />在js中实现了一些基础函数：清除画布，画线，缩放，画正方体。现在拿正方体作为例子，一个起始于坐标系原点，xyz轴各自伸展一个单位长度的正方体的坐标为：<br /><pre>[<br />[0,1,0],<br />[1,1,0],<br />[1,1,1],<br />[0,1,1],<br />[0,0,0],<br />[1,0,0],<br />[1,0,1],<br />[0,0,1]<br />]</pre>这很容易理解，如果不做任何变换，按照原始x（水平右向）轴、y（垂直向上）轴、z（垂直屏幕向外）轴进行投影，看到的只是一个长宽各为1（像素）的一个点，放大后也是一个正方形，如果要看到立体效果则需要线性变换，线性变换函数很简单：<br /><br /><pre>//向量a做M变换，并做b偏移量<br />var matrix = function(a,M,b){<br />	if(!b)b = [100,100,100];<br />	var x = a[0]*M[0][0] + a[1]*M[1][0] + a[2]*M[2][0]+b[0];<br />	var y = a[0]*M[0][1] + a[1]*M[1][1] + a[2]*M[2][1]+b[1];<br />	var z = a[0]*M[0][2] + a[1]*M[1][2] + a[2]*M[2][2]+b[2];<br />	return [x,y,z];<br />};</pre>这时，只要将原始立方体放大一些，做一下变换，就可以看到变换后的“立体”了。这里的demo中构造了四种形式的线性变换：无变换（初始位置），角度变换，正交变换，拉伸变换。<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100222/1750/p_large_vU5r_4154000566d52d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100222/1750/p_large_vU5r_4154000566d52d0f.jpg" border="0" alt="" /></a><br />静态立方体<br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/cube.html" target="_blank" >Demo here</a>（用非ie浏览器打开）<br />动态立方体<br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/cube_v.html" target="_blank" >Demo here</a>（用非ie浏览器打开）<br /><br />其实说到这里，3D引擎的数学基础已经介绍差不多了，不论是建模还是动画，都是由“线性变换”驱动的“向量”组成的图形，因此，这种线性变换关系固定后，后续的3D开发几乎可以将着眼点放在“变换矩阵”和“向量”的构造上，而线、面和体的构造是依赖于方程，和2D相比，3D的线面体只不过将2维升级为3维，本质上和2D并无不同。<br /><br />更多3D数学基础可以参照：<a href="http://www.cnblogs.com/bobyguo/articles/1263355.html" target="_blank" >3D数学基础</a>。<br /><br />以上～]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100222-181412</guid>
			<author>jayli</author>
			<pubDate>Mon, 22 Feb 2010 10:14:12 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100222-181412</comments>
		</item>
		<item>
			<title>直角坐标方程/极坐标方程/参数方程的空间变换</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100221-191848</link>
			<description><![CDATA[html5的canvas为前端图形编程创建了很大便利，目前已经有很多精巧的js库都在研究基于canvas的图形程序的开发。今天有时间来做一些基本图形编程的铺垫。<br /><br />基本的api可以参照mozilla提供的文档<a href="https://developer.mozilla.org/en/Canvas_tutorial" target="_blank" >canvas文档</a>。<br /><br />html5的canvas提供了多样的api来支持绘图，但这些api只限于静态绘图，或者给定参数进行一次绘图，其中矩形、原型、曲线三种绘图几乎可以绘制所有的图形，但过程相当麻烦，工程师需要预先定义好需要绘制的位置、材料、颜色等参数才行。其实，曲线方程能解决很多不必要的手工绘制工作。但原生的canvas并不提供曲线方程相关api。今天来实现一个曲线方程的绘图api。<br /><br />按照惯例，依然首先构思api的接口，即首先思考如何更方便的使用api，再去实现接口。这里，作为例子，使用如下参数作为基本的曲线结构，只要这些参数给定，曲线也就无歧义的绘制出来：<br /><br />1，foo，曲线方程，默认为直角坐标系方程：<br />2，a，x坐标闭区间，很明显，它应属于曲线因变量的坐标系，<br />3，boo，是否清除之前的曲线？<br />4，speed，绘制曲线速度，<br />5，step，两点之间的间隔步长，默认为1，<br />6，C:画布,<br />7，color:曲线颜色,<br />8，matrix:空间变换函数<br />9，callback：绘制结束后的回调<br /><br />参数已经足够了，需要解释的是foo（曲线方程）和matrix（空间变换函数），我们知道初等数学中规定的方程有三种，直角坐标系方程（通过x，y坐标定位），极坐标系方程（通过环绕角度和长度定位）和参数方程（通过参数定位直角坐标和极坐标）。直角坐标系方程常用来绘制横向曲线，极坐标常用来绘制环绕曲线，参数方程用来绘制更复杂的曲线。而三者之间有着一对一的变换关系，都可以等价的变换为直角坐标系方程，并依此绘制曲线。除此之外，更加复杂的线性空间也是必须要考虑到的，因为在线性代数中，任意维度的矩阵所构造出的向量空间更加繁杂，也由此派生出真正的2D和3D的向量空间，尤其是正交3D变量投影到2D空间中，则需要一种特殊定制的matrix（空间变换函数），这个东西以后在说，先看简单的2D中的空间变换。<br /><br />api：curve(foo,a,boo,speed,step,C,color,matrix,callback)。<br /><br />其中foo若是直角系方程，matrix可以留空，比如绘制正弦和余弦方程：<br /><br />y=50 sin((x+20)/10)+100;<br />y=50 cos((x+20)/15)+150;<br /><br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/sin.html" target="_blank" >sin.html</a>(用firefox打开)<br /><br />若foo是极坐标方程，则须指定matrix，例如椭圆方程：<br /><br />P = e*p/(1-e*cos(a-150)) + 150<br /><br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/round.html" target="_blank" >round.html</a>(用firefox打开)<br /><br />如果是参数方程，则需要指定matrix即可，在matrix中指定x和y的方程，例如参数方程：<br /><br />x = a* cos(t)+10* cos((10/6-1)*t)+100<br />y = a* sin(t)-6* sin((10/6-1)*t)+100<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100221/1900/p_large_lmD3_7fba000453ca2d0e.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100221/1900/p_large_lmD3_7fba000453ca2d0e.jpg" border="0" alt="" /></a><br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/circle.html" target="_blank" >circle.html</a>(用firefox打开)<br /><br />或者绘制星形的参数方程<br /><br />x = Math.pow(a*cos(t),3) + 100 <br />y = Math.pow(a*sin(t),3) + 150<br /><br /><a href="http://tbexample.googlecode.com/svn/trunk/canvas/star.html" target="_blank" >star.html</a>(用firefox打开)<br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100221/1900/p_large_z46r_7fba000453c92d0e.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100221/1900/p_large_z46r_7fba000453c92d0e.jpg" border="0" alt="" /></a><br /><br />to be continue...]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100221-191848</guid>
			<author>jayli</author>
			<pubDate>Sun, 21 Feb 2010 11:18:48 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100221-191848</comments>
		</item>
		<item>
			<title>检查branche和base哪些文件修改过的shell脚本</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100220-173423</link>
			<description><![CDATA[我们使用svn大概已经很熟练了，“svn up”、“svn ci”、“svn diff”和“svn st”变的几乎和ls和cd一样常用了。在做项目启动和结束的时候才会用到“svn copy”（打分支）和“svn merge”（合并分支到主干）。由于前端开发流程是依赖于后端，因此，前端资源文件“css”、“js”、“img”和“swf”等等文件也要走完这些流程，和后端代码不同的是，后端代码上线后可以直接覆盖原代码，前端代码则不总是覆盖源文件，<a href="http://www.uedmagazine.com/ued/comments.php?y=09&amp;m=06&amp;entry=entry090612-094816" target="_blank" >之前讨论过这个情况</a>。因此，前端文件则需要比较修改后，才决定哪些文件需要更新，哪些文件不需要更新。<br /><br />比如，这个项目中，主干上有4个文件，和主干相比，分支项目修改了c.js和d.js，且新增了e.js<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100220/1650/p_large_Arxi_06e80005dee82d0b.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100220/1650/p_large_Arxi_06e80005dee82d0b.jpg" border="0" alt="" /></a><br /><br />由于需要代码管理，将分支也合并到主干里，但压缩上线则不可能将这5个文件重新上线，我们只需要上线修改过的c.js，d.js和e.js。svn中没有命令直接查找分支中修改过的文件，写了一个shell脚本，用来判断当前分支修改过（新增）的文件。这里需要提及的，资源文件数量只会增加，不会被删除，即只有上线，没有下线，而且，合并主干时候默认不会产生冲突，因为js和css脚本会拆分到个人，一个人负责的功能放在一个js或css文件中，因此，不会出现多人改一个js文件的可能性，这方面的控制是依赖于框架和项目管理。<br /><br />脚本的使用很简单，只要保证待检查的branche代码已经完全提交且保持最新，执行脚本输出绿色为本期修改过的文件，红色为新增的文件，如果代码有新增的文件但未提交，也会显示红色，这样哪些文件需要上线就能一目了然了。<br /><br /><pre>#!/bin/bash<br />#检查当前目录和base相比修改了那些文件<br /><br />myPath=$PWD<br />#准备工作<br />svn info | awk &#039;END{print NR}&#039; &gt; __NR<br />NR=`cat __NR`<br />rm __NR<br />if [ $NR -eq 0 ];then<br />    exit;<br />fi<br /><br />svn log --stop-on-copy &gt; __j__svnlog<br />#准备比较操作<br />copy=`cat __j__svnlog | awk &#039;/^r.*/{print $0}&#039;| awk &#039;NR==1{print $1}&#039;| sed &#039;s/r//g&#039;`<br />base=`cat __j__svnlog | awk &#039;/^r.*/{print $0}&#039;| awk &#039;END{print $1}&#039;| sed &#039;s/r//g&#039;`<br /><br />rm __j__svnlog<br /><br />#开始比较<br />svn diff -r $base | awk &#039;/\+\+\+/{print $2}&#039; &gt; __j__mfilelist #得到修改过的文件<br />svn st | awk &#039;{print $2}&#039;| grep -v &#039;__mfilelist&#039; | grep -v &#039;__afilelist&#039; &gt; __j__afilelist #得到新增的文件<br /><br />cat __j__mfilelist __j__afilelist &gt; __j__grep_v #准备统一输出<br /><br />echo &quot;ls -lhrt | sed &#039;s/^.*\s//g&#039; &quot; &gt; __j__handledlist<br /><br />sed -i &#039;s/^/\| grep -v /g&#039; __j__grep_v<br /><br />cat __j__grep_v | tr &quot;\n&quot; &quot; &quot; &gt;&gt; __j__handledlist<br />cat __j__handledlist | tr &quot;\n&quot; &quot; &quot; &gt;__j__handledlist<br />echo &quot;#!/bin/bash&quot; &gt; __j__sh.sh<br />cat __j__handledlist &gt;&gt; __j__sh.sh<br /><br />sh __j__sh.sh | grep -v __j__&gt; __j__first_result<br />LS=`wc -l __j__first_result | awk &#039;{print $1}&#039;`<br />cat __j__first_result | eval &quot;awk &#039;NR&lt;$LS{print \$0}&#039;&quot; | awk &#039;NR&gt;1{print $0}&#039;<br /><br />rm __j__handledlist __j__grep_v __j__first_result<br /><br />#输出结果<br />while read line<br />    do<br />        echo -e &quot;\033[32m$line\033[0m&quot;<br />done &lt; __j__mfilelist<br /><br />while read line<br />    do<br />        echo -e &quot;\033[31m$line\033[0m&quot;<br />done &lt; __j__afilelist<br /><br />rm __j__mfilelist __j__afilelist __j__sh.sh</pre>运行情况也很简单，这里修改了两个文件，新增了一个文件，但未提交，脚本执行结果是：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn041/20100220/1650/p_large_WWf1_06e4000167232d0b.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn041/20100220/1650/p_large_WWf1_06e4000167232d0b.jpg" border="0" alt="" /></a><br /><br />bash脚本的运行比较傻瓜，并未做很多必要的验证，有时间会加上一些验证，增强一下健壮性。]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100220-173423</guid>
			<author>jayli</author>
			<pubDate>Sat, 20 Feb 2010 09:34:23 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100220-173423</comments>
		</item>
		<item>
			<title>2010 Q1 A级浏览器报告</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100220-151445</link>
			<description><![CDATA[原文：<a href="http://www.yuiblog.com/blog/2010/02/16/gbs-update-2010q1/#changes" target="_blank" >Graded Browser Support Update: Q1 2010</a><br />YUI team刚刚宣布2010年一季度的A级浏览器的支持报告（GBS），有了一些重要更新。这些更新包括：<br /><br />1，在XP中开始支持chrome 4.0.x<br />2，将Windows Vista替换为Windows 7（同时将IE7降级为在xp中支持）<br />3，将Opera 10.x从A级降为X级。<br />4，将firefox3.5.x替换为firefox3.6.x<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100220/1450/p_large_uhtO_415200015d1a2d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100220/1450/p_large_uhtO_415200015d1a2d0f.jpg" border="0" alt="" /></a><br /><br />这个更新报告是沿着09年第四季度制定的路线图作出的相应调整，在这个过程中有过一些重要的关于A级浏览器的讨论：<br /><br />1，Chrome：Chrome咄咄逼人的增长态势促使其加入A级浏览器的行列，在GBS委员会中，大家争论的焦点在于，是否将Chrome列入测试列表中，不过如今专家已经就此达成一致。<br />2，Opera：根据<a href="http://www.yuiblog.com/blog/2009/10/16/gbs-update-2009q4/" target="_blank" >09年第四季度的更新报告</a>，YUI team曾着重讨论是否将Opera将为X级。他们认为YUI和YAHOO网站已经不值得再去广泛支持Opera，除非X级浏览器也被大量的使用。GBS也为进一步整理浏览器测试列表制定了路线图，并由此决定自2010年一季起将Opera和其他高质量但低占有率的浏览器一同将为X级。Opera是一款相当优秀的浏览器，我们希望Opera用户也能在yahoo或者YUI驱动的网站上有上佳的用户体验，同时我们会继续跟进网站在Opera下的bug。<br />3，Windows Vista和windows7：统计结果表明，多数人根本不在意有多少个版本的windows，他们只认识一个IE。实际工作经验告诉我们，在vista中的测试结果和在xp中的测试结果相差无几，并无特别重大的区别。基于此，我们将windows vista替换为更新版本的windows 7，由此保证我们将首要精力放在四个独立的操作系统上，这里包括绿色版的windows和更新的windows 7，然而vista依然有着相当大的市场占有率，因此，QA团队会继续关注Vista下的bug，一旦发现立即修改。同时我们呼吁QA团队开始将window 7列为自己的测试目标平台。<br /><br />本季度的特别提醒：<br /><br />GBS是一种QA哲学，而不是一个单纯的浏览器质量和占有率的报告，他是用来指导QA团队如使高效利用有限的资源，同时指导前端工程师理智的测试浏览器兼容性。我们的是保守、审慎的：我们将利用有限的资源测试尽可能少的浏览器/操作系统的组合、浏览器内核，同时达到尽可能高的用户浏览器覆盖率。]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100220-151445</guid>
			<author>jayli</author>
			<pubDate>Sat, 20 Feb 2010 07:14:45 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100220-151445</comments>
		</item>
		<item>
			<title>透过现象看本质----混乱的URL编码</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100217-213747</link>
			<description><![CDATA[URL全称<a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator" target="_blank" >Uniform Resource Locator</a>，直译为“统一资源定位符”，也就是网页地址，是互联网上任意角落都可以访问到的，言外之意是说，URL不受国别、种族、语言、编码差异的约束，是编码无关的。然而我们常常在浏览器中敲入诸如“http://url/中文”的url，也能正确访问，既然url中包含中文，那么如何让其他国家那些没有中文编码的计算机上也能访问到相同的网址呢？<br /><br /><a href="http://www.ietf.org/rfc/rfc1738.txt" target="_blank" >RFC 1738</a>中对URL有明确规定，URL必须由英文字母、数字、和某些标点符号组成，不能使用其他文字，因此所有包含中文的URL都应当是非法的！其实，浏览器自作聪明的为我们做了很多人性化的hack，比如，浏览器会对地址栏中填入的url进行先编码再使用，因此，不论怎样，一个正确封装的http包中的URI字段一定不会出现中文字符。也就是说，实际发生作用的url也一定如RFC 1738中所言，非ascII码要先转换成ascII码序列，但RFC 1738没有规定具体的编码方法，而是交给应用程序（浏览器）和web程序作者自己决定。这导致“URL编码”成为了一个混乱的领域。也会导致一些奇怪的现象发生。<br /><br />我们分别在firefox和ie用baidu和google搜索“淘宝”。<br /><br />在firefox中百度“淘宝”，出现：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100217/2105/p_large_BQ0D_06e400002dca2d0b.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100217/2105/p_large_BQ0D_06e400002dca2d0b.jpg" border="0" alt="" /></a><br /><br />实际发生请求的url为：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100217/2105/p_large_gjlS_7d5900007f7d2d10.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100217/2105/p_large_gjlS_7d5900007f7d2d10.jpg" border="0" alt="" /></a><br /><br />同地址栏中显示是一致的，搜索结果也正确。在地址栏中直接输入“http://www.baidu.com/s?wd=淘宝”也是如此，在firefox中google“淘宝”：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_sx90_399900011aca2d0c.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_sx90_399900011aca2d0c.jpg" border="0" alt="" /></a><br /><br />实际发生请求的url为：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100217/2105/p_large_9KNa_7d5b0001189b2d10.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn040/20100217/2105/p_large_9KNa_7d5b0001189b2d10.jpg" border="0" alt="" /></a><br /><br />可以看到，实际发生请求的url和地址栏显示的url不一致，搜索结果正确。这时，重新请求地址栏的“url”（不是刷新），地址栏显示为：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100217/2105/p_large_sUVA_7fbc000119fa2d0e.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100217/2105/p_large_sUVA_7fbc000119fa2d0e.jpg" border="0" alt="" /></a><br /><br />实际发生的请求为：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100217/2105/p_large_N0Ge_7d5b000118a42d10.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn043/20100217/2105/p_large_N0Ge_7d5b000118a42d10.jpg" border="0" alt="" /></a><br /><br />这时，地址栏和实际发生的请求是一致的，搜索结果正确。进一步分析之前，先看看js里的两个运算<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn037/20100217/2105/p_large_jAEX_415200002fb42d0f.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn037/20100217/2105/p_large_jAEX_415200002fb42d0f.jpg" border="0" alt="" /></a><br /><br />我们知道escape()是计算unicode编码，传说中正统的URL编码encodeURI()则是进行utf-8编码，（简单讲，unicode编码是纯粹的编码方式，utf-8是unicode编码的一种实现，即将二进制unicode编码再编码，以一种比较节约空间的方式对unicode全集进行二次编码）。escape()的结果是将每个unicode字符以%u分割，encodeURI是每个字节以%分割，也就是说，“淘”和“宝”的unicode编码分别是“6DD8”和“5B9D”，他们的utf-8编码分别是“E6 B7 98”和“E5 AE 9D”，此外，他们的gbk编码分别为“CC D4”和“B1 A6”。<br /><br />初步得到结论一：在firefox中的百度搜索，通过form提交的中文转换为gbk编码，参与http包的封装。在ff中google搜索，通过form提交的中文转换为utf-8编码，但显示在地址栏中的url是其中文映像（如果这时将地址栏复制下来，复制的实际是转码后的url，无法复制url中的中文字符）。如果直接在ff地址栏中输入中文url，这时，url里的中文字符一律进行gbk编码，不管百度还是google都是如此。<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_OHX7_06e8000117ea2d0b.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_OHX7_06e8000117ea2d0b.jpg" border="0" alt="" /></a><br />复制不了里面的中文<br /><br />如此看来，firefox默认处理url里的中文，都是通过gbk编码进行编码的，这里和网页编码无关（浏览器无法检测将要被访问的网页编码）。<br /><br />那么，百度和google对unicode编码和utf-8编码的支持情况如何呢？<br /><br />“淘宝”的unicode编码为“%6D%D8%5B%9D”，在ff中访问“http://www.baidu.com/s?wd=%6D%D8%5B%9D”<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_LtD4_7d5b000118b82d10.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn038/20100217/2105/p_large_LtD4_7d5b000118b82d10.jpg" border="0" alt="" /></a><br /><br />搜索到乱码。“淘宝”的utf-8编码为（所谓正宗的“URL”编码）“%E6%B7%98%E5%AE%9D”，在ff中访问“http://www.baidu.com/s?wd=%E6%B7%98%E5%AE%9D”，得到，<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100217/2105/p_large_wbXE_7859000081162d13.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100217/2105/p_large_wbXE_7859000081162d13.jpg" border="0" alt="" /></a><br /><br />也是乱码。<br /><br />再来看google能否解析utf-8编码，在ff中访问“http://www.google.cn/search?q=%E6%B7%98%E5%AE%9D”，得到，<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn042/20100217/2105/p_large_kYVq_7d5900007fa92d10.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn042/20100217/2105/p_large_kYVq_7d5900007fa92d10.jpg" border="0" alt="" /></a><br /><br />结果正确，google可以正确解析utf-8编码。再看google能否解析unicode编码，在ff中访问“http://www.google.cn/search?q=%6D%D8%5B%9D”，得到：<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100217/2105/p_large_8bic_399900011b052d0c.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn036/20100217/2105/p_large_8bic_399900011b052d0c.jpg" border="0" alt="" /></a><br /><br />是乱码。<br /><br />初步得到结论二，所谓正统的URL编码encodeURI并不是万能的，要看每个网站的实现，百度搜索就不支持这个所谓正统，而是一律采用gbk系的编码作为自己的URL编码。google支持“正统URL编码”，也支持gbk系的编码，更健壮一些。<br /><br /><br />再来看IE中的情况，在ie中在百度和google中通过form搜索“淘宝”结果和ff中一致，但直接在地址栏中输入中文url就有些奇怪了，在ie中访问“http://www.baidu.com/s?wd=淘宝”，得到，<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn042/20100217/2105/p_large_J1QO_06e600007c242d0b.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn042/20100217/2105/p_large_J1QO_06e600007c242d0b.jpg" border="0" alt="" /></a><br /><br />结果当然正确，实际发生的请求为<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100217/2105/p_large_w9VA_3995000030782d0c.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn044/20100217/2105/p_large_w9VA_3995000030782d0c.jpg" border="0" alt="" /></a><br /><br />这里可以看到，ie发起的http请求甚至没有经过任何编码，硬生生的将“淘宝”当作原始gbk字符，这样，其他语言编码的操作系统就无法识别这个url，这里的“\314\324\261\246”是一种我也不知道是什么东西的编码，甚至连wireshark都不知道，因为“http://www.baidu.com/s?wd=\314\324\261\246”明显是一个错误的请求。<br /><br />此外，unicode编码和utf-8编码后的url在ie下的表现和ff中一致。<br /><br />由此，可得到结论：<br /><br />1，RFC 1738文档很粗糙，导致了url编码标准缺失。实际url编码标准和操作系统、浏览器以及web应用有关；<br />2，ff对非ascII码的url进行编码，编码方式和操作系统默认编码一致<br />3，google支持“正统的URL编码”（即utf-8 URL编码：utf-8字节中间加上%），百度不支持<br />4，IE不对非ascII码的url进行编码，直接根据操作系统默认编码发送url请求，换句话说，ie甚至不遵循RFC 1738，或者说ie对URL的转码实现有bug。<br />5，ff在地址栏显示的url进行了hack，但hack的有bug，开发时要注意。<br /><br />基于此，我们在web开发过程中要做到：<br /><br />1，要单独处理编码问题，建议采用统一的URL编码，不论是gbk还是unicode还是URI（utf-8），必须要统一，鉴于大多数人稀里糊涂的认为URI是正宗的URL编码，因此建议还是在前后端都做URI编码和解码。<br />2，明智选择web app的编码，utf-8为最佳，gbk为最次。<br />3，编码问题要调试浏览器兼容性。<br /><br />以上～<br /><br />附：<br /><a href="http://www.chi2ko.com/tool/CJK.htm" target="_blank" >中日韩unicode字符集</a><br /><a href="http://www.knowsky.com/resource/gb2312tbl.htm" target="_blank" >gbk字符集</a>]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100217-213747</guid>
			<author>jayli</author>
			<pubDate>Wed, 17 Feb 2010 13:37:47 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100217-213747</comments>
		</item>
		<item>
			<title>YUI中的ajax隐患</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100217-162101</link>
			<description><![CDATA[使用ie开发调试时，在有异步交互的时候，有时会遇到“Automation服务器不能创建对象”的错误，ie给出的错误消息是如此之模糊，以至于很难定位问题的真正原因。通常，这个问题的产生十有八九是ajax的问题，网上大多数的解释归咎于客户端和浏览器，说是要把ie的安全级别调低或者注册msxml组件什么的，其实windows中解析xml的组件在安装系统的时候已经安装，差别只是版本高低，而在js中创建ActiveX对象的时候则需要指定xml解析器的版本，指定版本错误就创建对象失败，再使用这个创建失败的对象的时候，就会出现“Automation服务器不能创建对象”的错误。<br /><br />在yui2.x中，connection里对IE浏览器中使用的XML组件版本定义了三个而已，Microsoft.XMLHTTP、MSXML2.XMLHTTP.3.0和 MSXML2.XMLHTTP，这样基本可以涵盖大多数情况：<br /><br />YUI2.x中定义的xml解析器版本<br /><pre>YAHOO.util.Connect = {<br />	_msxml_progid:[<br />		&#039;Microsoft.XMLHTTP&#039;,<br />		&#039;MSXML2.XMLHTTP.3.0&#039;,<br />		&#039;MSXML2.XMLHTTP&#039;<br />		],<br />	//...<br />}</pre>但这仍然不能包含所有可能情况（似乎在早期的盗版xp中会经常出现“Automation服务器不能创建对象”的错误，具体细节我没有考证过），在yui3的io组件中，只留下了一个&#039;Microsoft.XMLHTTP&#039;：<br /><pre>YUI.add(&#039;io-base&#039;, function(Y) {<br />	function _xhr() {<br />   		return (w.XMLHttpRequest) ? <br />			new XMLHttpRequest() : <br />			new ActiveXObject(&#039;Microsoft.XMLHTTP&#039;);<br />   	}<br />	//...<br />};</pre>隐患仍然存在，应当将所有xml解析器的版本都补充上，才更加严谨一些，基于此，就可以写一个严谨的创建ajax对象的函数：<br /><pre>var InitAjax = function(){<br />	var ajax;<br />	if(window.ActiveXObject){<br />	    var versions = [&#039;Microsoft.XMLHTTP&#039;,<br />			    &#039;MSXML.XMLHTTP&#039;, <br />			    &#039;Microsoft.XMLHTTP&#039;, <br />			    &#039;Msxml2.XMLHTTP.7.0&#039;, <br />			    &#039;Msxml2.XMLHTTP.6.0&#039;, <br />			    &#039;Msxml2.XMLHTTP.5.0&#039;, <br />			    &#039;Msxml2.XMLHTTP.4.0&#039;, <br />			    &#039;MSXML2.XMLHTTP.3.0&#039;, <br />			    &#039;MSXML2.XMLHTTP&#039;];<br />	    for(var i=0; i &lt;versions.length; i++) {<br />		try {<br />		    ajax = new ActiveXObject(versions[ i ]);<br />		    if(ajax) {<br />			return ajax;<br />		    }<br />		} catch(e) {}<br /><br />	    }<br />	}else if(window.XMLHttpRequest){<br />	    ajax = new XMLHttpRequest();<br />	}<br /><br />	return ajax;<br />};</pre>如此，才能够确保ajax的万无一失。<br /><br />以上～]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100217-162101</guid>
			<author>jayli</author>
			<pubDate>Wed, 17 Feb 2010 08:21:01 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100217-162101</comments>
		</item>
		<item>
			<title>jQuery Selector VS YUI Selector 续</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100216-115557</link>
			<description><![CDATA[上一篇<a href="http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=01&amp;entry=entry100131-211737" target="_blank" >jQuery Selector VS YUI Selector</a>.<br /><br />不得不承认，自从john将<a href="http://sizzlejs.com/" target="_blank" >Sizzle</a>从jquery抽离出来，性能得到了大幅度提升，这得益于分层设计所带来的重用率的提高。sizzle简洁曼妙的实现使得jquery有一个强劲的选择器核心，不同于jquery结构混乱的外衣，sizzle却出奇的整洁。然而这种不可避免的抽离一步步将jquery带进万劫不复——jquery羸弱的结构将不足以支撑更多层次的抽离。但sizzle近乎冲动的整洁，也使得dojo、prototype受益匪浅，但yui对于sizzle，却似乎一直在保持某种不必要的警惕。是什么导致yui team最终放弃sizzle来做yui的selector核心呢？<br /><br />YUI3发布之日<a href="http://www.yuiblog.com" target="_blank" >yuiblog</a>概要低调的介绍了<a href="http://www.yuiblog.com/blog/2009/09/29/yui-3-0-0/" target="_blank" >yui3的4个亮点</a>：<br /><br />1. Selector-driven: YUI 3 is built around one of the lightest, fastest selector engines available, bringing the expressive power of the CSS selector specification into actions that target DOM nodes.<br />2. Syntactically terse: 简洁。<br />3. Self-completing: 动态合并。<br />4. Sandboxed: 沙箱。<br /><br />其实2，3，4的确言如其实，第一个，选择器驱动，很容易让大家误解，相比jquery，这个亮点一点也不亮？简单比较下yui3和jquery的选择器引擎。<br /><br /><a href="javascript:openpopup('/ued/getpic.php?p=http://fmn.xnimg.cn/fmn039/20100216/1130/p_large_00CI_32af000551eb2d0e.jpg',800,600,false);"><img src="/ued/getpic.php?p=http://fmn.xnimg.cn/fmn039/20100216/1130/p_large_00CI_32af000551eb2d0e.jpg" border="0" alt="" /></a><br /><br />可以看到，yui把原本简单的事情搞的更加复杂，选择器就是选择器，还分什么css2、css3和native？相比更加认真仔细的sizzle，yui的selector engine却更难看粗心：不仅留下来上篇提到的那么多bug，性能还显而易见的不够优化（既然使用全局正则为什么不<a href="http://www.w3school.com.cn/js/jsref_regexp_compile.asp" target="_blank" >先编译再匹配呢</a>？）。因此yui的selector engine只是为了让代码看上去更加“yui3”而强行拆分。倒不如一个hash table来的痛快。yui小组一直在理想的构思web app的宏伟蓝图，因此目前yui3这种模块拆分也一定不是最优，毕竟缺少复杂web app的实践积累，所以yui3在不断的使自己“面向未来”，也让自己一点点脱离实际。当下对web开发的迫切需求是速度、性能、扩展性、团队开发！yui3在扩展性和团队开发方面得了高分，jquery则着重优化前两方面。“面向未来”的无敌框架 vs “面向实际”的简洁快速，在选择器引擎的设计上，隐约可以窥见双方似乎不可调和的性格冲突：yui是一帮中老年人老学究式的理想寄托，外表朴实内心却充满着理想主义者的叛逆，固执古怪的把代码写的抽象，而从sizzle身上我们看到年轻的john已经长大，虽然在john年少的时候并未严谨构思jquery的结构导致目前jquery越发臃肿不堪，但jquery所蕴含着的冲动与活力依然感染者依然年轻的web开发领域和大量初学者。<br /><br />如此看来，似乎比较选择器的树优孰劣已经意义不大，每个人都有选择的权利，但，明智的选择一定是在充分的了解基础上做出的。切忌人云亦云、随波逐流，别人说哪个好就用哪个。yui selector和sizzle都是基于特定的场景特定的理论的产物，也只有将其放在作者期望的上下文环境中，才能发挥各自的优势，我们要学习的则是他们的设计思想，以及设计思想背后的理论基础，这才是表象背后的本质所在。]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100216-115557</guid>
			<author>jayli</author>
			<pubDate>Tue, 16 Feb 2010 03:55:57 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100216-115557</comments>
		</item>
		<item>
			<title>道格拉斯的javascript，相当科普，相当精彩</title>
			<link>http://www.uedmagazine.com/ued/index.php?entry=entry100216-101112</link>
			<description><![CDATA[第一讲，<a href="http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-1" target="_blank" >The Early Years</a><br /><br /><object width="500" height="281" allowfullscreen="true">
 <param value="http://d.yimg.com/m/up/ypp/default/player.swf" name="movie"/>
 <param value="vid=17957562&amp;autoPlay=0" name="flashVars"/>
 <param value="transparent" name="wmode"/>
 <embed width="500" height="281" flashvars="vid=17957562&amp;autoPlay=0" type="application/x-shockwave-flash" src="http://d.yimg.com/m/up/ypp/default/player.swf" allowfullscreen="true"/>
</object><br /><br />从史前社会讲到计算机的诞生，再到编程语言的进化，编程语言一直按照老道的进化论进化，直到javascript诞生，雷。。。<br /><br />第二讲，<a href="http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-2" target="_blank" >And Then There Was Javascript</a><br /><br /><object width="500" height="281" allowfullscreen="true">
 <param value="http://d.yimg.com/m/up/ypp/default/player.swf" name="movie"/>
 <param value="vid=18051724&amp;autoPlay=0" name="flashVars"/>
 <param value="transparent" name="wmode"/>
 <embed width="500" height="281" flashvars="vid=18051724&amp;autoPlay=0" type="application/x-shockwave-flash" src="http://d.yimg.com/m/up/ypp/default/player.swf" allowfullscreen="true"/>
</object><br /><br />开始讨论javascript的生老病死，宇宙大爆炸-&gt;人类诞生-&gt;javascript诞生，再雷。。。<br /><br />相当科普，相当精彩，更多演讲依然期待中。。。。]]></description>
			<category></category>
			<guid isPermaLink="true">http://www.uedmagazine.com/ued/index.php?entry=entry100216-101112</guid>
			<author>jayli</author>
			<pubDate>Tue, 16 Feb 2010 02:11:12 GMT</pubDate>
			<comments>http://www.uedmagazine.com/ued/comments.php?y=10&amp;m=02&amp;entry=entry100216-101112</comments>
		</item>
	</channel>
</rss>
