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实现了一个,下面会附上源码,供大家解读. 说 ...
随机推荐
- ubuntu14.04 安装 hadoop2.4.0
转载:ubuntu搭建hadoop-Ver2.6.0完全分布式环境笔记 自己在搭建hadoop平台时,碰到一些困难,按照该博文解决了问题,转载一下,作为记录. 2 先决条件 确保在你集群中的每个节点上 ...
- Spring的三种通过XML实现DataSource注入方式
Spring的三种通过XML实现DataSource注入方式: 1.使用Spring自带的DriverManagerDataSource 2.使用DBCP连接池 3.使用Tomcat提供的JNDI
- Xamarin的不归路-使用Gorilla Player实时预览XAML
搞了一天,才安装好,记录一下遇到的坑,为大家节约些时间. 一.下载软件 软件下载地址:http://gorillaplayer.com/ 没有FQ前用360极速浏览器和迅雷下载了好多次都失败了.用了蓝 ...
- Android Gson解析
目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:https://co ...
- 学习 React(jsx语法) + es2015 + babel + webpack
视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...
- MVC辅助方法
我相信很多人虽然经常用mvc去做一些东西,但是可能很少使用mvcHtml辅助方法 首先我们要创建一个mvc项目 二创建一个HtmlHelper文件夹 三编写文件 四调用辅助方法 调用辅助方法 和使用其 ...
- 使用Spring JdbcTemplate实现数据库操作
今天我来演示 关于JDBCTemplate实现对数据库的查询和添加 首先是添加 第一步大家都知道 创建一个实体类 然后写一个方法 把实体类当参数传进去 在实现这个接口 JdbcDaoSupport这个 ...
- Android_SQLite数据库增删改查操作
一:什么是SQLite? 在Android平台上,集成了一个嵌入式关系型轻量级的数据库. 二:什么时候用的数据库? 有大量相似机构的数据需要存储时. 三:如何创建一个数据库? 1.创建一个Sqlite ...
- Redis 数据类型及其特点
Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). String(字符串) string是redis最 ...
- 浅谈Android应用保护（一）：Android应用逆向的基本方法
对于未进行保护的Android应用,有很多方法和思路对其进行逆向分析和攻击.使用一些基本的方法,就可以打破对应用安全非常重要的机密性和完整性,实现获取其内部代码.数据,修改其代码逻辑和机制等操作.这篇 ...