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

在认真看了两天之后，才看懂它的实现原理，我下面把通自己的理解，进行了精简。只程现原理，方便日后的回顾。<!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. [转]Android Studio 里搭建自动化测试框架Robotium

    Android的自动化测试框架可选择的不多,后来选了Robotium(https://code.google.com/p/robotium/),它的语法及易用性挺像我们用在iOS里的KIF. 官方文档 ...

  2. uploadify批量上传

    js: $("#uploadify").uploadify({ 'uploader':'uploadServlet', 'swf':'image/uploadify.swf', ' ...

  3. jQueryUI Draggable 和 Droppable 配合使用时遇到的两个坑

    jQueryUI 的 拖拽插件极大的方便了开发者对拖拽功能的实现,但是官方教程给的太笼统,在具体实现的时候很多地方不明确,这里说一下我遇到的两个 "小坑": 1:Draggable ...

  4. 续关于C#的微信开发的入门记录一

    前几天写了一篇博客<关于C#的微信开发的入门记录一>,原文地址:http://www.cnblogs.com/zhankui/p/4515905.html,现在继续完善: 目前很多小伙伴都 ...

  5. CF2.E

    E. Comments time limit per test 2 seconds memory limit per test 256 megabytes input standard input o ...

  6. System.Dynamic.ExpandoObject 类型的简单使用

    该类型可以实现的是动态添加属性和移除属性,有点类似 js 中对象的操作,非常灵活 static void Main(string[] args) { dynamic obj = new System. ...

  7. SpringMVC 框架的搭建及基本功能的实现

    首先新建一个WEB项目 导入jar包 我们基于Spring mvc框架进行开发,需要依赖一下的spring jar包: spring-aop-4.0.4.RELEASE.jar spring-bean ...

  8. 领域驱动有感<上>

    最近看了<领域驱动设计:软件核心复杂性应对之道>,从字面上来看领域驱动就是解决软件复杂性问题的:然而领域驱动设计的门槛很高,没有很深厚的面向对象编码能力几乎不可能实践成功.Martin F ...

  9. Android动画

    [浅谈Android动画] 总共四种:Tween Animation变换动画.Frame Animation帧动画 Layout Animation布局动画.Property Animation 属性 ...

  10. SQL Server 2016中In-Memory OLTP继CTP3之后的新改进

    SQL Server 2016中In-Memory OLTP继CTP3之后的新改进 转译自:https://blogs.msdn.microsoft.com/sqlserverstorageengin ...