我們已經知道，執行美女會得到"彩蛋",而正是彩蛋做到了taobaoUED展現給大家的神奇的前端魅力。今天我們來看看FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com");這行代碼做了什么？FP.egg方法來自哪里？FP.egg方法的內部邏輯是什么？
二、彩蛋來自哪里？
打開taobao網的首頁通過查看HTTP請求，可以發現僅js請求就21個，很過請求是多個js文件合並過的，粗略數數，淘寶首頁的js文件超過60個，而且大多數文件都進行了壓縮，如果讀者從這些js文件中挨個尋找egg的足跡，只能說是大海撈針。
彩蛋的神奇相對於淘寶網業務的重要性而言是微不足道，因此我們猜測，彩蛋的邏輯會放在頁面的腳步，以防止文件的下載（或執行）阻塞首頁的展示。根據猜測我們看看首頁的底部
<script> (function(){ KISSY.use('cookie',function(S,Cookie){ Cookie.set('fp_v',1); }); })() </script> <script src="http://a.tbcdn.cn/apps/sheying/tbindexgame/index/index-min.js?t=20130924"></script><!-- END --> <!-- TMS tbindex/2013egg/launcher.php --><script src="http://a.tbcdn.cn/apps/sheying/tbindexgame/eggs/launch.js">
在兩個文件中,尋找egg就easy很多。index-min.js淘寶新版首頁的js,感興趣的可以自行研究。如果你覺得壓縮過的新版首頁代碼比較難懂，試試http://Uurl.cc/cepY,通過搜索egg發現，彩蛋來自launch.js. launch是什么意思？火箭發射時用的較多。這里就理解為彩蛋啟動。
/*pub-1|2013-09-26 16:06:20*/KISSY.ready(function(k){var s,b,o,r,f=k.getScript,a=k.UA,n=window,q=n.FP,i=null,l=700,j="http://a.tbcdn.cn/apps/sheying/tbindexgame/eggs/",p="console",m="border:#aaa 1px solid;padding:3px 5px;",g=["background:url(http://gtms01.alicdn.com/tps/i1/T1V_S9FcdXXXc0qR2k-184-40.png) no-repeat;padding:15px 90px;line-height:30px","background:#aaa;border-radius:4px 0 0 4px;font-weight:bold;color:#fff;"+m,"border-radius:0 4px 4px 0;line-height:30px;color:#aaa;"+m];s=["http://gtms01.alicdn.com/tps/i1/T1f2eZFdXcXXbDMVvh-200-40.gif","http://gtms03.alicdn.com/tps/i3/T1hYy6FlRXXXcTIC.G-539-361.png","http://gtms02.alicdn.com/tps/i2/T1ycKPFoBeXXa9W8sK-225-225.png","http://gtms03.alicdn.com/tps/i3/T1dMK2FX0dXXcfmpzl-19-205.png","http://gtms02.alicdn.com/tps/i2/T1Gea4FkVdXXcnw9_I-400-379.png","http://gtms04.alicdn.com/tps/i4/T1FKW5Fk4cXXXbVN7b-523-263.jpg"];b=j+"eggs.css";o=j+"eggs-min.js";function d(){r=1;f(o,function(){setTimeout(function(){i.hide().height(0)},200)})}function e(c,h){window.scrollTo(0,0);if(!i){i=c('<div style="background:#f1eddf url('+s[h]+') no-repeat center center;width:100%;height:0px;position:absolute;left:0;top:0;z-index:999999"></div>');c("body").prepend(i)}i.show().animate({height:Math.max(l,c(n).height())},0.5,"easeOutStrong",!h?null:function(){setTimeout(function(){i.hide().height(0)},5000)})}q&&k.use("node",function(){q.egg=function(c){if(a.ie&&a.ie<9){return e(k.all,1)}e(k.all,0);setTimeout(function(){r?d():(k.each(s,function(h){(new Image()).src=h}),f(b,d))},2000);if(p=n[p]){if(a.chrome){p.log("%c",g[0]),c&&p.log(c,g[1]+"padding:3px 8px;",g[2]),p.log("%cued blog%chttp://ued.taobao.com/",g[1],g[2])}else{p.log(c.replace(/%c([^%]+)%c(.+)/,"$1: $2"))}}}})});
三、彩蛋啟動
彩蛋的來源找到了,彩蛋的啟動程序代碼不多。我們直入主題，將代碼美化，注釋。
KISSY.ready(function(k) { console.log("%O",k) //通過打印發現K是一個基礎框架，里面含有常用工具方法 var s, b, o, r, f = k.getScript, //緩存工具框架K中的getScript方法 a = k.UA, n = window, q = n.FP,//由於多次用到FP 所以用q來緩存起來 i = null, l = 700, j = "http://a.tbcdn.cn/apps/sheying/tbindexgame/eggs/",//金蛋的js和css服務器地址前綴 p = "console", m = "border:#aaa 1px solid;padding:3px 5px;", g = ["background:url(http://gtms01.alicdn.com/tps/i1/T1V_S9FcdXXXc0qR2k-184-40.png) no-repeat;padding:15px 90px;line-height:30px", "background:#aaa;border-radius:4px 0 0 4px;font-weight:bold;color:#fff;" + m, "border-radius:0 4px 4px 0;line-height:30px;color:#aaa;" + m]; s = ["http://gtms01.alicdn.com/tps/i1/T1f2eZFdXcXXbDMVvh-200-40.gif", "http://gtms03.alicdn.com/tps/i3/T1hYy6FlRXXXcTIC.G-539-361.png", "http://gtms02.alicdn.com/tps/i2/T1ycKPFoBeXXa9W8sK-225-225.png", "http://gtms03.alicdn.com/tps/i3/T1dMK2FX0dXXcfmpzl-19-205.png", "http://gtms02.alicdn.com/tps/i2/T1Gea4FkVdXXcnw9_I-400-379.png", "http://gtms04.alicdn.com/tps/i4/T1FKW5Fk4cXXXbVN7b-523-263.jpg"]; b = j + "eggs.css"; //css后綴名 o = j + "eggs-min.js";//js后綴名 function d() { r = 1; //引入eggs-main.js 通過頁面效果可以猜測 eggs-min.js里面是金蛋頁面的主要邏輯部分 f(o, function() { setTimeout(function() { i.hide().height(0) }, 200) }) } function e(c, h) { window.scrollTo(0, 0);//讓滾動條回到頂部 //如果頁面沒有遮罩層則加載遮罩層 if (!i) { i = c('<div style="background:#f1eddf url(' + s[h] + ') no-repeat center center;width:100%;height:0px;position:absolute;left:0;top:0;z-index:999999"></div>'); c("body").prepend(i) } //遮罩動畫，通過動畫的時間計算遮罩的高度 i.show().animate({ //如果頁面可見區域小於700，則讓遮罩層高700 這里有待商榷 遮罩只遮住了頁面的可見區域 如果滾動跳拖動 其他區域無法遮擋 height: Math.max(l, c(n).height()) //這里也有待商榷，有可能0.5ms瀏覽器是反映不過來的 ，最好設置為25ms }, 0.5, "easeOutStrong", !h ? null : function() { setTimeout(function() { i.hide().height(0) }, 5000) //如果d函數出現異常或執行失敗，5秒后可以取消遮罩 }) } q && k.use("node", function() { //這里應該是引入了node模塊 q.egg = function(c) { //IE9以下加載提示圖片 if (a.ie && a.ie < 9) { return e(k.all, 1) } //高級瀏覽器加載loading e(k.all, 0); //2秒后 進入主頁面 setTimeout(function() { //只在第一次運行代碼時緩存圖片和eggs.css,再次進入直接進行遮罩動畫 r ? d() : (k.each(s, function(h) { (new Image()).src = h // http緩存所有圖片 }), f(b, d)) // 引入 http://a.tbcdn.cn/apps/sheying/tbindexgame/eggs/eggs.css之后執行d函數防止頁面加載的時候沒有樣式 }, 2000); //FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com"); //關於console api每個瀏覽器都不禁相同，請讀者自行查閱瀏覽器官方網站api,提示一下chrome下 %c代表樣式 if (p = n[p]) { if (a.chrome) { p.log("%c", g[0]), c && p.log(c, g[1] + "padding:3px 8px;", g[2]), p.log("%cued blog%chttp://ued.taobao.com/", g[1], g[2]) } else { p.log(c.replace(/%c([^%]+)%c(.+)/, "$1: $2")) } } } }) });
通過以上代碼的分析，可以看出FP.egg做了很多事情，比如：1、打印招聘信息;2、緩存頁面所需圖片;3、引入eggs-min.js、eggs.css ;4、載入遮罩層等等。
UED不會無聊到畫一個姑娘，同樣我們的關注點也不會局限於美女彩蛋的效果。彩蛋啟動短短的70多行代碼中運用了很多技巧，值得讀者學習。簡單總結如下：
1、緩存DOM對象和多次用到的對象,提高效率
2、對圖片進行http緩存
3、使用flag來避免重復代碼或邏輯的執行
4、使用定時器規避風險的出現
5、頁面loading，異步加載js和css
6、通過動畫實現一部分異步的邏輯
7、不要忘了瀏覽器兼容性(甚至console)
在代碼中我們沒有看到攝像頭和動畫的部分，不過我們看到代碼中引入了eggs-min.js、eggs.css。7000多行代碼的eggs-min.js是彩蛋的主邏輯。
總結：taobao UED作為國內最優秀的前端團隊之一，確實走在了最前沿，新奇的思路，規范高效的代碼着實精彩。同時，希望我和大家能一起進步。明天又是上班的節奏。本文就當"淘寶美女"的拋磚引玉。如有問題，請多多指正！
轉載請說明出處：http://www.cnblogs.com/wisdomoon/p/taobaobeauty2.html