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

  .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 })()

Tags: Python JQuery

Posted on Mon, 04 Nov 2019 14:27:04 -0500 by Nightslyr