将类数组对象转化为数组对象

javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments。她们的特点是和数组一样有length属性,并且有0,1,2这样的位置属性。在代码编写中我们经常需要将他们转化为数组对象。

//mini类数组对象
var arrayLike = {
0: "a",
1: "b",
2: "c",
length: 3
}
console.log(Array.prototype.slice.call(arrayLike))

我们来详细分析一下Array.prototype.slice.call(arrayLike)。数组的中有slice方法,存放在数组的原型中也就是Array.prototype.slice,它操作的返回值是一个数组;call具有修改上下文的作用,本例就是将slice的上下文改为arrayLike。所以这句话就实现了将类数组对象转化为数组对象的功能。

.get()实现

var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
init: function(selector){
this.selector = selector;
//从IE8之后提供了querySelectorAll,我们先利用它mini化选择器
//返回的是伪数组对象NodeList
var result = document.querySelectorAll(selector);
//将NodeList转化为jQuery对象。
for(var i = 0;i < result.length;i++){
this[i] = result[i]
}
//模拟jQuery对象的length属性
this.length = result.length;
}
}
jQuery.fn.init.prototype = jQuery.fn
//不利用extend ,直接向原型里添加属性方法get
jQuery.fn.get = function(index) {
return index != null ? (index < 0 ? this[this.length + index]:this[index]):Array.prototype.slice.call(this);
}
//测试
console.log(jQuery("div").get(0))

.get的作用是转化为DOM节点,或者是DOM节点数组。注意一些特别的情况。

.eq()实现

var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context );
};
jQuery.fn = jQuery.prototype = {
selector: "",
init: function(selector){
//仍然是mini的选择器。
var result = document.querySelectorAll(selector);
for(var i = 0;i < result.length;i++){
this[i] = result[i]
}
this.length = result.length;
},
pushStack: function( elems ) {
//将空jQuery对象和elems合并
var ret = jQuery.merge( this.constructor(), elems );
//设置前一个对象,作回来的索引。
ret.prevObject = this; // 新形成jQuery的对象
return ret;
},
eq : function( i ) {
//将负数位置转化为正数位置
var j = + i + ( i < 0 ? this.length:0);
//在范围内返回指定对象包成的数组,否则返回空数组
return this.pushStack((j >= 0&& j<this.length)?[this[j]]:[])
},
//将原型的构造函数设置为jQuery,可以用jQuery.constructor创造新的空对象;相关语句this.constructor;jQuery.prototype;
constructor : jQuery
}
jQuery.fn.init.prototype = jQuery.fn
//将两个类数组对象或数组对象合并,并设置,length
jQuery.merge = function( first, second ) {
var len = +second.length,
j = 0,
i = first.length;
for ( ; j < len; j++ ) {
first[ i++ ] = second[ j ];
} first.length = i; return first;
};
//测试
console.log(jQuery("div").eq(0))

先讲两个相关函数jQuery.fn.pushStatic和jQuery.merge。

写在jQuery.fn里的函数实际写在原型里,用到这个原型的构造函数都会继承;而写在jQuery里的实际是在一个独立的jQuery对象,只能通过jQuery.[函数名]的形式引用。

merge实际的功能是合并两个数组或者类数组对象,放到第一个对象中,并设置他们合并后的长度。pushStatic调用了merge,第一个参数为jQuery空对象(this.constructor()),将第二个数组或者类数组合并到jQuery空对象中,形成新的jQuery对象,并返回。

eq的功能就是get的功能多一个转化成jQuery对象,调用pushStatic,并返回其返回值一个新的jQuery对象。

first和last和end

  first: function() {
return this.eq( 0 );
}, last: function() {
return this.eq( -1 );
}, end: function() {
return this.prevObject || this.constructor(null);
},

jQuery源码笔记——三的更多相关文章

  1. jQuery源码笔记(一):jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  2. Tomcat8源码笔记(三)Catalina加载过程

    之前介绍过 Catalina加载过程是Bootstrap的load调用的  Tomcat8源码笔记(二)Bootstrap启动 按照Catalina的load过程,大致如下: 接下来一步步分析加载过程 ...

  3. jQuery源码解读三选择器

    直接上jQuery源码截取代码 // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ i ...

  4. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  5. jQuery 源码解析(三) pushStack方法 详解

    该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...

  6. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  7. jQuery源码笔记——二

    jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, con ...

  8. jQuery源码笔记——回调对象

    回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: fu ...

  9. jQuery源码笔记——延迟对象

    提供一种方法来执行一个或多个对象的回调函数, Deferred对象通常表示异步事件. 它是回调对象的拓展运用,在jQuery当中非常依赖回调对象. 一个简单的,只解决成功状态下的缓存实例 functi ...

随机推荐

  1. MVC与WebForm最大的区别

    原文地址:http://www.cnblogs.com/birdshover/archive/2009/08/24/1552614.html 使用ASP.NET MVC框架,创建默认项目,第一直观感觉 ...

  2. MySQL Server 5.0 下载与 安装指南[图文] (安装到非系统路径+设置root账号相应password)

    软件下载:点我前往下载 安装需知:相应mysql版本号为V5.0 ------------------------------------------------- 安装步骤例如以下: Step1 首 ...

  3. 实现了在android实现左右滑动切换界面的效果

    这是实现了在android实现左右滑动切换界面的效果,该效果的源码下载,请到源码天堂下载吧,喜欢的朋友可以研究一下. 布局文件 <?xml version="1.0" enc ...

  4. 不管ACM是不是屠龙之技

    有一个目标,每天早上起床能让你保持斗志满满..找到自己的战场和归属. 这件事本身就是很难得的...是不是 ACM 并不重要. 你现在能从其他事情上获得这种体验么? -xiaodao

  5. web api (.NET 4.5)

    摘自http://blog.csdn.net/fangxing80/article/details/7318289 在刚刚发布的 ASP.NET MVC 4 中,有一个值得注意的新特性——Web Ap ...

  6. JavaScript 【非IE DOM2级XML】

    DOM2中的XML IE可以实现了对XML字符串或XML文件的读取,其他浏览器也各自实现了对XML处理功能.DOM2级在document.implementaion中引入了createDocument ...

  7. dede 设置为全动态浏览

    将织梦所有栏目设置为“使用动态页”,可以再建立栏目时选择“使用动态页”:也可以执行下面的SQL语句.update dede_arctype set isdefault=-1 将网站所有文档都设置为“仅 ...

  8. LVS客户端启动脚本

    在设置LVS客户端时,如果我们使用手工设置的话会比较麻烦.现在我们直接使用脚本来启动lvs-client就OK了,下面是一个简单的脚本. VIP地址:10.0.0.230,把文件放到/etc/init ...

  9. centos 添加epel、remi仓库和ELRepo仓库

    centos使用yum安装软件非常方便,yum会自动安装软件的相关依赖.但是centos自带的源仓库,软件相对老旧并且不太全,所以我们可以添加第三方仓库,可以安装较新的软件版本. epel是fedor ...

  10. mysql性能优化学习笔记(5)数据库结构优化

    一.选择合适的数据类型    1.使用可存下数据的最小的数据类型    2.使用简单地数据类型,Int<varchar    3.尽可能使用not null定义字段    4.尽量少用text, ...