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方法抽象出了对象创建的具体过程,这也是软件工程领域中的广为人知的设计模式-工厂方法。
函数aQuery()内部首先保证了必须是通过new操作符构建。这样就能保证当前构建的是一个带有this的实例对象,既然是对象我们可以把所有的属性与方法作为对象的key与value的方式给映射到this上,所以如上结构就可以模拟出jQuery的这样的操作了,即可通过索引取值,也可以链式方法取值,但是这样的结构是有很大的缺陷的,每次调用ajQuery方法等于是创建了一个新的实例,那么类似get方法就要在每一个实例上重新创建一遍,性能就大打折扣,所以jQuery在结构上的优化不仅仅只是我们看到的,除了实现类数组结构、方法的原型共享,而且还实现方法的静态与实例的共存,这是我们之后将会重点分析的。
jQuery的类数组对象结构(转)的更多相关文章
- jQuery的类数组对象结构
Query就是为了获取DOM.操作DOM而存在的 所以为了更方便这些操作,让节点与实例对象通过一个桥梁给关联起来,jQuery内部就采用了一种叫"类数组对象"的方式作为存储结构,所 ...
- 如何在JavaScript中手动创建类数组对象
前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
- [Effective JavaScript 笔记]第58条:区分数组对象和类数组对象
示例 设想有两个不同类的API.第一个是位向量:有序的位集合 var bits=new BitVector(); bits.enable(4); bits.enable([1,3,8,17]); bi ...
- 将类数组对象(array-like object)转化为数组对象(Array object)
用法:Array.prototype.slice.call(array-like object) // 创建一个类数组对象 var alo = {0:"a", 1:"b& ...
- 浅谈JavaScript和DOM中的类数组对象
JavaScript是一门弱类型语言,它的数据类型分为两大类:简单数据类型(5种:Undefined.Null.Boolean.Number.String)和复杂数据类型(1种:Object).Obj ...
- JQUERY-事件-动画-类数组对象-添加自定义API
正课: 1. 事件: 2. 动画: 3. 类数组对象操作: 4. 添加自定义API: 1. 事件: 1. 页面加载后执行: 2个时机 1. DOM内容加载完成: 仅包括html, js DOMCont ...
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
原文地址 在使用js编程的时候,常常会用到集合对象,集合对象其实是一种泛型,在js中没有明确的规定其内元素的类型,但在强类型语言譬如Java中泛型强制要求指定类型. ES6引入了iterable类型, ...
- js- 类数组对象
JavaScript中,数组是一个特殊的对象,其property名为正整数,且其length属性会随着数组成员的增减而发生变化,同时又从Array构造函数中继承了一些用于进行数组操作的方法. 而对于一 ...
- Javascript数组与类数组对象
问题来由: 之前面试X公司的时候,问我关于原型链知道多少,于是我就开始说了一些有关于原型链的东西,面试官问Array的原型是什么,我说是对象,毕竟Array.prototype===array.__p ...
随机推荐
- c++并发编程之线程的互斥与同步
什么是线程的同步与互斥? 互斥:指在某一时刻指允许一个进程运行其中的程序片,具有排他性和唯一性. 对于线程A和线程B来讲,在同一时刻,只允许一个线程对临界资源进行操作,即当A进入临界区对资源操作时,B ...
- linux basic ------ shell
一般习惯把 shell 脚本语言和 shell 解释器统称为 shell,用 shell 脚本语言编写的程序简称脚本. shell 解释器 是用 c 语言写一个应用程序,它是用户使用 Unix / L ...
- CXF wsdl2java 生成java代码供客户端使用
CXF wsdl2java 生成java代码供客户端使用 环境配置:1.下载apache-cxf-2.6.2在环境变量中配置CXF_HOME 值为E:\gavin\cxf\apache-cxf-3.0 ...
- 第一节 Spring的环境搭建
正在构建,扫一扫,敬请期待 和玩得来的人在一起玩才叫玩! 和玩不来的人在一起玩,那种感觉就像加班啊! 关注胖个人微信公众账号,希望对各位学生有所帮助! --胖先生 Spring框架,什么是Sprin ...
- Eclipse的一些常用的快捷键
写代码的时候常用的: Ctrl + 鼠标左键: 进入函数定义,变量声明: Alt + ←: 回到上次编辑的地方, 同理 Alt + → 可以移回来 Ctrl + O: 查找当前类的所有函数,变量 Ct ...
- 【学习笔记】AspectJ笔记
AspectJ的概念 是一种静态编译期增强性AOP的实现 在编译过程中修改代码加入相关逻辑,无需程序员动手 AspectJ具体用法 下载安装AspectJ,启动jar文件,安装到JDK目录,添加pat ...
- 基础知识点 关于 prototype __proto__
基础知识点 关于 prototype __proto__ 供js新手参考 JavaScript 的一些基础知识点: 在 JavaScript 中,所有对象 o 都拥有一个隐藏的原型对象(在 Fire ...
- AngularJS入门基础——作用域
作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的 ...
- Swagger文档化restful接口
1.注解 @Api:用在类上,说明该类的作用. @ApiOperation:注解来给API增加方法说明. @ApiImplicitParams : 用在方法上包含一组参数说明. @ApiImplici ...
- v140平台工具集与v110工具集选择
今天在编译用vs2012编译C++动态库提示:error MSB8020: The builds tools for v140_xp (Platform Toolset = 'v140_xp') ca ...