1、概述
jQuery是一个非常优秀的Js库,与prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发最实用的角度出发,抛除了一些中看但不实用的东西,为开发者提供一个短小精悍的类库。由于其个短小精悍,使用简单方便,性能相对高效。众多的开发者都选择Jquery来进行辅助的web开发。
在使用jquery时开发,我们也会时常碰到许多的问题,但是jquery的代码很晦涩,难起看懂,当开发时出现了问题,看不懂源码,不知道如何去排错。
John Resig,Jquery的开发者,写了两本书,Pro Javascript Techniques 可以看作是对Jquery的源码分析。这个对于分析源码,从基本上去比较目前的类库都有很大的帮助。另外一本是jQuery.in.Action。这本主要是讲怎么去使用Jquery。二本书都深入浅出。还有一个由本手册由一揪整理编辑JqueryAPI的中文文档。这三个对于精通Jquery是有很大帮助的。
2、init()分析
在分析init()之前,我们得明白jQuery的设计理念。
Jquery是站在开发者的角度去考虑问题,在使用Js的时候,大部分时间都是对Dom元素进行操作,比如修改元素的属性,修改内容,修改CSS等。但是取Dom元素的,如getElementsByTag,有可能会取到一些Dom元素的集合,而又正好要这个集合的所有的元素都要进行同样的操作。如果只有一个元素,完全可以看作只有一个元素的集合。
这样只要对这个集合进行操作,就会对集合的每个元素都进行操作。jQuery就是基于这个集合而提供了众多的实用方法,包含了日常开发所需要的功能。对于这个集合,我们称为jquery对象。
我们可以通过$(params)或jquery(params)来生成Jquery对象。在Jquery文档中提供了四种方式:jQuery(expression,[context]),jQuery(html),jQuery(elements),jQuery(callback)四种构寻jquery对象的方式。其实Jquery的参数可以是任何的元素,如空参数,都能构成jquery对象。
那么jquery是如何实现的呢?
①②③④⑤⑥⑦⑧⑨⑩
var jQuery = window.jQuery = window.$ = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context); ①
};
可以看得出其实就是new init(selector, context):
init : function(selector, context) {
selector = selector || document;// 确定selector存在
// 第一种情况 Handle $(DOMElement)单个Dom 元素,忽略上下文
if (selector.nodeType) { ②
this[0] = selector;
this.length = 1;
return this;
}
if (typeof selector == "string") {//selector为string ③
var match = quickExpr.exec(selector);
if (match && (match[1] || !context)) {
if (match[1])// 第二种情况处理$(html) -> $(array) ④
selector = jQuery.clean([match[1]], context);
else {// 第三种情况:HANDLE: $("#id")//处理$("#id")
var elem = document.getElementById(match[3]);
if (elem) {
// IE会返回name=id的元素 ,如果是这样,就document.find(s)
if (elem.id != match[3]) ⑤
return jQuery().find(selector);
// 构建一个新的jQuery(elem)
return jQuery(elem); ⑥
}
selector = [];
}
} else
// 第四种情况:处理$(expr, [context])==$(content).find(expr)
return jQuery(context).find(selector); ⑦
} else if (jQuery.isFunction(selector)) ⑧ // 第五种情况:处理$(function)七Shortcut for document ready
return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector);
// 第六种情况:处理$(elements)
return this.setArray(jQuery.makeArray(selector)); ⑨
},
上面的代码①可以看出$(xx)或Jquery(xx)得到不是真正的jQuery函数生成的对象,而是jQuery.fn.init函数生成的对象。也是就是jQuery的对象继承的是jQuery.fn.init的原型。jQuery.fn = jQuery.prototype={..}。我们基本上不用new jQuery(xx),而是直接jQuery(xx),就是采用了new jQuery(xx),先生成jQuery函数的对象,把原型中的继承下来,返回的也是jQuery.fn.init函数生成的对象。而jQuery函数的对象也抛弃了。可见给jQuery.prototype上增加方法的意义不大。同时也可以看出采用new jQuery(xx)的效率更低。jQuery.fn.init是通过jQuery.fn.init.prototype = jQuery.fn;来获得的。在扩展jQuery的时候,只要把相关的函数extend到jQuery.fn就可以了。
jQuery.fn.init负责对传的参数进行分析然后生成jQuery对象。它把第一个参数分成四种情况:
类型 说明 |
Dom Element 第一个参数为Dom元素,第二个参数不用。直接把Dom元素存在新生成的jQuery对象的集合中。返回这个jQuery对象。构建jQuery对象完成。 string 第一个参数为string有三种情况: 1、html的标签字符串,$(html) -> $(array),第二个参数可选。 执行selector = jQuery.clean([match[1]], context);。该语句是把hteml的字符串转换成dom对象的数组。接着执行Array类型的返回。2、字符串为#id时$(id) 首先通过var elem = document.getElementById(match[3]);取得elem,如没有取到selector = [];转到执行Array类型的返回空集合jquery对象。 如找到elem,通过return jQuery(elem);再次生成jquery对象,这次是Dom Element类型的jquery对象的返回。3、兼容css1-3语法的selector字符串,第二个参数是可选的。 执行return jQuery(context).find(selector);。该语句先执行jQuery(context)。可以看出context第二参数可以是任意的值,可以是集合形式。之后就通过find(selector)找到jQuery(context)中所有dom元素都满足selector表达式的dom元素的集合,构建新的jquery对象,并返回。 #id其实和这种方式是统一的,单独出来是为了提高性能。 Fn 第一参数是函数。第二个参数不用。是$(document).ready(fn)的的简写,其return jQuery(document)[jQuery.fn.ready ? "ready" : "load"](selector)是其执行的代码。这个语句首先执行jQuery(document),它再一次newjQuery.fn.init函数,生成jQuery对象(元素为docume
分享到:
相关推荐
《jQuery源码分析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。深入理解其源码对于提升JavaScript编程技能和优化前端性能至关重要。本文将从核心概念、设计...
jquery源码分析,包括入口技术,选择器入口,以及在选择器使用的时候需要注意的优化思路
### jQuery源码分析系列知识点概览 #### 一、总体架构与核心概念 - **前言开光**:介绍分析jQuery源码的目的和价值,强调通过深入研究源码,可以学习到先进的设计理念和实践技巧。 - **总体架构**:解析jQuery的...
总结,jQuery源码分析涉及的内容广泛,包括选择器引擎、事件处理、DOM操作、动画效果、Ajax通信以及插件开发等多个方面。深入理解jQuery源码,有助于我们更好地利用它来构建高效、易维护的Web应用。通过阅读中文注释...
jQuery源码分析-插件
深入理解jQuery源码有助于开发者更好地利用其API并优化性能。主要关注点包括: 1. **选择器引擎(Sizzle)**:jQuery 使用Sizzle作为其选择器引擎,它是如何快速高效地解析CSS选择器并找到匹配元素的。 2. **链式...
### jQuery源码分析关键知识点详解 #### 一、前言 在深入了解jQuery源码之前,有必要先简要介绍一下jQuery的基本情况及其对JavaScript编程领域的重要意义。jQuery作为一个轻量级、功能丰富的JavaScript库,在Web...
资源名称:jQuery源码分析系列 中文PDF版内容简介:jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了Javascript开发开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而又优雅...
### jQuery源码分析 #### 一、概述 jQuery作为一个卓越的JavaScript库,以其简洁高效的特性在前端开发领域占据了一席之地。与Prototype、YUI、Mootools等其他JavaScript库相比,jQuery更加注重实用性,去除了一些...
jQuery源码分析视频教程总计116课,按照jquery每个区段实现的内容,精确地讲解源码中是怎么实现我们开发中用到的jquery得方法的
jQuery源码分析-事件(1).
jQuery源码分析 00 前言开光 01 总体架构 03 构造jQuery对象-源码结构和核心函数 03 构造jQuery对象-工具函数 05 异步队列 Deferred 08 队列 Queue 09 属性操作 10 事件处理-Event-概述和基础知识 15 AJAX-前置过滤...
Jquery1.26版本的源码分析,pdf格式文档,相当清淅的书籍,前端开发者必看的类库书籍,虽然网上有很多jQuery的实例,但真正深入分析介绍jQuery源码细节的文档太少了,所以本篇文稿希望是你期待的,文档内容包括:...
jQuery源码分析-初步
设计模式 jQuery源码分析
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类 库相比,它剑走偏锋,从web开发的...这就是本源码分析的原因,让所有使用 jQuery 的读者,能快速 上手 jQuery的源码,并在开发中得心应用。
### jQuery源码分析—构造jQuery对象 #### 一、源码结构概览 根据所提供的文件内容,本节将深入分析如何构建jQuery对象及其核心构造逻辑。首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 ...
对于事件的操作无非是addEvent,fireEvent,removeEvent这三个事 件方法。... Jquery提供了一个 event的包裹,这个相对于其它的lib提供的有点简单,但是足够使用。 代码如下: //对事件进行包裹。 fix : function(e