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

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

在这里插入图片描述

  1. (function () {
  2. function jQuery(selector) {
  3. return new jQuery.prototype.init(selector); // init的原型链上有css的方法
  4. }
  5. jQuery.prototype.init = function (selector) {
  6. // var this = {}
  7. // 选出 dom 标签 并且包装成jQuery对象 返回
  8. // id class
  9. this.length = 0;
  10. // null undefined
  11. if (selector == null) {
  12. return this;
  13. }
  14. if (typeof selector == 'string' && selector.indexOf('.') != -1) {
  15. var dom = document.getElementsByClassName(selector.slice(1));
  16. } else if (typeof selector == 'string' && selector.indexOf('#') != -1) {
  17. var dom = document.getElementById(selector.slice(1));
  18. }
  19. if (selector instanceof Element || dom.length == undefined) {
  20. // 只有一个dom
  21. this[0] = dom || selector;
  22. this.length++;
  23. } else {
  24. // 你有很多个dom Elements
  25. // 循环dom
  26. for (var i = 0; i < dom.length; i++) {
  27. this[i] = dom[i] || selector[i];
  28. this.length++;
  29. }
  30. }
  31. // return this;
  32. }
  33. jQuery.prototype.css = function (config) {
  34. // 循环操作每一个dom
  35. for (var i = 0; i < this.length; i++) {
  36. for (var attr in config) {
  37. this[i].style[attr] = config[attr]; // 这里如果加了px那么就只能修改像素值了 对于颜色透明度就会使其失效
  38. }
  39. }
  40. return this; // 链式操作的精髓 又返回了一个函数本身
  41. }
  42. jQuery.prototype.pushStack = function (dom) {
  43. // dom newObject
  44. if (dom.constructor != jQuery) {
  45. dom = jQuery(dom);
  46. }
  47. dom.prevObject = this;
  48. return dom;
  49. }
  50. jQuery.prototype.get = function (num) {
  51. return num == null ? [].slice.call(this, 0) : num >= 0 ? this[num] : this[num + this.length];
  52. }
  53. jQuery.prototype.eq = function (num) {
  54. var dom = num == null ? null : num >= 0 ? this[num] : this[num + this.length];
  55. return this.pushStack(dom);
  56. }
  57. jQuery.prototype.add = function (selector) {
  58. var curObj = jQuery(selector);
  59. var baseObj = this;
  60. var newObject = jQuery();
  61. for (var i = 0; i < curObj.length; i++) {
  62. newObject[newObject.length++] = curObj[i];
  63. }
  64. for (var i = 0; i < baseObj.length; i++) {
  65. newObject[newObject.length++] = baseObj[i];
  66. }
  67. // newObject.prevObject = this;
  68. this.pushStack(newObject);
  69. return newObject;
  70. }
  71. jQuery.prototype.end = function () {
  72. return this.prevObject;
  73. }
  74. jQuery.prototype.myOn = function (type, handle) {
  75. for (var i = 0; i < this.length; i++) {
  76. if (!this[i].cacheEvent) {
  77. this[i].cacheEvent = {
  78. };
  79. }
  80. if (!this[i].cacheEvent[type]) {
  81. this[i].cacheEvent[type] = [handle];
  82. } else {
  83. this[i].cacheEvent[type].push(handle);
  84. }
  85. }
  86. }
  87. jQuery.prototype.myTrigger = function (type) {
  88. var self = this;
  89. var params = arguments.length > 1 ? [].slice.call(arguments, 1) : [];
  90. for (var i = 0; i < this.length; i++) {
  91. if (this[i].cacheEvent[type]) {
  92. this[i].cacheEvent[type].forEach(function (ele, index) {
  93. ele.apply(self, params)
  94. });
  95. }
  96. }
  97. }
  98. // 创建队列
  99. jQuery.prototype.myQueue = function () {
  100. var queueObj = this;
  101. var queueName = arguments[0] || 'fx'; // 默认队列名称为'fx'
  102. var addFunc = arguments[1] || null;
  103. var len = arguments.length;
  104. // 获取队列
  105. if (len == 1) {
  106. return queueObj[0][queueName];
  107. }
  108. // queue dom {chain :} 添加队列 往已有队列push内容
  109. queueObj[0][queueName] == undefined ? queueObj[0][queueName] = [addFunc] : queueObj[0][queueName].push(addFunc);
  110. return this;
  111. }
  112. jQuery.prototype.myDelay = function (duration) {
  113. var queueArr = this[0]['fx'];
  114. queueArr.push(function (next) {
  115. setTimeout(function () {
  116. next();
  117. }, duration);
  118. })
  119. return this;
  120. }
  121. jQuery.prototype.myDequeue = function () {
  122. var self = this;
  123. var queueName = arguments[0] || 'fx';
  124. var queueArr = this.myQueue(queueName);
  125. var currFunc = queueArr.shift(); // 去掉数组第一个
  126. if (currFunc == undefined) {
  127. return;
  128. }
  129. var next = function () {
  130. self.myDequeue(queueName); // 拿第一个执行 再调用第一个
  131. // 防止链式调用时 丢失this 把this保存起来一直执行
  132. }
  133. currFunc(next);
  134. return this;
  135. }
  136. // json 是目标对象
  137. jQuery.prototype.myAnimate = function (json, callBack) {
  138. var len = this.length;
  139. var self = this;
  140. var baseFunc = function (next) {
  141. var times = 0;
  142. for (var i = 0; i < len; i++) {
  143. stratMove(self[i], json, function () {
  144. times++;
  145. if (times == len) {
  146. callBack && callBack();
  147. next();
  148. }
  149. });
  150. }
  151. }
  152. this.myQueue('fx', baseFunc);
  153. // 出队操作
  154. if (this.myQueue('fx').length == 1) {
  155. this.myDequeue('fx'); // 立马执行
  156. }
  157. function getStyle(dom, atter) {
  158. if (window.getComputedStyle) {
  159. return window.getComputedStyle(dom, null)[atter];
  160. } else {
  161. return dom.getComputedStyle[atter];
  162. }
  163. }
  164. function stratMove(dom, attrObj, callBack) {
  165. clearInterval(dom.timer);
  166. var isSpeed = null,
  167. iCur = null;
  168. dom.timer = setInterval(() => {
  169. var bStop = true;
  170. for (var attr in attrObj) {
  171. if (attr == 'opacity') {
  172. iCur = parseFloat(getStyle(dom, attr)) * 100;
  173. } else {
  174. iCur = parseInt(getStyle(dom, attr));
  175. }
  176. isSpeed = (attrObj[attr] - iCur) / 7;
  177. isSpeed = isSpeed > 0 ? Math.ceil(isSpeed) : Math.floor(isSpeed);
  178. if (attr == 'opacity') {
  179. dom.style.opacity = (iCur + isSpeed) / 100;
  180. } else {
  181. dom.style[attr] = iCur + isSpeed + 'px';
  182. }
  183. if (iCur != attrObj[attr]) {
  184. bStop = false;
  185. }
  186. }
  187. if (bStop) {
  188. clearInterval(dom.timer);
  189. console.log('over');
  190. typeof callBack == 'function' && callBack();
  191. }
  192. }, 30);
  193. }
  194. return this;
  195. }
  196. jQuery.myCallbacks = function () {
  197. // once memory null
  198. // 存储参数
  199. var opticons = arguments[0] || '';
  200. // 通过add来加入方法
  201. var list = [];
  202. // 记录当期要执行函数的索引
  203. var fireIndex = 0;
  204. // 实参列表
  205. var args = [];
  206. // 证明有没有fire过
  207. var fierd = false;
  208. var fire1 = function () {
  209. for (; fireIndex < list.length; fireIndex++) {
  210. list[fireIndex].apply(window, args);
  211. }
  212. if (opticons.indexOf('once') != -1) {
  213. list = [];
  214. fireIndex = 0;
  215. }
  216. }
  217. return {
  218. add: function (func) {
  219. list.push(func);
  220. if (opticons.indexOf('memory') != -1 && fierd) {
  221. fire1();
  222. }
  223. return this;
  224. },
  225. fire: function () {
  226. fireIndex = 0;
  227. args = arguments;
  228. fierd = true;
  229. fire1();
  230. }
  231. }
  232. }
  233. jQuery.myDeferred = function () {
  234. // callback 实现的
  235. // 3 个callback done resolve fail reject progress notify
  236. var arr = [
  237. [
  238. jQuery.myCallbacks('oncememory'), 'done', 'resolve'
  239. ],
  240. [
  241. jQuery.myCallbacks('oncememory'), 'fail', 'reject'
  242. ],
  243. [
  244. jQuery.myCallbacks('memory'), 'progress', 'notify'
  245. ]
  246. ];
  247. var pendding = true;
  248. var deferred = {
  249. };
  250. for(var i = 0; i < arr.length;i ++){
  251. // arr[0]
  252. // 注册
  253. deferred[arr[i][1]] = (function(index){
  254. return function(func){
  255. arr[index][0].add(func);
  256. }
  257. })(i)
  258. // 触发
  259. deferred[arr[i][2]] = (function(index){
  260. return function(){
  261. var args = arguments;
  262. if(pendding){
  263. arr[index][0].fire.apply(window,args);
  264. arr[index][2] == 'resolve' || arr[index][2] == 'reject' ? pendding = false : '';
  265. }
  266. }
  267. })(i);
  268. }
  269. return deferred;
  270. }
  271. jQuery.prototype.init.prototype = jQuery.prototype; // init的原型链上有css的方法
  272. window.$ = window.jQuery = jQuery; // 内部jQuery的函数被保存到了window上所有没有被释放 就是闭包
  273. })();

发表评论

表情:
评论列表 (有 0 条评论,33人围观)

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

相关阅读