yupoo新版前端技术初探

标签： yupoo 前端技术 | 发表时间：2011-06-02 20:06 | 作者：chaoren1641 小白

出处：http://www.cnblogs.com/chaoren1641/

听说yupoo改版了，打开看了一下，我对设计风格什么的不太懂，所以直接看了下源代码，发现他们用了Modernizr和labjs这两个工具，所以很有兴致的分析了一下前端代码，的确做得不错的说。

首页顶部：

为各个IE版本设置了class，目的应该是处理各种css hack。

继续看：

IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame

当使用了这个meta后，网页宽度默认为设备屏幕的宽度，这个标记适用于手机，平板电脑等移动设备。

看下面的JS代码：

这里目的是为了防止网站被iframe的安全处理，冒似是参考的twitter,可以看我前一篇文章。

看下一个亮点：

第一个不多说了，每个网站都应该有。

app-touch-icon作用是ipad和iphone创建快捷方式时的图标。

rel="search"则是为了应对firefox右上角出现它的搜索选项，chrome下好像没有这个东东。

当浏览器为IE6时，加载pngfix.js，pngfix目的是在IE6下能够设定PNG图片的透明度。冒似这样的开源JS库有不少，IE6要用到透明时很棒的解决方案。

再往下看：

var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-8399606-3']);

    _gaq.push(['_addOrganic', 'soso', 'w']);
    _gaq.push(['_addOrganic', 'yodao', 'q']);
    _gaq.push(['_addOrganic', 'vnet', 'kw']);
    _gaq.push(['_addOrganic', 'sogou', 'query']);

    _gaq.push(['_trackPageview', '/index/index']);
    _gaq.push(['_setDomainName', '.yupoo.com']);

    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
    g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";

    s.parentNode.insertBefore(g,s)}(document,"script"));

这里是谷歌统计的ga.js，异步加载的，没什么好说的。

再最下面只有一个很小的JS。整个首页的优化我认为做到了极致，也充分利用了各种资源，首页只用到了首页要用的JS，并没加载其它。

看内页（登录后的）：

Modernizr（官方被墙了） + labjs放到了一起，大小只有9k。

下一亮点：

if (Browser.ie6) {
     $$('.button').addEvents({
           mouseover: function(){this.addClass('button-hover')},
           mouseout: function(){this.removeClass('button-hover')},
           mousedown: function(){this.addClass('button-active')},
           mouseup: function(){this.removeClass('button-active')}
     });
}

如果是非ie6则用了:hover伪类来做鼠标移上去的样式处理，ie6则用js来解决同样的效果，这样的代码有好几处，充份利用了浏览器自有功能。

最后一个亮点：

$LAB.setOptions({BasePath: uPai.app.scriptRoot + '/'})
        .script('global.js?15127281.js').wait()
        .script('dashboard.js?15126745.js').wait()
        .script('postbox.js?15127849.js').wait()
        .script('timeline.js?15127232.js').wait()
        .script('share.js?15127136.js').wait()

        .script('textboxlist.js?15126834.js').wait(function(){ uPai.fireEvent('ready', [uPai]); });

利用3K大小左右的labjs加载了页面所用到的全部JS，异步并行加载且保证了加载和执行顺序，充分节约了浏览器资源。总之yupoo前端的处方面在我看过的这么些网站中算很棒的了，不像大多数网站，一系列的<script src="xxx.js"，极其影响效率。

yupoo的页面结构不算复杂，代码不量不大所以很容易看清楚结构。只看了下首页和登录后的首页，这样的代码结构其实正是我所想的。Modernizr + labjs都是目前比较新且炒得比较火的JS库，有兴趣的可以google一下，yupoo在前端性能方面可谓算是做得很不错的了,赞一个！

当然有亮点肯定不止这么一点，不足也肯定有，待有时间再细细品尝吧！

附上介绍modernizr和labjs的相关链接：

【译文】Modernizr——为HTML5和CSS3而生！

LABjs分析

作者: chaoren1641 发表于 2011-06-02 20:06 原文链接

评论: 4　查看评论　发表评论

最新新闻：
· Facebook在英国市场份额下降(2011-08-11 08:44)
· 四年智能手机平台概览：绿机器人的崛起(2011-08-11 08:44)
· 美国大学生的电子产品依赖(2011-08-11 08:26)
· 使用Rx和Silverlight编写异步测试(2011-08-11 08:24)
· QQ最高在线帐户首度下降半年投资耗95亿现金流(2011-08-11 08:23)

编辑推荐：为什么要关闭数据库连接，可以不关闭吗？

网站导航：博客园首页我的园子新闻闪存小组博问知识库