12.jQuery工具方法$.Deferred()简单实现 和 工具方法$.when()方法介绍
jQuery工具方法$.Deferred()简单实现：
(function () { //创建一个jQuery构造函数 function jQuery(selector) { return new jQuery.prototype.init(selector); } //为jQuery的原型添加init属性，所有实例可以使用该属性 jQuery.prototype.init = function (selector) { this.length = 0; //为this添加length属性，并且赋值为0 //选出 dom 并且包装成jQuery对象返回 //判断selector是null 和 undefined 和 dom对象 和 id 和 class的情况 if (selector == null) { //判断selector是null或undefined return this; } else if (typeof selector === 'string' && selector.indexOf('.') != -1) { //selector是class的情况 var dom = document.getElementsByClassName(selector.slice(1)); } else if (typeof selector === 'string' && selector.indexOf("#") != -1) { //selector是id的情况 var dom = document.getElementById(selector.slice(1)); } if (selector instanceof Element || dom.length == undefined) { //(selector是dom对象) || (selector是id，返回的是一个对象，对象没有length属性) this[0] = dom || selector; //(selector是id) || (selector是dom对象) this.length++; } else { //selector是class，返回的是一个类数组 for (var i = 0; i < dom.length; i++) { this[i] = dom[i]; this.length++; } } }; //为jQuery的原型添加css属性，所有实例可以使用该属性 jQuery.prototype.css = function (config) { for (var i = 0; i < this.length; i++) { for (var prop in config) { this[i].style[prop] = config[prop]; } } return this; //链式调用的精髓 }; //为jQuery对象的prevObject属性赋值，从而可以使用end()方法 jQuery.prototype.pushStack = function (dom) { //dom是jQuery对象 if (dom.constructor != jQuery) { //dom是原生的dom对象 dom = jQuery(dom); //将原生dom对象包裹成jQuery对象 } dom.prevObject = this; //将 return dom; }; //为jQuery的原型添加get属性，所有实例可以使用该属性 jQuery.prototype.get = function (num) { //num == null 返回数组 //num >= 0 返回this[num] //num < 0 返回this[length + num] return (num != null) ? ((num >= 0) ? (this[num]) : (this[num + this.length])) : ([].slice(this, 0)); }; //为jQuery的原型添加get属性，所有实例可以使用该属性 jQuery.prototype.eq = function (num) { return this.pushStack(this.get(num)); //调用jQuery.prototype.get()函数获取到dom对象，再封装为jQuery对象并且为jQuery对象添加prevObject属性 }; //为jQuery的原型添加add属性，所有实例可以使用该属性 jQuery.prototype.add = function (selector) { var curObj = jQuery(selector); //当前通过add添加的selector选中的jQuery对象 var prevObj = this; //调用add()的jQuery对象 var newObj = jQuery(); for (var i = 0; i < curObj.length; i++) { newObj[newObj.length++] = curObj[i]; } for (var i = 0; i < prevObj.length; i++) { newObj[newObj.length++] = prevObj[i]; } this.pushStack(newObj); //为jQuery对象添加prevObject属性 return newObj; //将合并后的jQuery对象返回 }; //为jQuery的原型添加end属性，所有实例可以使用该属性 jQuery.prototype.end = function () { return this.prevObject; //直接返回前一个jQuery对象 }; //为jQuery的原型添加on属性，所有实例可以使用该属性 jQuery.prototype.on = function (type, handle) { for (var i = 0; i < this.length; i++) { if (!this[i].cacheEvent) { //判断每一个原生dom对象中是否有事件 this[i].cacheEvent = {}; //为每一个原生的dom对象添加绑定事件 } if (!this[i].cacheEvent[type]) { //判断每一个原生对象是否有type类型的绑定事件 this[i].cacheEvent[type] = [handle]; //没有则为该类型事件添加处理函数数组 } else { this[i].cacheEvent[type].push(handle); //若已经有该类型事件，则直接放入数组 } } }; //为jQuery的原型添加trigger属性，所有实例可以使用该属性 jQuery.prototype.trigger = function (type) { var self = this; //将调用trigger函数的jQuery对象存放在self中 var params = arguments.length > 1 ? [].slice.call(arguments, 1) : []; //判断调用trigger()函数时是否传入除了type以外的其他参数 for (var i = 0; i < this.length; i++) { //循环遍历this if (this[i].cacheEvent[type]) { //判断每个原生dom对象中是否存放有type类型的事件 this[i].cacheEvent[type].forEach(function (ele, index) { //有多个相同类型的事件时，要全部依次执行 ele.apply(self, params); //通过self调用事件，并且把参数传入 }); } } }; //为jQuery的原型添加queue属性，所有实例可以使用该属性 jQuery.prototype.queue = function (type, handle) { var queueObj = this; //jQuery对象 var queueName = arguments[0] || 'fx'; //第一个形参，为队列名称 var addFunc = arguments[1] || null; //第二个形参，是处理函数 var len = arguments.length; //获取形参个数 //若只传了一个参数type，则直接返回队列数组 if (len == 1) { return queueObj[0][queueName]; } //取出jQuery中的dom对象，为dom对象添加队列事件 queueObj[0][queueName] == undefined ? (queueObj[0][queueName] = [addFunc]) : (queueObj[0][queueName].push(addFunc)); return this; }; //为jQuery的原型添加dequeue属性，所有实例可以使用该属性 jQuery.prototype.dequeue = function (type) { var self = this; var queueName = arguments[0] || 'fx'; var queueArr = this.queue(queueName); var currFunc = queueArr.shift(); if (currFunc == undefined) { return; } var next = function () { self.dequeue(queueName); } currFunc(next); return this; }; //为jQuery添加Callbacks属性，jQuery可以使用该属性 jQuery.Callbacks = function () { // 'once' 'memory' 'once memory' null var options = arguments[0] || ''; // 存储参数 //存储add来加入的方法 var list = []; var fireIndex = 0; //记录当前要执行函数的索引 var fired = false; //记录方法是否被fire过 var args = []; //实际参数列表 var fire = function () { for (; fireIndex < list.length; fireIndex++) { list[fireIndex].apply(window, args) } if (options.indexOf('once') != -1) { list = []; fireIndex = 0; } } return { add: function (func) { list.push(func); if (options.indexOf('memory') != -1 && fired) { //参数是'memory' && 已经执行过fired fire(); //接着执行后面add的函数 } return this; }, fire: function () { fireIndex = 0; fired = true; // args = arguments; fire(); } } }; //为jQuery添加Deferred属性，jQuery可以使用该属性 jQuery.Deferred = function () { //是使用3个$.Callbacks()实现的 // done resolve; fail reject; progress notify; var arrCallbacks = [ [ jQuery.Callbacks('once memory'), 'done', 'resolve' ], [ jQuery.Callbacks('once memory'), 'fail', 'reject' ], [ jQuery.Callbacks('memory'), 'progress', 'notify' ] ]; var pendding = true;//触发函数是否执行 var deferred = {}; for (var i = 0; i < arrCallbacks.length; i++) { //注册 //deferred['done'] = function(){} //deferred['fail'] = function(){} //deferred['progress'] = function(){} deferred[arrCallbacks[i][1]] = (function (index) { return function (func) { arrCallbacks[index][0].add(func); } })(i); //触发 //deferred['resolve'] = function(){} //deferred['reject'] = function(){} //deferred['notify'] = function(){} deferred[arrCallbacks[i][2]] = (function (index) { return function () { var args = arguments; if (pendding) { arrCallbacks[index][0].fire.apply(window, args); arrCallbacks[index][2] == 'resolve' || arrCallbacks[index][2] == 'reject' ? pendding = false : ''; } } })(i); } return deferred; }; //上面的jQuery构造函数是new 一个jQuery.prototype.init对象， //jQuery.prototype.init对象上没有jQuery.prototype上的css()方法 //所以添加下面一句，让jQuery.prototype.init对象可以调用jQuery.prototype上的css()方法 jQuery.prototype.init.prototype = jQuery.prototype; //让外部可以通过$()或者jQuery()调用 window.$ = window.jQuery = jQuery; }());
调用$.Deferred()方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src='./myJquery.js'></script> <script> function createScore () { var df = $.Deferred(); setInterval(function () { var score = Math.random() * 100; if (score > 66) { df.resolve('congradulation!!!'); }else if (score < 33) { df.reject('get out'); }else { df.notify('go on'); } }, 1500); // done fail progress return df; } var df = createScore(); // 注册成功的回调函数 df.done(function (ms) { console.log('oh yeah I do it' + ' ' + ms); }); // 注册失败的回调函数 df.fail(function (ms) { console.log('sorry I am loser' + ' ' + ms); }); // 注册进行时的函数 df.progress(function (ms) { console.log('waiting...' + ' ' + ms); }); </script> </body> </html>
结果展示：
# jQuery工具方法$.when()
- $.when()
```js
//参数可以是一个或多个延迟对象
//返回值是df.promise()对象
$.when(df1, df2, df3).then(function(){//当3个都成功
console.log('done');
}, function(){//当有一个失败
console.log('fail');
});
```
