jQuery的类数组对象结构(转)

原文:http://www.imooc.com/code/3248

为什么是类数组对象呢?

很多人迷惑的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")构建的对象结构如下所示:


                   
整个结构很明了,通过对象键值对的关系保存着属性,原型保存着方法。我们来简单的模拟一个这样的数据结构:见下面的代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
<style type="text/css">
    div{
        width: 30px;
        height: 10px;
        float:left;
    }
</style>
<title>无标题文档</title>
</head>
<body>

<button id="test1">jQuey[0]</button>
<button id="test2">jQuey.get</button>
<button id="test3">aQuery[0]</button>
<button id="test4">aQuery.get</button>

<p id="book">book</p>

<div id="show1"></div>
<div id="show2"></div>
<div id="show3"></div>
<div id="show4"></div>

<script type="text/javascript">

var aQuery = function(selector) {
    //强制为对象
    if (!(this instanceof aQuery)) {
        return new aQuery(selector);
    }
    var elem = document.getElementById(/[^#].*/.exec(selector)[0]);
    this.length = 1;
    this[0] = elem;
    this.context = document;
    this.selector = selector;
    this.get = function(num) {
        return this[num];
    }
    return this;
}

//结果是一个dom元素,可以把代码放到Google Chrome下运行
//按F12通过调试命令 console.log() 打印出对象
$("#test1").click(function() {
    $(‘#show1‘).append($(‘#book‘)[0])
})

$("#test2").click(function() {
    $(‘#show2‘).append($(‘#book‘).get(0))
})

$("#test3").click(function() {
    $(‘#show3‘).append(aQuery("#book")[0])
})

$("#test4").click(function() {
    $(‘#show4‘).append(aQuery("#book").get(0))
})

</script>

</body>
</html>

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

jQuery的无new构建原理

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

时间: 2024-10-25 19:25:06

jQuery的类数组对象结构(转)的相关文章

[Effective JavaScript 笔记]第58条:区分数组对象和类数组对象

示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bits.bitAt(4);//1 bits.bitAt(8);//1 bits.bitAt(9);//0 enable方法被重载了,可以传入一个索引或索引的数组.第二个类的API是字符串集合:无序的字符串集合 var set=new StringSet(); set.add('Hamlet'); se

JavaScript中的类数组对象

在javascript中,对象与数组都是这门语言的原生规范中的基本数据类型,处于并列的位置. 一般来说,如果我们有一个对象obj和一个数组a: obj["attr1"];    //取obj对象的attr1属性 a[1];   //取数组a中的第二个元素 但是,有些时候,也会将一个对象“伪装”成一个数组来用,我们把这种对象称为“类数组对象”,再此我们可以給它下一个定义,请看如下的代码: var a= {}; var i = 0; for(i=0; i<10 ; i++){ a[i

将类数组对象(array-like object)转化为数组对象(Array object)

用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b",2:"c", length:3}; // 转化 var arr = Array.prototype.slice.call(alo); console.log( Array.isArray(alo) // false ) console.log( Array.isArray(ar

JS中集合对象(Array、Map、Set)及类数组对象的使用与对比

原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型,Array,Map,Set都属于iterable类型,它们可以使用for...of循环来遍历,都内置forEach方法. 数组 遍历 普通遍历 最简单的一种,也是使用频率最高的一种. let arr = ['a', 'b', 'c', 'd', 'e'] for (let i = 0; i < ar

Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。

详解:https://www.cnblogs.com/jf-67/p/8440758.html Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组. 1. let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4 } let arr = Array.from(arrayLike) console.log(arr) // ['tom','65','男',['

js中的节点遍历+类数组对象

firstChild  第一个子元素 lastChild  最后一个子元素 childNodes[n]  =   childNodes.item(n)    第n+1个子元素 parentNode  父元素 nextSibling  下一个兄弟元素 previousSibling  上一个兄弟元素 document.documentElement 获取文档的根节点 .tagName 标签名 <!DOCTYPE html> <html lang="en"> <

arguments类数组对象

------------   ECMAScript中的所有参数传递的都是值,不可能通过引用传递参数. --------------------------JS函数没有真正意义上的重载. 在函数内部有两个特殊的对象 : arguments和this. 当函数被调用时,传入的参数将保存在arguments类数组对象中,通过arguments可以访问所有该函数被调用时传递给它的参数列表. arguments并不是一个真正的数组,而是一个“类似数组(array-like)”的对象,因为arguments

观V8源码中的array.js,解析 Array.prototype.slice为什么能将类数组对象转为真正的数组?

在官方的解释中,如[mdn] The slice() method returns a shallow copy of a portion of an array into a new array object. 简单的说就是根据参数,返回数组的一部分的copy.所以了解其内部实现才能确定它是如何工作的.所以查看V8源码中的Array.js     可以看到如下的代码: 一.方法  ArraySlice,源码地址,直接添加到Array.prototype上的"入口",内部经过参数.类型

类数组对象

JavaScript中有一些看起来像却又不是数组的对象,我们称之为类数组. 定义 类数组对象具有两个特性: 1)具有:具有index和length属性: 2)不具有:不具有数组的操作方法,比如push,shift等. js中有两个最典型的类数组对象:arguments和HTMLCollection集合(即通过getElementByTagName这类方法获得的集合).以下以arguments为例,讲解类数组对象的一些用法. 常见用法 [index和length] index和length用法很简