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

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

  2. spring动态代理

    接下来我们来体会下动态代理带给我们的便利 package aop006; public interface Girl { public void KFC(String datetime); publi ...

  3. function变量困惑

    var name = "The Window"; var object = { name : "My Object", getNameFunc : functi ...

  4. ViewHolder优化2>:

    ViewHoder优化:     @Override         public View getView(int position, View convertView, ViewGroup par ...

  5. CentOS7 编译安装 Mongodb (实测 笔记 Centos 7.0 + Mongodb 2.6.6)

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7.0-1406-x86_64-DVD.iso 安装步骤: 1.准备 1.1 显示系统版 ...

  6. java web(六)多个请求对应一个Servlet

    概要: 提交请求的常用方式有两种,get/post , 运行程序后被请求,在加载执行web.xml文件时通过该文件中的映射关系找到即将要执行的Servlet; 而在要执行的Servlet文件中可通过反 ...

  7. (转)C# XMPP客户端与openfire通信（Matrix Xmpp 授权破解教程）

    FROM:http://www.cnblogs.com/crabo/p/CRACK_MATRIX_XMPP.html 如此著名的XMPP , 居然试过jabber-net, agsXmpp,matri ...

  8. iPhone Safari下iframe不显示滚动条无法滚动的解决方法

    在iframe外层包一层div,添加如下样式:style="-webkit-overflow-scrolling:touch;overflow:auto;" @media only ...

  9. 对Java中正则表达式的一些理解

    2016-12-11 22:26:18 正则表达式的意义:正则表达式是一个字符串处理工具,可以对字符串进行查找/提取/分割/替换等等,也可以对用户输入的内容进行匹配. 常用的预定义字符就不解释了,网上 ...

  10. 最短路（代码来源于kuangbin和百度）

    最短路 最短路有多种算法,常见的有一下几种:Dijstra.Floyd.Bellman-Ford,其中Dijstra和Bellman-Ford还有优化:Dijstra可以用优先队列(或者堆)优化,Be ...