無標題文檔

回调和事件(翻译)

Dean Edwards 最近 有篇文章 很精彩,忍不住在这里翻译下。

-- Split --

很多 Javascript 框架都提供了自定义事件(custom events),例如 jQuery、YUI 以及 Dojo 都支持「document ready」事件。而部分自定义事件是源自回调(callback)。

回调将多个事件句柄存储在数组中,当满足触发条件时,回调系统则会从数组中获取对应的句柄并执行。那么,这会有什么陷阱呢?在回答这个问题之前,我们先看下代码。

下面是两段代码依次绑定到 DOMContentLoaded 事件中

document.addEventListener("DOMContentLoaded", function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
}, false);

document.addEventListener("DOMContentLoaded", function() {
  console.log("Init: 2");
}, false);

那么运行这段代码会返回什么信息?显然,会看见这些(或者类似的):

Init: 1
Error: DOES_NOT_EXIST is not defined
Init: 2

可以看出,两段函数都被执行。即使第一个函数抛出了个异常,但并不影响第二段代码运行。

麻烦

OK,我们回来看下常见框架中的回调系统。首先,我们看下 jQuery 的(因为它很流行):

$(document).ready(function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
});

$(document).ready(function() {
  console.log("Init: 2");
});

然后控制台中输出了什么?

Init: 1
Error: DOES_NOT_EXIST is not defined

这样问题就很明了了。回调系统其实很脆弱 -- 如果中间有段代码抛出了异常,那么其余将不会被执行。想象下在实际情况中,这后果可能会更严重,譬如有些糟糕的插件可能会「一粒老屎坏了一锅粥」。

其他的框架,Dojo 的情况和 jQuery 类似,不过 YUI 的情况有些许不同。在它的回调系统中,使用了 try/catch 语句避免因异常发生的中断。但有个小小的负面影响,就是看不到相应的异常了。

YAHOO.util.Event.onDOMReady(function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
});

YAHOO.util.Event.onDOMReady(function() {
  console.log("Init: 2");
});

输出:

Init: 1
Init: 2

那么,有无完美的解决方案呢?

解决方案

我想到了个解决方案,就是将回调和事件结合起来。可以先建立个事件,当回调触发时才运行它。由于每个事件都有其独立的运行环境(execution context),那么即使其中某个事件抛出了异常将不会影响其他的回调。

这听起来有点复杂,还是代码说话吧。

var currentHandler;

// 标准事件支持
if (document.addEventListener) {
    document.addEventListener("fakeEvents", function() {
        // 执行回调
        currentHandler();
    }, false);

    // 新建事件
    var dispatchFakeEvent = function() {
        var fakeEvent = document.createEvent("UIEvents");
        fakeEvent.initEvent("fakeEvents", false, false);
        document.dispatchEvent(fakeEvent);
    };
} else {
    // 针对 IE 的代码在后面详细阐述
}

var onLoadHandlers = [];

// 将回调加入数组中
function addOnLoad(handler) {
    onLoadHandlers.push(handler);
};

// 逐条取出回调,并利用上述新建的事件执行
onload = function() {
    for (var i = 0; i < onLoadHandlers.length; i++) {
        currentHandler = onLoadHandlers[i];
        dispatchFakeEvent();
    }
};

万事俱备,让我们将上面坨代码扔到我们新的回调系统中

addOnLoad(function() {
  console.log("Init: 1");
  DOES_NOT_EXIST++; // 这里会抛出异常
});

addOnLoad(function() {
  console.log("Init: 2");
});

上帝保佑,看运行结果我们看到了如下的信息:

Init: 1
Error: DOES_NOT_EXIST is not defined
Init: 2

赞!这就是我们期望的。这两个回调都运行而且互不影响,并且还能获得异常的信息,太好了!

好了,我们回过头来扶起 Internet Explorer 这个「阿斗」(我已经听见场下观众的建议了)。Internet Explorer 不支持 W3C 的标准事件规范,谢天谢地好在它有自身的实现 -- 有个 fireEvents 的方法,但只能在用户事件的时候触发(例如用户点击 click)。

不过终于找到了门道,我们来看下具体代码:

var currentHandler;

if (document.addEventListener) {
    // 省略上述的代码
} else if (document.attachEvent) { // MSIE
    // 利用扩展属性,当此对象被改变时触发
    document.documentElement.fakeEvents = 0;
    document.documentElement.attachEvent("onpropertychange", function(event) {
        if (event.propertyName == "fakeEvents") {
            // 执行回调
            currentHandler();
        }
    });

    dispatchFakeEvent = function(handler) {
        // 触发 propertychange 事件
        document.documentElement.fakeEvents++;
    };
}

简而言之,殊途同归,只是针对 Internet Explorer 使用了 propertychange 事件作为触发器。

更新

有些用户留言建议使用 setTimeout

try { callback(); } catch(e){ setTimeout(function(){ throw e; }, 0); }

