今日，偶尔翻看淘宝源码，发现竟有美女形状源码。如下图：
class="r-img" src="/Upload/Images/2013102023/485361F0FB8084EB.ico" width="425" height="138" />
此段代码在console中运行，结果更为惊叹。
亲手尝试的读者已经看到了代码运行的结果。taobao.com的console打印出了UED的招聘信息。淘宝的页面在短暂的loading之后进入了UED的宣传遮罩层，同时提醒用户打开摄像头...可能读者已经发现了更多有趣的东西，这些有趣的东西感兴趣的同学可以慢慢挖掘。这里很多人已经迫不及待想知道为什么。
我们看"美女"的源码,进入美女的世界...
一.美女爱金蛋
美女的源码,采用了匿名函数自执行的方式。为方便大家，还是贴过来：
javascript:Function('a,l,i,t,b,u,e,d',"a=['"+[ ' :h8G895r,', ' ,hA@@@@@@@@#&5:', ' S#@Hs:;h&@@@@@@#3', ' 8F@P r&@@@@@@A;', ' 9.@e;grgr :9#@@@@@M;', ' h&@&&FiP9., ;8GH@@@@B.', ' :e@g@g (5":% iA@@@5', ' .c@j@oG ;s,: .A@@#5', ' ri@n@ Bu, .::. .;, ;@@@M ,:', ' .sM%@c@s&h sh;,..,. h@@@B sr', ' .i@d@u@.@msj ;9@@s8# si', ' s@Mt@a@o@b@aXos.:cro9m@"@) ;,s1.', ' rM#@@@@@@@@@B#@#&35s38#@@@8 i3;,', ' r&M@@@@@@@@@S:sS3r ,hS@@@@@&,,i:;;.', ' ,1G@@@@@@@@@@5 :;:SGM@@@@@&.:,:8&hir:', ' ;&@@@@@@@@@@B; 1HM@@@@@@Ms:,;r5h;H@,', ' G@@@@@@@@@@G: rsi&@@@@@@&: ,:,X9,.', ' r8M@@@@@@@@@@@#8r. G@@@@@@@B3;:,.:s::;', ' :G&B@@@@@@@@@@@@@@@MAXXXB@@@@@@@@@B31hi:,:;;', ' sGi.;3#@@@@@@@@@@@@@@@@@@@@@@@@@@@@#9rr;,,,i,', ' h1: ,S#@@@@@@@@@@@@@@@@@@@@@@@@@@@@Xhi. ,r', ' 13i,. :X@@@@@@@@@@@@@@@@@@@@@@@@@@MXh...,;r:', ' iXh;,.. 9@@@@@@@@@@@@@@@@@@@@@@@@@@MA9hr;:is:', ' ,X9r:,,.. 3@@@@@@@@@@@@@@@@@@@@@@@@@@@@G5s;;sh,', ' 9&5i;:,,. S@@@@@@@@@@@@@@@@@@@@@@@@@@@B9hsrsh1', ' sBG5i;::,..72&52&32&12&91&71&51&31&11&9&7&5&3&1', ' :11,11&9&7&5&3&1:01,9&7&5&3&1:9,7&5&3&1:8,5&3&1:', ' 7,11&9&7&5&3&1:6,9&7&5&3&1:5,7&5&3&1:4,3&1:3@821' ].join("','")+"'];l=a.join(i='').replace(/\\s+/g,i)[d='split'](i).reverse().join(i);l=l.substr(l.indexOf('@')+1,parseInt(l))[d](/[,:]/);while(t=l[b='shift']()){u=l[b]()[d]('&');while(e=u[b]())i+=a[t].replace(/^\\s+/g,'').charAt(+e);}eval(i);")();
为了降低代码的可读性，淘宝可谓用心良苦。将大量的代码写到了函数声明的内部，然后采用匿名函数的自执行。由于代码生涩难懂，我们不做手术刀式的解刨。将代码大致翻译如下：
//页面源代码的翻译 ~function(){ var a,l,i,t,b,u,e,d; //a 是一个数组的数据池 a = [ ' :h8G895r,', ' ,FAP@.@e@g@g&&:', ' S&@FsP;.&e@g@g@(3', ' 8"@% r&@@@@@@A;', ' 9c@j;orir :9#@@@@@M;', ' hn@ &uis9%, ;8GH@@@@B.', ' :c@s@h i5d:u iA@@@5', ' ..@m@jG ;s,: .A@@#5', ' r@@t@aBo, .::. .;, ;@@@M ,:', ' .bMa@o@.&c sh;,..,. h@@@B sr', ' .o@m@"@)@;s, ;9@@s8# si', ' sHM@@@@@@@@BXSsi::r19&@@@G 5,s1.', ' rM#@@@@@@@@@B#@#&35s38#@@@8 i3;,', ' r&M@@@@@@@@@S:sS3r ,hS@@@@@&,,i:;;.', ' ,1G@@@@@@@@@@5 :;:SGM@@@@@&.:,:8&hir:', ' ;&@@@@@@@@@@B; 1HM@@@@@@Ms:,;r5h;H@,', ' G@@@@@@@@@@G: rsi&@@@@@@&: ,:,X9,.', ' r8M@@@@@@@@@@@#8r. G@@@@@@@B3;:,.:s::;', ' :G&B@@@@@@@@@@@@@@@MAXXXB@@@@@@@@@B31hi:,:;;', ' sGi.;3#@@@@@@@@@@@@@@@@@@@@@@@@@@@@#9rr;,,,i,', ' h1: ,S#@@@@@@@@@@@@@@@@@@@@@@@@@@@@Xhi. ,r', ' 13i,. :X@@@@@@@@@@@@@@@@@@@@@@@@@@MXh...,;r:', ' iXh;,.. 9@@@@@@@@@@@@@@@@@@@@@@@@@@MA9hr;:is:', ' ,X9r:,,.. 3@@@@@@@@@@@@@@@@@@@@@@@@@@@@G5s;;sh,', ' 9&5i;:,,. S@@@@@@@@@@@@@@@@@@@@@@@@@@@B9hsrsh1', ' sBG5i;::,..G@@@9&7&5&3&1:01,9&7&5&3&1:9,7&5&3&1', ' :8,5&3&1:7,11&9&7&5&3&1:6,9&7&5&3&1:5,7&5&3&1:4,', ' 3&1:3,51&31&11&9&7&5&3&1:2,31&11&9&7&5&3&1:1@421' ]; i = ''; d= 'split'; //将数组转换成字符串倒序之后再转化为数组 l=a.join('').replace(/\s+/g,'').split('').reverse().join(''); //获取位置的数据 美女右下角的数字反序(124)代表了要截取的长度 从@的位置开始截取 l=l.substr(l.indexOf('@')+1,parseInt(l)).split(/[,:]/); /* 根据位置信息搜索出隐藏的字符 l是如下的数组 ["1", "1&3&5&7&9&11&13", "2", "1&3&5&7&9&11&13&15", "3", "1&3", "4", "1&3&5&7", "5", "1&3&5&7&9", "6", "1&3&5&7&9&11", "7", "1&3&5", "8", "1&3&5&7", "9", "1&3&5&7&9", "10", "1&3&5&7&9"] 通过观察发现 数组的奇数项代表a数组的某行，而偶数项代表对应行关键信息的下标。 通过下面的循环将隐藏信息逐字取出。并使用eval执行 */ while( l.length > 0 ) { b = 'shift'; t = l.shift(); //t是l数组的奇数项，代表目标字符在a数组的某一行 u = l.shift().split('&'); // while(u.length>0){ e = u.shift(); //e 是l 数组的偶数项，代表目标字符在某行字符串的具体位置 i+= a[t].replace(/^\s+/g,'').charAt(+e); } } eval(i) }()
通过翻译后的代码可以看出eval(i)是美女代码的最终目标，美女的图案为i提供了一个数据池，而美女的后三行隐藏着找到i的方法。
好的，相信读者已经知道i的最终结果是 FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com");
原来"美女爱金蛋"！
关于如何从美女的源码图中找到'FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com")'，如果读者有不清楚的地方欢迎讨论。关于FP.egg这行代码做了什么,由于天色已晚，待明日分解。
在阅读本文的同时，别忘了UED是通过这种形式在招聘和吸引前端人才，百度很多产品线也采用console的方式进行招聘。希望大家留意不要错过大好机会。
转载请说明出处：http://www.cnblogs.com/wisdomoon/p/taobaobeauty1.html
相关文章
