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

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

    }

}

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

Deffered.js的实现原理的更多相关文章

  1. Sea.Js的运行原理(转)

    1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...

  2. 深入研究Node.js的底层原理和高级使用

    深入研究Node.js的底层原理和高级使用

  3. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  4. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  5. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  6. 如何编写高质量的js代码--底层原理

    转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇   本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...

  7. JS简单回弹原理

    /* *JS简单回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  8. 函数式 js 接口实现原理，以及 lodash/fp 模块

    函数式 js 接口 之前在 youtube 上看到一个技术视频,讲“underscore.js的接口为什么不好用”,以及什么样的接口更好用.演讲者是 lodash.js 的作者,他提出了一种“全面函数 ...

  9. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

随机推荐

  1. Sublime Text 3实用快捷键大全

      下面是我通过网上教程和文本资料学习sublime Text3时收集的一些实用功能和常用快捷键,现在分享出来,如果还有其它的好用的功能可以在下面留言,以便互相学习和交流,谢谢!. 选择类 Ctrl+ ...

  2. Google Play Store —与google服务器通信时出现问题

    机子:MX4 前几天刷完机后出现登录Google Play Store “与google服务器通信时出现问题”,今天试了好几种方法,来总结一下 1.修改最新Hosts文件 2.SmartHosts   ...

  3. div样式text-align在子元素缩进不规范的情况下，chrome出现的问题（貌似结果是inline-block导致的）

    在调css的时候,发现居然有firefox实现效果完整而chrome出现问题的情况: 详细情况:segmentfault1 segmentfault2 全文表达: <html><he ...

  4. 利用js查找页面中的内链，外链

    起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a ...

  5. Odoo PDF 取消Header后 空白处理

    处理方法是 设置纸张格式中的上边距 ,调整位合适的位置.效果如下图:

  6. C#中分割字符串输出字符数组

    来自博客园 http://www.cnblogs.com/yugen/archive/2010/08/18/1802781.html   1.用字符串分隔: using System.Text.Reg ...

  7. 执行mysqld_safe报错:mysqld does not exist or is not executable

    执行mysqld_safe报错: [root@edu data]# /usr/local/mysql5.7/bin/mysqld_safe --user=mysql160427 12:41:28 my ...

  8. Devexpress Ribbon

    http://www.cnblogs.com/liwei81730/archive/2011/12/21/2296203.html 可查看此处.

  9. 嵌入式linux下如何尽快播放开机音乐

    今天在考虑如何尽快启动一个应用程序,播个开机音乐什么的. 最开始的启动流程是这样的,bootloader 启动kernel,kernel跑完挂载文件系统, 然后会执行/init,而这个init 是指向 ...

  10. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...