而下面是我的考虑

如没特别的要求,其实定时器的确也能搞定这问题。
上面仅仅是举例说明了这一技术的可行性。

意义在于,目前很多框架在回调系统的实现都非常的
脆弱,这或许能给这些框架能它们提供更优化的思路。
而定时器的实现并非实际的触发了事件,在实际事件
中,事件会被顺序的执行、可相互影响(譬如冒泡)、
还可以停止 -- 而这些是定时器无法做到的。

总之,最重要的是已经实现了包括 Internet Explorer 在内,使用事件执行回调的实现。如果你正编写基于事件代理的回调系统,我想你会对这一技术感兴趣的。

更新2

Prototype 在针对 Internet Explorer 的自定义事件处理上,也是同上述的方法触发回调:

http://andrewdupont.net/2009/03/24/link-dean-edwards/

而即使出错也能继续运行期望的代码,其实可以考虑使用 finally 语句 ,下面是个例子:

var callbacks = [
  function() { console.log(0); },
  function() { console.log(1); throw new Error; },
  function() { console.log(2); },
  function() { console.log(3); }
];

for(var i = 0, len = callbacks.length; i < len; i++) {
    try {
        callbacks[i]();
    } catch(e) {
        console.info(e); // 获得异常信息
    } finally {
        continue;
    }
}

这一灵感同样来自 Dean Edwards 文章后的回复 ,在这里也贴下吧:

function iterate(callbacks, length, i) {
    if (i >= length) return;

    try {
        callbacks[i]();
    } catch(e) {
        throw e;
    } finally {
        iterate(callbacks, length, i+1);
    }
}

最后,留个小问题。谁知道上述的代码中,留言者提出的为什么异常到最后才打印出来不?

利用 DOM 特性的两个小技巧

此类技巧还有很多,欢迎继续分享

解析 URL

从 James Padolsey 的 Blog 中看到的个小技巧,就是利用 a 标签的 DOM 属性解析 URL 字符串。

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).
 
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tp:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

可对比下「传统的」正则解析方式( 取自 Tbra 库 ),至少上面代码看起来更容易理解得多

