jQuery Chapter 5 example method details built-in queue() dequeue() method

.queue() .dequeue() .clearQueue() -------------------------------------------------------------------------- .queue() Put things in the queue Paramet...

.queue() .dequeue() .clearQueue()

--------------------------------------------------------------------------

.queue()

Put things in the queue

Parameters:. queue([queueName], fuc(next))

queueName: queue name, string form, default is fx

fuc(next): a transitive function, a series of values such as. He'll put your values in the array (next) if you pass the parameter next to a function, you can execute next() in the function and use the method. See the following example

. queue(queueName): only queueName is passed, which is equivalent to reading the array with queue name

.dequeue()

Execution queue.

Parameters: queueName find the array with queue name, execute them one at a time

.dequeue(queueName)

You'll find that it's a hassle to take one at a time. You can use next to help you execute the next function

.clearQueue()

Clear queue

Parameter, enter the queue name you want to empty

Let's look at the principle of queue() and dequeue. See myqueue method in line 98 and mydequeue method in line 111

1 (function(){ 2 function jQuery(selector){ 3 return new jQuery.prototype.init(selector); 4 } 5 jQuery.prototype.init = function (selector) { 6 this.length = 0; 7 if (selector == null) { 8 return this; 9 } 10 if(typeof selector == 'string' && selector.indexOf('.') != -1 ){ 11 var dom = document.getElementsByClassName(selector.slice(1)); 12 }else if(typeof selector == 'string' && selector.indexOf('#') != -1 ){ 13 var dom = document.getElementById( selector.slice(1) ); 14 }else if(typeof selector == 'string'){ 15 var dom = document.getElementsByTagName(selector); 16 } 17 18 19 if(selector instanceof Element || dom.length == undefined ){ 20 this[0] = dom || selector; 21 this.length ++; 22 }else{ 23 for( var i = 0; i < dom.length; i++ ){ 24 this[i] = dom[i]; 25 } 26 this.length = dom.length; 27 } 28 } 29 jQuery.prototype.pushStack = function (dom) { 30 if (dom.constructor != jQuery) { 31 dom = jQuery(dom); 32 } 33 dom.prevObj = this; 34 return dom; 35 } 36 jQuery.prototype.css = function(config){ 37 for(var i = 0; i < this.length; i++){ 38 for(var prop in config){ 39 this[i].style[prop] = config[prop]; 40 } 41 } 42 return this; 43 } 44 45 jQuery.prototype.get = function(num) { 46 return num == null ? [].slice.call(this, 0) : (num < 0 ? this[num + this.length] : this[num]); 47 } 48 49 jQuery.prototype.eq = function (num) { 50 var dom = num == null ? null : (num < 0 ? this[num + this.length] : this[num]); 51 return this.pushStack(dom); 52 } 53 54 jQuery.prototype.add = function (selector) { 55 var baseObj = this; 56 var curObj = jQuery(selector); 57 var newObj = jQuery(); 58 59 for (var i = 0; i < baseObj.length; i++) { 60 newObj[newObj.length++] = baseObj[i]; 61 } 62 for (var i = 0; i < curObj.length; i++) { 63 newObj[newObj.length++] = curObj[i]; 64 } 65 66 return this.pushStack(newObj); 67 } 68 69 jQuery.prototype.end = function () { 70 return this.prevObj; 71 } 72 73 jQuery.prototype.myOn = function(type, func){ 74 for(var i = 0; i < this.length; i ++){ 75 if(!this[i].cacheEvent){ 76 this[i].cacheEvent = {} 77 } 78 if(!this[i].cacheEvent[type]){ 79 this[i].cacheEvent[type] = [func]; 80 }else{ 81 this[i].cacheEvent[type].push(func); 82 } 83 } 84 } 85 86 jQuery.prototype.myTrigger = function(type){ 87 var params = arguments.length > 1 ? [].slice.call(arguments, 1) : []; 88 var self = this; 89 for(var i = 0; i < this.length; i ++){ 90 if(this[i].cacheEvent[type]){ 91 this[i].cacheEvent[type].forEach(function(ele, index){ 92 ele.apply(self, params); 93 }) 94 } 95 } 96 } 97 98 jQuery.prototype.myqueue = function(){ 99 var myqueueName = arguments[0] || 'fx'; //See if he passes parameters. If he does, he can use them. If he doesn't, he can use them fx fx yes animate Of 100 var myqueueFun = arguments[1] || null; 101 102 if(arguments.length == 1){ //If a parameter is passed, you need to read it 103 return this[0][myqueueName]; 104 } 105 //If you pass the one above if Note that you have two parameters to add ↓ Adding queues to dom On the body 106 this[0][myqueueName] == undefined ? this[0][myqueueName] = myqueueFun : this[0][myqueueName].push(myqueueFun); 107 108 return this; 109 } 110 111 jQuery.prototype.mydequeue = function(type){ 112 var self = this; // There this For giving next Use because next It's done externally, this Pointing to window 113 var mydequeueName = type || 'fx'; 114 var myqueueArr = this.myqueue(mydequeueName); //Use myqueue Method, read the array, 115 var currFun = myqueueArr.shift(); // Cut the first one out of the array 116 117 if(currFun == undefined){ // Recursive exit 118 return; 119 } 120 var next = function(){ 121 self.mydequeue(mydequeueName); //If a function parameter has a pass next So recursion. 122 } 123 currFun(next); 124 125 return this; 126 } 127 128 jQuery.prototype.init.prototype = jQuery.prototype; 129 130 window.$ = window.jQuery = jQuery; 131 })()

4 November 2019, 14:27 | Views: 5173

Add new comment

For adding a comment, please log in
or create account

0 comments