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

在认真看了两天之后，才看懂它的实现原理，我下面把通自己的理解，进行了精简。只程现原理，方便日后的回顾。<!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. ATL封装IE内核启示：使用Win32/ATL建立窗口

    开发大型GUI界面程序MFC当仁不让,但如果是开发图形应用程序,并不需要大规模界面控件,没有必要链接庞大的MFC库,直接使用platform sdk会很麻烦,这时ATL中的关于Windows的封装就是 ...

  2. CSS预处理框架：less，scss

    CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量.简单的程序逻辑.函数等等在编程语言中 ...

  3. MySql UDF 调用外部程序和系统命令

    1.mysql利用mysqludf的一个mysql插件可以实现调用外部程序和系统命令 下载lib_mysqludf_sys程序:https://github.com/mysqludf/lib_mysq ...

  4. bzoj3648: 寝室管理（环套树+点分治）

    好题..写了两个半小时hh,省选的时候要一个半小时内调出这种题目还真是难= = 题目大意是给一棵树或环套树,求点距大于等于K的点对数 这里的树状数组做了一点变换.不是向上更新和向下求和,而是反过来,所 ...

  5. php中htmlspecialchars()函数和addslashes()函数的使用和区别

    在防止被注入攻击时,常会用到两个函数:htmlspecialchars()和addslashes()函数.这两个函数都是对特殊字符进行转义. 1)addslashes()作用及使用 addslashe ...

  6. Logstash之multiline 插件

    input { stdin { codec => multiline { pattern => "^\[" negate => true what => & ...

  7. canvas ：曲线的面积图 加渐变效果

    document.body.innerHTML = '<canvas></canvas>' var cvs = document.querySelector("can ...

  8. 计数排序和桶排序（Java实现）

    目录 比较和非比较的区别 计数排序 计数排序适用数据范围 过程分析 桶排序 网络流传桶排序算法勘误 桶排序适用数据范围 过程分析 比较和非比较的区别 常见的快速排序.归并排序.堆排序.冒泡排序等属于比 ...

  9. .NET面试题系列[15] - LINQ：性能

    .NET面试题系列目录 当你使用LINQ to SQL时,请使用工具(比如LINQPad)查看系统生成的SQL语句,这会帮你发现问题可能发生在何处. 提升性能的小技巧 避免遍历整个序列 当我们仅需要一 ...

  10. ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题

    前言 本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...