JavaScript思维导图——Day 36（jQuery之工具方法之回调对象）

桃扇骨 2023-05-21 12:54 3阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]

(function () {
        
        function jQuery(selector) {
        
            return new jQuery.prototype.init(selector); // init的原型链上有css的方法
        }
        jQuery.prototype.init = function (selector) {
        
            // var this = {}
            // 选出 dom 标签 并且包装成jQuery对象 返回
            // id class
            this.length = 0;
            // null undefined
            if (selector == null) {
        
                return this;
            }
            if (typeof selector == 'string' && selector.indexOf('.') != -1) {
        
                var dom = document.getElementsByClassName(selector.slice(1));
            } else if (typeof selector == 'string' && selector.indexOf('#') != -1) {
        
                var dom = document.getElementById(selector.slice(1));
            }
            if (selector instanceof Element || dom.length == undefined) {
         // 只有一个dom
                this[0] = dom || selector;
                this.length++;
            } else {
         // 你有很多个dom Elements
                // 循环dom
                for (var i = 0; i < dom.length; i++) {
        
                    this[i] = dom[i] || selector[i];
                    this.length++;
                }
            }
            // return this;
        }
    
        jQuery.prototype.css = function (config) {
        
            // 循环操作每一个dom
            for (var i = 0; i < this.length; i++) {
        
                for (var attr in config) {
        
                    this[i].style[attr] = config[attr]; // 这里如果加了px那么就只能修改像素值了 对于颜色透明度就会使其失效
                }
            }
            return this; // 链式操作的精髓 又返回了一个函数本身
        }
    
        jQuery.prototype.pushStack = function (dom) {
        
            // dom newObject
            if (dom.constructor != jQuery) {
        
                dom = jQuery(dom);
            }
            dom.prevObject = this;
            return dom;
        }
    
        jQuery.prototype.get = function (num) {
        
            return num == null ? [].slice.call(this, 0) : num >= 0 ? this[num] : this[num + this.length];
        }
    
        jQuery.prototype.eq = function (num) {
        
            var dom = num == null ? null : num >= 0 ? this[num] : this[num + this.length];
            return this.pushStack(dom);
        }
    
        jQuery.prototype.add = function (selector) {
        
            var curObj = jQuery(selector);
            var baseObj = this;
            var newObject = jQuery();
            for (var i = 0; i < curObj.length; i++) {
        
                newObject[newObject.length++] = curObj[i];
            }
            for (var i = 0; i < baseObj.length; i++) {
        
                newObject[newObject.length++] = baseObj[i];
            }
            //  newObject.prevObject = this;
            this.pushStack(newObject);
    
            return newObject;
        }
    
        jQuery.prototype.end = function () {
        
            return this.prevObject;
        }
        jQuery.prototype.myOn = function (type, handle) {
        
            for (var i = 0; i < this.length; i++) {
        
                if (!this[i].cacheEvent) {
        
                    this[i].cacheEvent = {
        };
                }
                if (!this[i].cacheEvent[type]) {
        
                    this[i].cacheEvent[type] = [handle];
                } else {
        
                    this[i].cacheEvent[type].push(handle);
                }
            }
        }
    
        jQuery.prototype.myTrigger = function (type) {
        
            var self = this;
            var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
            for (var i = 0; i < this.length; i++) {
        
                if (this[i].cacheEvent[type]) {
        
                    this[i].cacheEvent[type].forEach(function (ele, index) {
        
                        ele.apply(self, params)
                    });
                }
            }
        }
    
        // 创建队列
        jQuery.prototype.myQueue = function () {
        
            var queueObj = this;
            var queueName = arguments[0] || 'fx'; // 默认队列名称为'fx'
            var addFunc = arguments[1] || null;
            var len = arguments.length;
            // 获取队列
            if (len == 1) {
        
                return queueObj[0][queueName];
            }
            // queue dom {chain :} 添加队列 往已有队列push内容
            queueObj[0][queueName] == undefined ? queueObj[0][queueName] = [addFunc] : queueObj[0][queueName].push(addFunc);
            return this;
        }
    
        jQuery.prototype.myDelay = function (duration) {
        
            var queueArr = this[0]['fx'];
            queueArr.push(function (next) {
        
                setTimeout(function () {
        
                    next();
                }, duration);
            })
            return this;
        }
    
        jQuery.prototype.myDequeue = function () {
        
            var self = this;
            var queueName = arguments[0] || 'fx';
            var queueArr = this.myQueue(queueName);
            var currFunc = queueArr.shift(); // 去掉数组第一个
            if (currFunc == undefined) {
        
                return;
            }
            var next = function () {
        
                self.myDequeue(queueName); // 拿第一个执行 再调用第一个
                // 防止链式调用时 丢失this 把this保存起来一直执行
            }
            currFunc(next);
            return this;
        }
    
        // json 是目标对象
        jQuery.prototype.myAnimate = function (json, callBack) {
        
            var len = this.length;
            var self = this;
            var baseFunc = function (next) {
        
                var times = 0;
                for (var i = 0; i < len; i++) {
        
                    stratMove(self[i], json, function () {
        
                        times++;
                        if (times == len) {
        
                            callBack && callBack();
                            next();
                        }
                    });
                }
            }
            this.myQueue('fx', baseFunc);
            // 出队操作
            if (this.myQueue('fx').length == 1) {
        
                this.myDequeue('fx'); // 立马执行
            }
    
            function getStyle(dom, atter) {
        
                if (window.getComputedStyle) {
        
                    return window.getComputedStyle(dom, null)[atter];
                } else {
        
                    return dom.getComputedStyle[atter];
                }
            }
    
            function stratMove(dom, attrObj, callBack) {
        
                clearInterval(dom.timer);
                var isSpeed = null,
                    iCur = null;
                dom.timer = setInterval(() => {
        
                    var bStop = true;
                    for (var attr in attrObj) {
        
                        if (attr == 'opacity') {
        
                            iCur = parseFloat(getStyle(dom, attr)) * 100;
                        } else {
        
                            iCur = parseInt(getStyle(dom, attr));
                        }
                        isSpeed = (attrObj[attr] - iCur) / 7;
                        isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
                        if (attr == 'opacity') {
        
                            dom.style.opacity = (iCur + isSpeed) / 100;
                        } else {
        
                            dom.style[attr] = iCur + isSpeed + 'px';
                        }
                        if (iCur != attrObj[attr]) {
        
                            bStop = false;
                        }
                    }
                    if (bStop) {
        
                        clearInterval(dom.timer);
                        console.log('over');
                        typeof callBack == 'function' && callBack();
                    }
    
                }, 30);
    
            }
            return this;
        }
    
        jQuery.myCallbacks = function () {
        
            // once memory null
            // 存储参数
            var opticons = arguments[0] || '';
            // 通过add来加入方法
            var list = [];
            // 记录当期要执行函数的索引
            var fireIndex = 0;
    
            // 实参列表
            var args = [];
    
            //  证明有没有fire过
            var fierd = false;
    
            var fire1 = function () {
        
                for (; fireIndex < list.length; fireIndex++) {
        
                    list[fireIndex].apply(window, args);
                }
                if (opticons.indexOf('once') != -1) {
        
                    list = [];
                    fireIndex = 0;
                }
            }
            return {
        
                add: function (func) {
        
                    list.push(func);
                    if (opticons.indexOf('memory') != -1 && fierd) {
        
                        fire1();
                    }
                    return this;
                },
                fire: function () {
        
                    fireIndex = 0;
                    args = arguments;
                    fierd = true;
                    fire1();
                }
            }
        }
    
        jQuery.myDeferred = function () {
        
            // callback 实现的
            // 3 个callback done resolve fail reject progress notify
            var arr = [
                [
                    jQuery.myCallbacks('oncememory'), 'done', 'resolve'
                ],
                [
                    jQuery.myCallbacks('oncememory'), 'fail', 'reject'
                ],
                [
                    jQuery.myCallbacks('memory'), 'progress', 'notify'
                ]
            ];
            var pendding = true;
            var deferred = {
        };
            for(var i = 0; i < arr.length;i ++){
        
                // arr[0]
                // 注册
                deferred[arr[i][1]] =  (function(index){
        
                    return function(func){
        
                        arr[index][0].add(func);
                    }
                })(i)
                // 触发
                deferred[arr[i][2]] = (function(index){
        
                    return function(){
        
                        var args = arguments;
                        if(pendding){
        
                            arr[index][0].fire.apply(window,args);
                            arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? pendding = false : '';
                        }   
                    }
                })(i);
            }
    
            return deferred;
    
        }
    
    
        jQuery.prototype.init.prototype = jQuery.prototype; // init的原型链上有css的方法
        window.$ = window.jQuery = jQuery; // 内部jQuery的函数被保存到了window上所有没有被释放 就是闭包
    })();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE3NDIwOA_size_16_color_FFFFFF_t_70]: /images/20230521/5c38710ca9414353830bc8e5ec2e5094.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python语法之面向对象思维导图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6

