今日,偶爾翻看淘寶源碼,發現竟有美女形狀源碼。如下圖:

此段代碼在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
