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

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

在这里插入图片描述

  1. (function () {
  3.     function jQuery(selector) {
  5.         return new jQuery.prototype.init(selector); // init的原型链上有css的方法
  6.     }
  7.     jQuery.prototype.init = function (selector) {
  9.         // var this = {}
  10.         // 选出 dom 标签 并且包装成jQuery对象 返回
  11.         // id class
  12.         this.length = 0;
  13.         // null undefined
  14.         if (selector == null) {
  16.             return this;
  17.         }
  18.         if (typeof selector == 'string' && selector.indexOf('.') != -1) {
  20.             var dom = document.getElementsByClassName(selector.slice(1));
  21.         } else if (typeof selector == 'string' && selector.indexOf('#') != -1) {
  23.             var dom = document.getElementById(selector.slice(1));
  24.         }
  25.         if (selector instanceof Element || dom.length == undefined) {
  26.      // 只有一个dom
  27.             this[0] = dom || selector;
  28.             this.length++;
  29.         } else {
  30.      // 你有很多个dom Elements
  31.             // 循环dom
  32.             for (var i = 0; i < dom.length; i++) {
  34.                 this[i] = dom[i] || selector[i];
  35.                 this.length++;
  36.             }
  37.         }
  38.         // return this;
  39.     }
  41.     jQuery.prototype.css = function (config) {
  43.         // 循环操作每一个dom
  44.         for (var i = 0; i < this.length; i++) {
  46.             for (var attr in config) {
  48.                 this[i].style[attr] = config[attr]; // 这里如果加了px那么就只能修改像素值了 对于颜色透明度就会使其失效
  49.             }
  50.         }
  51.         return this; // 链式操作的精髓 又返回了一个函数本身
  52.     }
  54.     jQuery.prototype.pushStack = function (dom) {
  56.         // dom newObject
  57.         if (dom.constructor != jQuery) {
  59.             dom = jQuery(dom);
  60.         }
  61.         dom.prevObject = this;
  62.         return dom;
  63.     }
  65.     jQuery.prototype.get = function (num) {
  67.         return num == null ? [].slice.call(this, 0) : num >= 0 ? this[num] : this[num + this.length];
  68.     }
  70.     jQuery.prototype.eq = function (num) {
  72.         var dom = num == null ? null : num >= 0 ? this[num] : this[num + this.length];
  73.         return this.pushStack(dom);
  74.     }
  76.     jQuery.prototype.add = function (selector) {
  78.         var curObj = jQuery(selector);
  79.         var baseObj = this;
  80.         var newObject = jQuery();
  81.         for (var i = 0; i < curObj.length; i++) {
  83.             newObject[newObject.length++] = curObj[i];
  84.         }
  85.         for (var i = 0; i < baseObj.length; i++) {
  87.             newObject[newObject.length++] = baseObj[i];
  88.         }
  89.         //  newObject.prevObject = this;
  90.         this.pushStack(newObject);
  92.         return newObject;
  93.     }
  95.     jQuery.prototype.end = function () {
  97.         return this.prevObject;
  98.     }
  99.     jQuery.prototype.myOn = function (type, handle) {
  101.         for (var i = 0; i < this.length; i++) {
  103.             if (!this[i].cacheEvent) {
  105.                 this[i].cacheEvent = {
  106.     };
  107.             }
  108.             if (!this[i].cacheEvent[type]) {
  110.                 this[i].cacheEvent[type] = [handle];
  111.             } else {
  113.                 this[i].cacheEvent[type].push(handle);
  114.             }
  115.         }
  116.     }
  118.     jQuery.prototype.myTrigger = function (type) {
  120.         var self = this;
  121.         var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
  122.         for (var i = 0; i < this.length; i++) {
  124.             if (this[i].cacheEvent[type]) {
  126.                 this[i].cacheEvent[type].forEach(function (ele, index) {
  128.                     ele.apply(self, params)
  129.                 });
  130.             }
  131.         }
  132.     }
  134.     // 创建队列
  135.     jQuery.prototype.myQueue = function () {
  137.         var queueObj = this;
  138.         var queueName = arguments[0] || 'fx'; // 默认队列名称为'fx'
  139.         var addFunc = arguments[1] || null;
  140.         var len = arguments.length;
  141.         // 获取队列
  142.         if (len == 1) {
  144.             return queueObj[0][queueName];
  145.         }
  146.         // queue dom {chain :} 添加队列 往已有队列push内容
  147.         queueObj[0][queueName] == undefined ? queueObj[0][queueName] = [addFunc] : queueObj[0][queueName].push(addFunc);
  148.         return this;
  149.     }
  151.     jQuery.prototype.myDelay = function (duration) {
  153.         var queueArr = this[0]['fx'];
  154.         queueArr.push(function (next) {
  156.             setTimeout(function () {
  158.                 next();
  159.             }, duration);
  160.         })
  161.         return this;
  162.     }
  164.     jQuery.prototype.myDequeue = function () {
  166.         var self = this;
  167.         var queueName = arguments[0] || 'fx';
  168.         var queueArr = this.myQueue(queueName);
  169.         var currFunc = queueArr.shift(); // 去掉数组第一个
  170.         if (currFunc == undefined) {
  172.             return;
  173.         }
  174.         var next = function () {
  176.             self.myDequeue(queueName); // 拿第一个执行 再调用第一个
  177.             // 防止链式调用时 丢失this 把this保存起来一直执行
  178.         }
  179.         currFunc(next);
  180.         return this;
  181.     }
  183.     // json 是目标对象
  184.     jQuery.prototype.myAnimate = function (json, callBack) {
  186.         var len = this.length;
  187.         var self = this;
  188.         var baseFunc = function (next) {
  190.             var times = 0;
  191.             for (var i = 0; i < len; i++) {
  193.                 stratMove(self[i], json, function () {
  195.                     times++;
  196.                     if (times == len) {
  198.                         callBack && callBack();
  199.                         next();
  200.                     }
  201.                 });
  202.             }
  203.         }
  204.         this.myQueue('fx', baseFunc);
  205.         // 出队操作
  206.         if (this.myQueue('fx').length == 1) {
  208.             this.myDequeue('fx'); // 立马执行
  209.         }
  211.         function getStyle(dom, atter) {
  213.             if (window.getComputedStyle) {
  215.                 return window.getComputedStyle(dom, null)[atter];
  216.             } else {
  218.                 return dom.getComputedStyle[atter];
  219.             }
  220.         }
  222.         function stratMove(dom, attrObj, callBack) {
  224.             clearInterval(dom.timer);
  225.             var isSpeed = null,
  226.                 iCur = null;
  227.             dom.timer = setInterval(() => {
  229.                 var bStop = true;
  230.                 for (var attr in attrObj) {
  232.                     if (attr == 'opacity') {
  234.                         iCur = parseFloat(getStyle(dom, attr)) * 100;
  235.                     } else {
  237.                         iCur = parseInt(getStyle(dom, attr));
  238.                     }
  239.                     isSpeed = (attrObj[attr] - iCur) / 7;
  240.                     isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
  241.                     if (attr == 'opacity') {
  243.                         dom.style.opacity = (iCur + isSpeed) / 100;
  244.                     } else {
  246.                         dom.style[attr] = iCur + isSpeed + 'px';
  247.                     }
  248.                     if (iCur != attrObj[attr]) {
  250.                         bStop = false;
  251.                     }
  252.                 }
  253.                 if (bStop) {
  255.                     clearInterval(dom.timer);
  256.                     console.log('over');
  257.                     typeof callBack == 'function' && callBack();
  258.                 }
  260.             }, 30);
  262.         }
  263.         return this;
  264.     }
  266.     jQuery.myCallbacks = function () {
  268.         // once memory null
  269.         // 存储参数
  270.         var opticons = arguments[0] || '';
  271.         // 通过add来加入方法
  272.         var list = [];
  273.         // 记录当期要执行函数的索引
  274.         var fireIndex = 0;
  276.         // 实参列表
  277.         var args = [];
  279.         //  证明有没有fire过
  280.         var fierd = false;
  282.         var fire1 = function () {
  284.             for (; fireIndex < list.length; fireIndex++) {
  286.                 list[fireIndex].apply(window, args);
  287.             }
  288.             if (opticons.indexOf('once') != -1) {
  290.                 list = [];
  291.                 fireIndex = 0;
  292.             }
  293.         }
  294.         return {
  296.             add: function (func) {
  298.                 list.push(func);
  299.                 if (opticons.indexOf('memory') != -1 && fierd) {
  301.                     fire1();
  302.                 }
  303.                 return this;
  304.             },
  305.             fire: function () {
  307.                 fireIndex = 0;
  308.                 args = arguments;
  309.                 fierd = true;
  310.                 fire1();
  311.             }
  312.         }
  313.     }
  315.     jQuery.myDeferred = function () {
  317.         // callback 实现的
  318.         // 3 个callback done resolve fail reject progress notify
  319.         var arr = [
  320.             [
  321.                 jQuery.myCallbacks('oncememory'), 'done', 'resolve'
  322.             ],
  323.             [
  324.                 jQuery.myCallbacks('oncememory'), 'fail', 'reject'
  325.             ],
  326.             [
  327.                 jQuery.myCallbacks('memory'), 'progress', 'notify'
  328.             ]
  329.         ];
  330.         var pendding = true;
  331.         var deferred = {
  332.     };
  333.         for(var i = 0; i < arr.length;i ++){
  335.             // arr[0]
  336.             // 注册
  337.             deferred[arr[i][1]] =  (function(index){
  339.                 return function(func){
  341.                     arr[index][0].add(func);
  342.                 }
  343.             })(i)
  344.             // 触发
  345.             deferred[arr[i][2]] = (function(index){
  347.                 return function(){
  349.                     var args = arguments;
  350.                     if(pendding){
  352.                         arr[index][0].fire.apply(window,args);
  353.                         arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? pendding = false : '';
  354.                     }   
  355.                 }
  356.             })(i);
  357.         }
  359.         return deferred;
  361.     }
  364.     jQuery.prototype.init.prototype = jQuery.prototype; // init的原型链上有css的方法
  365.     window.$ = window.jQuery = jQuery; // 内部jQuery的函数被保存到了window上所有没有被释放 就是闭包
  366. })();

发表评论

表情：
评论列表 （有 0 条评论，33人围观）

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

相关阅读