我们已经知道，执行美女会得到"金蛋",而正是金蛋做到了taobaoUED展现给大家的神奇的前端魅力。今天我们来看看FP.egg&&FP.egg("%cjoin us%cshidu.mj@taobao.com");这行代码做了什么？FP.egg方法来自哪里？FP.egg方法的内部逻辑是什么？
class="q-title"> 二、金蛋来自哪里？
打开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"))}}}})});
三、金蛋启动
金蛋的来源找到了,金蛋的启动程序代码不多。我们直入主题，将代码美化，注释。
logs_code_hide('3ee55549-ab45-4169-a545-61b338cc7e40',event)" style="display: none;" />
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")) } } } }) });View Code
通过以上代码的分析，可以看出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
相关文章
