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

在认真看了两天之后，才看懂它的实现原理，我下面把通自己的理解，进行了精简。只程现原理，方便日后的回顾。<!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. 怎么统计指定文件夹下含有.xml格式的文件数目

    如何统计指定文件夹下含有.xml格式的文件数目?如题 ------解决思路----------------------Directory.GetFiles(@"路径", " ...

  2. JavaMail和James的秘密花园

    JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口.它是Sun发布的用来处理email的API.它可以方便地执行一些常用的邮件传输.我们可以基于JavaMail开发出类似于Micros ...

  3. android之volley学习

    Volley是android的平台通信库,一个新的网络通信框架.Volley 的特点:适合数据量小,通信频繁的网络操作. 获取Volley git 工具使用:git clone https://and ...

  4. MySql怎样去掉某个字段最后的逗号或最后的字

    update 表 set 字段=left(字段,char_length(字段)-1) where right(字段,1)=',';

  5. shell去除换行和空格2

    #!/bin/bash if [ -f str.txt ] ## 如果str.txt存在,则返回true then strval=$(cat str.txt|awk '{printf "%s ...

  6. [LeetCode] All solution

    比较全的leetcode答案集合: kamyu104/LeetCode grandyang

  7. C语言中的sizeof()

    sizeof,一个其貌不扬的家伙,引无数菜鸟竟折腰,小虾我当初也没少犯迷糊,秉着"辛苦我一个,幸福千万人"的伟大思想,我决定将其尽可能详细的总结一下. 但当我总结的时候才发现,这个 ...

  8. Wishart distribution

    Introduction In statistics, the Wishart distribution is generalization to multiple dimensions of the ...

  9. dev GridControl 根据鼠标坐标 选中行

    if (e.Button == System.Windows.Forms.MouseButtons.Right) { DevExpress.XtraGrid.Views.Grid.ViewInfo.G ...

  10. 如何识别一个字符串是否Json格式

    前言: 距离上一篇文章,又过去一个多月了,近些时间,工作依旧很忙碌,除了管理方面的事,代码方面主要折腾三个事: 1:开发框架(一整套基于配置型的开发体系框架) 2:CYQ.Data 数据层框架(持续的 ...