您的位置：首页 > Web前端 > JQuery

jQuery源码学习之类数组对象结构 ---- day3

2015-09-20 20:33 661 查看

1. 类数组对象

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

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

1. jQuery({selector,[content]})
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对象了。

2. jQuery对象可用数组下标索引原理

    jQuery是通过对象键值对的关系保存着属性，原型保存着方法。下面的例子简单模拟了这样的一种数据结构：

<!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方法抽象出了对象创建过程，这也是软件工程领域广为人知的设计模式--工厂方法。
3. jQuery的无new构建原理

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML jquery 源码数组类数组结构

相关文章推荐

新的分享

章节导航

jQuery源码学习 之 类数组对象结构 ---- day3

jQuery源码学习之类数组对象结构 ---- day3