左手的ㄟ右手/ 2023年10月10日 11:41/ 0 赞/ 69 阅读

相关 JavaScript思维导图——Day 35（jQuery方法之extend和ajax）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+攻爆jí腚メ/ 2023年07月25日 09:17/ 0 赞/ 3 阅读

相关 JavaScript思维导图——Day 33（animate队列）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔情只为你懂/ 2023年07月24日 13:19/ 0 赞/ 9 阅读

相关 JavaScript思维导图——Day 11(数组)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+攻爆jí腚メ/ 2023年07月05日 11:49/ 0 赞/ 32 阅读

相关 JavaScript思维导图——Day 7（对象、包装类）

![在这里插入图片描述][20200209204007429.jpg] ![在这里插入图片描述][20200209204045839.jpg] <!DOCTYPE

我就是我/ 2023年07月04日 08:53/ 0 赞/ 30 阅读

相关 JavaScript思维导图——Day 4（预编译）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2023年07月03日 10:51/ 0 赞/ 28 阅读

相关 JavaScript思维导图——Day 36（jQuery之工具方法之回调对象）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

桃扇骨/ 2023年05月21日 12:54/ 0 赞/ 4 阅读

相关 Javascript之思维导图

1：javascript变量 ![70][] 2：javascript运算符　　 ![70 1][] 3：javascript数组　　 ![70 2][

Myth丶恋晨/ 2022年05月23日 12:13/ 0 赞/ 289 阅读

相关 JavaScript 内置对象思维导图

![在这里插入图片描述][20190907002333608.png] [20190907002333608.png]: /images/20210704/23675ed2

迈不过友情╰/ 2021年07月04日 22:59/ 0 赞/ 462 阅读

相关 jquery 思维导图

jquery思维导图 ![在这里插入图片描述][20200124182110655.png] jquery ajax 对jqury ajax的少许总结 ![在

我会带着你远行/ 2021年07月04日 18:33/ 0 赞/ 483 阅读