Deffered.js的实现原理
在艾伦的推荐下，看了一个日本人写的延时加载库，非常轻量，写的很棒。作为我的源码学习的第一编。
在认真看了两天之后，才看懂它的实现原理，我下面把通自己的理解，进行了精简。只程现原理，方便日后的回顾。<!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的实现原理的更多相关文章
- Sea.Js的运行原理(转)
1.CMD(Common Module Definition)规范 Sea.js采用了和Node相似的CMD规范,使用require.exports和module来组织模块.但Sea.js比起Node ...
- 深入研究Node.js的底层原理和高级使用
深入研究Node.js的底层原理和高级使用
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- 如何编写高质量的js代码--底层原理
转自: 如何编写高质量的 JS 函数(1) -- 敲山震虎篇 本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm ...
- JS简单回弹原理
/* *JS简单回弹原理 */ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 函数式 js 接口实现原理，以及 lodash/fp 模块
函数式 js 接口 之前在 youtube 上看到一个技术视频,讲“underscore.js的接口为什么不好用”,以及什么样的接口更好用.演讲者是 lodash.js 的作者,他提出了一种“全面函数 ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- ORA-12560: TNS: 协议适配器错误
解决方案: 在开始菜单搜索 services.msc,进入本地服务 将 OracleOraDb11g_home1ClrAgent,OracleOraDb11g_home1TNSListener,Ora ...
- 一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)
背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...
- iOS开发之单元测试
开始之前 本文侧重讲述如何在iOS程序的开发过程中使用单元测试.使用Xcode自带的OCUnit作为测试框架. 一.单元测试概述 单元测试作为敏捷开发实践的组成之一,其目的是提高软件开发的效率,维持代 ...
- JQuery学习笔记
注:以下资料来源W3School.COM.CN jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() ...
- tab+tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- *CF2.D（哥德巴赫猜想）
D. Taxes time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- phone 调试三种工具
1. Phonegap桌面开发工具 Phonegap Desktop-App与 手机客户端调试工具PhoneGap Developer App 此工具方便.快捷.自动.可以在真机中查看 无法设置断点. ...
- Android 中关于ListView分割线的设置
今天发现许多App上的listview的item之间的分割线都只显示了右边一部分,而左边的那一半则没有,第一反应则是给分割线设置一张背景图片就ok了: android:divider="@m ...
- eclipse 中的注释 快捷键
(1)Ctrl+Space 说明:内容助理.提供对方法,变量,参数,javadoc等得提示, 应运在多种场合,总之需要提示的时候可先按此快捷键. 注:避免输入法的切换设置与此设置冲突 (2)Ctrl ...
- Powershell 十个常见任务
学习Powershell的时候,基本的语法也了解了一些,但是就是不知道要写些什么?作为一个过来者,和大家一起分享下常见的几个管理任务脚本. 1.更改本地Administrator账号密码 [ADSI] ...