jQuery源码笔记——三
将类数组对象转化为数组对象
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源码笔记——三的更多相关文章
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
- Tomcat8源码笔记(三)Catalina加载过程
之前介绍过 Catalina加载过程是Bootstrap的load调用的 Tomcat8源码笔记(二)Bootstrap启动 按照Catalina的load过程,大致如下: 接下来一步步分析加载过程 ...
- jQuery源码解读三选择器
直接上jQuery源码截取代码 // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ i ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- jQuery 源码解析(三) pushStack方法 详解
该函数用于创建一个新的jQuery对象,然后将一个DOM元素集合加入到jQuery栈中,最后返回该jQuery对象,有三个参数,如下: elems Array类型 将要压入 jQuery 栈的数组元素 ...
- jQuery 源码解析(三十) 动画模块 $.animate()详解
jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...
- jQuery源码笔记——二
jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, con ...
- jQuery源码笔记——回调对象
回调对象是一个多用途的回调列表对象,提供了强大的的方式来管理回调函数列表. 最简单的缓存对象 function Callbacks(){ var list = [], self = { add: fu ...
- jQuery源码笔记——延迟对象
提供一种方法来执行一个或多个对象的回调函数, Deferred对象通常表示异步事件. 它是回调对象的拓展运用,在jQuery当中非常依赖回调对象. 一个简单的,只解决成功状态下的缓存实例 functi ...
随机推荐
- vmware重装系统后虚拟机实例文件*.vmdk重用
如题:vmware重装系统后自定义的:虚拟机名称*.vmdk文件重用. 一.问题描述 系统磁盘坏道,装不上系统直接换了硬盘,但是新装的Vmware不能够通过open方式打开“自定义*.vmdk”(这个 ...
- jQuery关于mouseover和mouseenter的区别
原生的mouseenter是dom3级的事件,对于jQuery等一些框架已经实现了这个事件.但是它到底跟mouseover有什么区别? jQuery在实现这两个事件的时候,mouseover支持事件冒 ...
- C#获取本周、上周、本月、上月、本季度、上季度、本年、上一年起始时间和结束时间
/// 取得某月的第一天 /// </summary> /// <param name="datetime">要取得月份第一天的时间</param&g ...
- C# Socket服务端和客户端互相send和receive
服务端 { ]; ; { ...
- C++中socket编程
原文:http://blog.csdn.net/cuiran/article/details/5854794 Server端 #include <WINSOCK2.H> #include ...
- HTML2列表表单框架
HTML——Hyper Text Markup Language <html>,<head>,<body> 一.基本标签: (一)格式标签:——模型:word工具栏 ...
- 面向对象S.O.L.I.D原则
面向对象的五大原则,又称S.O.L.I.D原则: S(SRP, Single Reponsibility Principle): 单一职责原则,一个类应有且只有一个职责(或只有一个引起其变化的原因) ...
- yum php56
美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...
- java中遍历map对象的多种方法
在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有ma ...
- 初学swift笔记变量的定义(一)
swift变量的定义 1 import Foundation /* 变量的定义 变量的类型是可以不用写的 var a=10 常量的定义 let修饰 */ print(a) let b= print(b ...