1-6 jQuery的类数组对象结构
本节编程练习不计算学习进度，请电脑登录imooc.com操作

jQuery的类数组对象结构

为什么是类数组对象呢？

很多人迷惑的jQuery为什么能像数组一样操作，通过对象get方法或者直接通过下标0索引就能转成DOM对象。

首先我们看jQuery的入口都是统一的$, 通过传递参数的不同，实现了9种方法的重载：

1. jQuery([selector,[context]])
2. jQuery(element)
3. jQuery(elementArray)
4. jQuery(object)
5. jQuery(jQuery object)
6. jQuery(html,[ownerDocument])
7. jQuery(html,[attributes])
8. jQuery()
9. jQuery(callback)

9种用法整体来说可以分三大块：选择器、dom的处理、dom加载。
换句话说jQuery就是为了获取DOM、操作DOM而存在的！所以为了更方便这些操作，让节点与实例对象通过一个桥梁给关联起来，jQuery内部就采用了一种叫“类数组对象”的方式作为存储结构，所以我们即可以像对象一样处理jQuery操作，也能像数组一样可以使用push、pop、shift、unshift、sort、each、map等类数组的方法操作jQuery对象了。

jQuery对象可用数组下标索引是什么原理？

通过$(".Class")构建的对象结构如下所示：


                   
整个结构很明了，通过对象键值对的关系保存着属性，原型保存着方法。我们来简单的模拟一个这样的数据结构：（请查看右侧代码编辑器）

以上是模拟jQuery的对象结构，通过aQuery方法抽象出了对象创建的具体过程，这也是软件工程领域中的广为人知的设计模式-工厂方法。

jQuery的无new构建原理

函数aQuery()内部首先保证了必须是通过new操作符构建。这样就能保证当前构建的是一个带有this的实例对象，既然是对象我们可以把所有的属性与方法作为对象的key与value的方式给映射到this上，所以如上结构就可以模拟出jQuery的这样的操作了，即可通过索引取值，也可以链式方法取值，但是这样的结构是有很大的缺陷的，每次调用ajQuery方法等于是创建了一个新的实例，那么类似get方法就要在每一个实例上重新创建一遍，性能就大打折扣，所以jQuery在结构上的优化不仅仅只是我们看到的，除了实现类数组结构、方法的原型共享，而且还实现方法的静态与实例的共存，这是我们之后将会重点分析的。

任务

index.html 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
  6. <style type="text/css">
  7.     div{
  8. 		width: 30px;
  9. 		height: 10px;
  10. 		float:left;
  11. 	}
  12. </style>
  13. <title>无标题文档</title>
  14. </head>
  15. <body>
  16.  
  17. <button id="test1">jQuey[0]</button>
  18. <button id="test2">jQuey.get</button>
  19. <button id="test3">aQuery[0]</button>
  20. <button id="test4">aQuery.get</button>
  21.  
  22. <p id="book">book</p>
  23.  
  24. <div id="show1"></div>
  25. <div id="show2"></div>
  26. <div id="show3"></div>
  27. <div id="show4"></div>
  28.  
  29. <script type="text/javascript">
  30.  
  31. var aQuery = function(selector) {
  32.     //强制为对象
  33. 	if (!(this instanceof aQuery)) {
  34. 		return new aQuery(selector);
  35. 	}
  36. 	var elem = document.getElementById(/[^#].*/.exec(selector)[0]);
  37. 	this.length = 1;
  38. 	this[0] = elem;
  39. 	this.context = document;
  40. 	this.selector = selector;
  41. 	this.get = function(num) {
  42. 		return this[num];
  43. 	}
  44. 	return this;
  45. }
  46.  
  47. //结果是一个dom元素,可以把代码放到Google Chrome下运行
  48. //按F12通过调试命令 console.log() 打印出对象
  49. $("#test1").click(function() {
  50. 	$('#show1').append($('#book')[0])
  51. })
  52.  
  53. $("#test2").click(function() {	
  54. 	$('#show2').append($('#book').get(0))
  55. })
  56.  
  57. $("#test3").click(function() {
  58. 	$('#show3').append(aQuery("#book")[0])
  59. })
  60.  
  61. $("#test4").click(function() {
  62. 	$('#show4').append(aQuery("#book").get(0))
  63. })
  64.  
  65.  
  66. </script>
  67.  
  68. </body>
  69. </html>
下一节