网页前端设计

今日，偶尔翻看淘宝源码，发现竟有美女形状源码。如下图：

　　此段代码在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的方式进行招聘。希望大家留意不要错过大好机会。

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)