岁月如歌

Yahoo! 新版首页前端代码浅析

Posted on August 5th, 2009 in 前端开发 by lifesinger

写得有点晚，直奔主题。

YUI 3 神功初显

去年 11 份开始，已经有新闻：The New Yahoo! Front Page and YUI 3.0. 更小、更快、更灵活、更独立、向前兼容等等优点，不多说。从 Yahoo! 新版首页的性能来看，YUI 3 起到了不小作用。

附加 UA 信息

<html lang="en-US" dir="ltr" class="y-fp-bg ua-ff ua-ff3 ua-win  bkt701
jsenabled flash-10 flash-gt9 flash-gt8 flash-gt7 flash-gt6 flash-gt5 flash-gt4">

后台生成页面时，直接将 UA 信息添加在 html 标签上。其中 jsenabled, flash-10 等信息，是通过 js 添加的。
具体好处请参阅博文：Goodbye to CSS Hack.

960 不是神话

Yahoo! 新版首页的页面宽度为 972px. 页面结构如下：

其中 y-cols 下三栏的宽度为：192 + 8 | 400 + 10 | 350. 总宽度为 960. 加上最右边的 10px 和左右边框 2px, 总宽度为 972px.

栅格带来的是一种布局思想阅读全文 »

Tags: Yahoo

Comments (17)

YUI 中 onDOMReady 的 iframe bug

Posted on August 3rd, 2009 in 前端开发 by lifesinger

好友怿飞前不久总结过：模拟兼容性的 addDOMLoadEvent 事件

需要特别注意：在 iframe 中，doScroll 方法不会抛异常。需要用 onreadystatechange 来模拟：

// from jQuery 1.3.2
// If IE event model is used
} else if ( document.attachEvent ) {
    // ensure firing before onload,
    // maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", function() {
        if ( document.readyState === "complete" ) {
            // ...
        }
    });

    // If IE and not an iframe
    // continually check to see if the document is ready
    if ( document.documentElement.doScroll && window == window.top ) (function() {
        // doScroll ...
    })();
}

YUI 用户要小心：目前在 YUI 2.7 和 YUI 3.0 pb1 中，均未修复此 bug. 在 iframe 中，请尽量将 js 代码放在文件尾部以避免此问题。

在 YUI 2.8 中，该 bug 已修复：Ticket #2008289. 从 bug 被提交，到问题解决，历时一年多，囧。

Tags: bug, iframe, YUI