网页前端设计

我们已经知道，执行美女会得到"金蛋",而正是金蛋做到了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('');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('');
            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作为国内最优秀的前端团队之一，确实走在了最前沿，新奇的思路，规范高效的代码着实精彩。同时，希望我和大家能一起进步。明天又是上班的节奏。本文就当"淘宝美女"的抛砖引玉。如有问题，请多多指正！

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