预加载有很多种,dom预加载、iframe预加载、ajax预加载等等。但是有另外一种简洁安全的做法:

  • 对ie使用Image来预加载内容
  • 其它浏览器使用动态的object标签

例如:

window.onload = function () {

    var i = 0,
        max = 0,
        o = null,

        // list of stuff to preload
        preload = [
            'http://tools.w3clubs.com/pagr2/.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/.sleep.expires.css'
        ],
        isIE = navigator.appName.indexOf('Microsoft') === 0;

    for (i = 0, max = preload.length; i < max; i += 1) {

        if (isIE) {
            new Image().src = preload[i];
            continue;
        }
        o = document.createElement('object');
        o.data = preload[i];

        // IE stuff, otherwise 0x0 is OK
        //o.width = 1;
        //o.height = 1;
        //o.style.visibility = "hidden";
        //o.type = "text/plain"; // IE
        o.width  = 0;
        o.height = 0;

        // only FF appends to the head
        // all others require body
        document.body.appendChild(o);
    }

};

四月 29th, 2010

最近在练口琴

No Comments, 其它, by army.

年前玩了空之轨迹后突然想起来学口琴,大概自己的几大爱好中就差了门艺术吧,于是乎就练起来了。起初尝试布鲁斯,后来因为压音实在太过苦恼(不是不会,其实我学会了压音了已经),后来转战半音阶,而且半音阶口琴也比较适合动漫、流行等音乐主奏。

目前所有学习后的曲目都放在http://www.tudou.com/home/army8735#tui-tab_0这里,可以感觉得到每支新曲子都是有进步的。要吹的还很多,大家有任何喜欢的歌或者建议都可以留下来,我一个个去试~

四月 19th, 2010

土豆映像节颁奖典礼

4 Comments, 前端开发, by army.

http://www.tudou.com/programs/view/fL3GI1M-huc

从2月开始接手第2期到现在,终于在高潮后走到尾声了。

四月 6th, 2010

土豆rss主页

No Comments, 前端开发, by army.

冒充了一回设计,我那水平也只能这样了:

http://rss.tudou.com/

昨日,土豆的前端开发人员们就事件侦听之间是否应该出现逻辑关联展开了一场辩论。具体争论的问题如下:

document.body.addEventListener("click", functionA, false);
document.body.addEventListener("click", functionB, false);

functionA() {
    document.body.removeEventListener("click", functionB, false);
}
functionB() {
}

此时如果我在页面的body上点击了一下,会发生什么?回答有两种:A和B都执行、但下一次点击B不会再被执行了;A执行B不被执行、且以后B都不会执行。

答案是什么并不重要,关键是要看浏览器的js引擎如何处理事件侦听。分别假设上面两种答案都是正确的话,那么它们各自的处理方式应该如下:

  1. 点击触发后,A和B方法同时收到侦听并触发,此时它们是并行的。因此都会产生调用并存入内存队列中,等待出列执行。
  2. 点击触发后,A由于先注册所以先触发侦听,B完全没有任何反应,此时它们是串行的。因此A先进入队列,执行过程中移除了B的侦听,B也就永远销声匿迹了。

那么我们常见的浏览器中的js引擎都是如何实现的呢?因为js是函数式单线程的,所以正确答案是第2个。但是包括标准推荐的做法在内,我的观点是不应该在事件侦听中出现逻辑关联,也就是耦合。

如果两个事件侦听出现了依赖逻辑互相确定执行的话,那么它们本身就应该写在一个事件侦听里面,然后通过重构相分离。依然以上面的为例,B方法的执行依赖于A方法中的某个逻辑的话,更好的做法应该是这样:

document.body.addEventListener("click", listener, false);

function listener() {
    if(A()) return;
    B();
}
functionA() {
    if(/*某个条件达成*/) return true;
    return false;
}
functionB() {
}

如果出现了不同事件侦听有逻辑关联的情况的话,那么最初的设计可能就需要考虑一下。反对者(其实就是指某人)的论据则是灵活度以及js的函数式和单线程特性。在日益复杂的情势中,前端是否也应该像java摒弃多继承一样,而降低某些灵活度呢?