Deffered.js的实现原理

在艾伦的推荐下，看了一个日本人写的延时加载库，非常轻量，写的很棒。作为我的源码学习的第一编。

在认真看了两天之后，才看懂它的实现原理，我下面把通自己的理解，进行了精简。只程现原理，方便日后的回顾。<!DOCTYPE HTML>

<html>
<head>
<meta charset="utf-8">
<title>deffred</title>
<meta name="Keywords" content="">
<meta name="Description" content="">

</head>
<body>

<script type="text/javascript" src="deffered.js"></script>

<script type="text/javascript">
Deferred.next(function(){
    alert(1)
    //这里直接return ;则会立即调用alert(2),没有异步过程
    return Deferred.wait(3)
}).next(function(){
    alert(2)
})



</script>
</body>
</html>

deffered.js是我精简之后的代码，并加了一些注释：

/**
 * @fileOverview JSDeferred
 * @author       cho45@lowreal.net
 * @version      0.4.0
 * @license
 * JSDeferred Copyright (c) 2007 cho45 ( www.lowreal.net )
 *
 *  针对deferred的原理进行精简
 */ ; // no warnings for uglify

function Deferred () {
    return this.init();
}
//定义静态方法
Deferred.ok = function(x) {return x} //缺省的成功回调
Deferred.ng = function(x) {throw x}
//判断是否为Deferred的实例
Deferred.isDeferred = function (obj) {
    return !!(obj && obj._id === Deferred.prototype._id);
};

//这个next是挂在Deferred上的静态方法。与实列方法.next是不同的
Deferred.next = function(fn){
    var d = new Deferred();
    var img = new Image();
    var handler = function(){
        d.canceller();
        d.calls();
    }
    //这个地方个人认为比较巧秒，它利用了img加载成功或错误回调具有异步的特性。
    //保证完整收集这些.next().next()...
    //事实上官方还用了其它两种方式，确保兼容，如setTimeout....
    img.addEventListener('error',handler,false);
    d.canceller = function(){
        img.removeEventListener('error',handler,false);
    }
    //这里用来触发一个img的加载事件
    img.src = "data:image/png," + Math.random();
    if(fn) d.callback.ok = fn;
    return d;
}

//这里是用来模拟一个比较耗时的异步过程
//实践中，可能是取数据的过程，如等待ajax回调
Deferred.wait = function (n) {
    var d = new Deferred(), t = new Date();
    var id = setTimeout(function () {
        d.calls((new Date()).getTime() - t.getTime());
    }, n * 1000);
    d.canceller = function () { clearTimeout(id) };
    return d;
};


Deferred.prototype = {
    _id : 8888, //随便填写,用来判断是否为Deferred的实例
    init : function(){
        this._next = null;
        //使Deferred.isDeferred 判断为假
        this.callback = {
            ok : Deferred.ok,
            ng : Deferred.ng
        }
        return this;
    },
    next  : function (fun) { return this._post("ok", fun) },

    calls  : function (val) { return this._fire("ok", val) },

    _post : function (okng, fun) {
        //个人认为，理解这里是关键，
        //._next保存一下实例对象，形成一个链
        this._next =  new Deferred();
        this._next.callback[okng] = fun;
        return this._next;
    },

    _fire : function (okng, value) {
        var next = "ok";

        value = this.callback[okng](value);
        //这里的value如果不是Deferred的实例
        if (Deferred.isDeferred(value)) {
            //加载下一个任务
            value._next = this._next;
        } else {
            //说明没有下一个任务了
            if (this._next) this._next._fire(next, value);
        }
        return this;
    }
}

我的重点在于方便理解原理，关于源代码的分析，参看司图正美的博文。此处不在复述。

posted on 2014-07-05 17:08 bjtqti 阅读(481) 评论(0) 编辑收藏举报

Deffered.js的实现原理

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论