parseURL: (function() {
    var keys = ['source', 
                'prePath', 
                'scheme', 
                'username', 
                'password', 
                'host', 
                'port', 
                'path', 
                'dir', 
                'file',
                'query', 
                'fragment'];
    var re = /^((?:([^:\/?#.]+):)?(?:\/\/)?(?:([^:@]*):?([^:@]*)?@)?([^:\/?#]*)(?::(\d*))?) \
               ((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*)) \
               (?:\?([^#]*))?(?:#(.*))?/;    
    return function(sourceUri) {
        var uri = {};
        var uriParts = re.exec(sourceUri);
        for(var i = 0; i < uriParts.length; ++i) {
            uri[keys[i]] = (uriParts[i] ? uriParts[i] : '');
        }
        return uri;
    }
})();

(反)转义 HTML

取自 Prototype 中的相应代码

escapeHTML: function(str) {
    var div  = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

unescapeHTML: function(str) {
    var div       = document.createElement('div');
    div.innerHTML = str.replace(/<\/?[^>]+>/gi, '');
    return div.childNodes[0] ? div.childNodes[0].nodeValue : '';
}

-- EOF --

动画初探(实现)

说完了理论 ,我们来做点实事。这篇文章将介绍使用 Javascript 实现的动画组件。

下面记录下当时编写这个组件的考虑的些问题,对技术细节感兴趣的朋友,可以 到这里参看源代码

  1. 需要几个回调函数控制初始化、动画运行时、动画完成的情况
  2. 将动画精确到运行了几帧
  3. 使用 setInterval 还是 setTimeout,最后还是选择了 setInterval( 详细
  4. 不管元素需要更改那些属性,提供相应公式即可,但这可能带来性能问题
  5. 要可扩展、而且稳定

这个动画组件的用法简要的说明下,首先我们要确定元素从哪里移动(begin)到哪里(final),我们可以将两个信息绑定到一起,比如

var position = {from: 0, to: 100};

然后实例化个动画组件,指定动画的运行时长(duration)以及动画运行类型(tween)

var motion = new Motion(duration, tween);

另外,我们当然希望在动画初始化、开始以及进行和结束时候做额外的事情,那么加入相应 的回调:

// 初始化
motion.onInit = function() {
    // ...
};

// 开始
motion.onStart = function() {
    // ...
};

// 动画运行时
motion.onTweening = function() {
    // 需要获取某个时间点的坐标时,可以使用 this.equation 方法
    var p = this.equation(position.from, position.to);
};

// 动画完成时
motion.onComplete = function() {
    // ...
};

当一切准备就绪,那么就可以开始动画了

motion.start();

当然,任何时候我们都希望能停止动画,那么就

motion.stop();

那么我们就可以通过这个动画组件完成常见的动画效果了。 这里有个 DEMO ,看下这个动画组件的实际使用例子。按照传统,代码可以在这里 打包下载

附,参考资源: YUI 的动画组件mootools 的动画组件

-- 全文完 --

动画初探(原理)

哲学上有种说法,「运动是绝对的,静止是相对的」。我们在编写各样的效果时,时常会碰到动画。下面的章,将讨论动画的原理以及实现。

动画,简而言之就是物体在某时间段内,不断的改变自身的属性。这些属性有可能是位置、大小等。为了方便说明,在这里统一认定为位置(position)。

那么,动画就有了两个基本的变量,时间和位置。用直角坐标系来表示,将 x 轴定为时间(time),将 y 轴定为位置(position),就可以得到这样的坐标系

https://friable.rocks/_/2009_11_05/124506e8a53a.jpg

从这个坐标系可以获得更多的信息,比如动画运行的时间段(x 轴的区间)、动画开始试物体的位置(begin)以及结束时的位置(final)。

然后,动画的基本关系可初步抽象出来。时间(duration)和位置(position)存在函数关系

position = f(time)

在这里同时引入 fps (帧率)这个概念。fps 简单的说,就是一秒钟内物体变化了几帧。它抽象成坐标中的元素,就是 x 轴的粒度。

fps 是个常量(比如通常电影的 fps 为 25,即每秒 25 帧),通过 fps 以及时间段(duration),则可以计算出这个时间段内物体位移了几帧(frames),公式如下

frames = (duration/1000)*fps

上述公式中,时间段(duration)以 毫秒 计算,即一毫秒等于一千分之一秒。

综合起来,我们要获得某个时间点的位置时,就可以利用 当前时间点(time)、时间段(duration、x 轴的区间),以及开始的坐标(begin)和结束的坐标(final)等因素来完成,那么可以将第一个的公式细化成

position = f(time, begin, final, duration)

同时,根据 fps 计算出的帧数,则可以得知某动画在这个时间段内运行了几次。而此函数产生的曲线,则可以说明在指定时间段内,物体的运动情况。如曲线比较抖,则说明物体运动比较快,反之则慢。

例如上述函数图的 45 度曲线,如果不考虑区间因素则可以写成

position = time

然后加上函数区间,则用函数表示

postion = final * time / duration + begin

那么就可以说明物体随着时间的改变,位置进行匀速递增的运行。

至此,元素的动画问题,这时就可以抽象成具体的数学问题。仅通过改变函数的公式,就可以改变物体动画的运行效果。

附,相关参考资源:

维基百科: 动画中文 )、 FPS/帧率中文

--未完待续--

Javascript 小游戏,「是男人坚持 100 次」

佛爷 去了公司的年夜饭,我有点无聊就在公司 Coding 点东西玩玩,于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为 「是男人坚持 100 次」 (坦白讲,我是死活玩不到这个级别了)。

https://friable.rocks/_/2009_11_05/690116db6fb0.jpg

原定两个小时搞定的脚本,结果花了我将近三个小时的时间。完事后 我在 Twitter 上记录下 心得结果被群殴(看来 Twitter 不能当作笔记本),还是记录到 Blog 里比较靠谱

  1. 设计模式和算法很重要,在前期打「腹稿」的时候就应该搞定那玩意。
  2. 按需加载,特别是在大量的 DOM 操作时,这时候就要体现算法的力量了。
  3. 命名很重要,能避免很多问题。比如遇到了不大不小的 Bug,原因是我作孽得将某个变量命名为 「class」 了。
  4. 效率优先是没有错,可怜我一开始就考虑这些而忽略了其他更重要的事情,绕了很多的弯路。
  5. 结构尽量精炼,能用 CSS 实现的效果尽量用 CSS 实现。
  6. 将「杂碎」的处理拉出来或者再细分整理下,不要写「一坨」很长的 function,自己看着都累。

对技术实现有兴趣的朋友可以 看下核心的 Javascript 代码 ,欢迎提任何建议。PS,在内测的时,虽然这小游戏是我写的,但发现谁都比我玩得好,真是没有脸活了。

顺便八卦: Javascript 做游戏并不是不可能 。从目前的情况以及效果和成本看,还是使用 Flash 比较得当。到 HTML5 以及 Canvas 普及以后,这情况可能会有所改变,不过在这之前谁又能等的了呢。

最后,游戏地址:

http://friable.rocks/dazing/写了个 Javascript 小游戏 ,我称之为「天上地下打不死」,有兴趣也可以看看。

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHub (2) 、 TwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 其实无所谓叫什么名字,作为码农知道取名是件很难的事情。最后想到的这个名字,其实都没啥特别的含义,系统默认的文件名而已。

作为八零后,自认为还仅存点傲娇式的幽默感,以及对平淡生活的追求和向往。 为了免得对号入座和不必要的麻烦,声明本站点所持观点仅代表个人意见,不代表自己所服务公司的立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

文章

项目