热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入了解jQuery之整体架构

本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http:www.imooc.comlearn172)后的个人体会以及笔记。在这里感谢艾伦老师深入浅出的讲解!!先来看看如何生成

本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记。在这里感谢艾伦老师深入浅出的讲解!!

 

先来看看如何生成一个jQuery对象,源码:

var  jQuery = function( selector, context ) {

return new jQuery.fn.init( selector, context );
};

当我们使用jQuery('something')或者$('something')时,我们得到的是一个 jQuery.fn.init()对象。那么jQuery.fn是什么鬼?

jQuery.fn = jQuery.prototype = {
// jQuery版本
jquery: version,
constructor: jQuery, // 构造函数
// Start with an empty selector
selector: "",
// The default length of a jQuery object is 0
length: 0,
// 省略.....
}

jQuery.fn 实际上是jQuery构造函数的原型对象的引用!! 所以我们以后看到 jQuery.fn时,把他当成jQuery构造函数的原型对象就可以了。

知道了jQuery.fn , 接下来看看jQuery.fn.init()函数

jQuery.fn.init = function( selector, context ) {
// 省略....
return this; };
jQuery.fn.init.prototype = jQuery.prototype; // 注意这里! 这句代码让init对象可以使用jQuery的原型方法。

这样,我们在创建jQuery对象时就不用使用new关键字了。

整体看一下源码架构:

var $ = jQuery = function(selector,context){
return new jQuery.fn.init(selector,context) // 返回一个jQuery.fn.init()对象
}

jQuery.fn
= jQuery.prototype = {
constructor:jQuery,
init:
function(){
// 省略.....
return this;
}
}
jQuery.fn.init.prototype
= jQuery.fn

 

直观的感受一下相互之间的关系:

 

调用jQuery函数,我们得到的是一个jQuery.fn.init实例,这个实例的原型对象被重新指向到了jQuery函数的原型对象,所以这个实例可以使用jQuery原型对象的属性和方法,而如果我们给jQuery函数附加方法,那么这个方法就变成了静态方法

然后来看一下jQuery.fn.init函数的源码:

    var rootjQuery,

// A simple way to check for HTML strings
// Prioritize #id over to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
// --任意个非右尖括号字符 或者 以#开头的

init
= jQuery.fn.init = function( selector, context ) {
var match, elem;

// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}

// Handle HTML strings
if ( typeof selector === "string" ) {
// 如果selector的格式是字符串类型,且字符串长度大于等于3,并且内容格式为:
if ( selector[0] === "<" &&
selector[ selector.length
- 1 ] === ">" &&
selector.length
>= 3 ) {

// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];

}
else {
match
= rquickExpr.exec( selector );
}

// Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) {

// HANDLE: $(html) -> $(array)
if ( match[1] ) { //
cOntext= context instanceof jQuery ? context[0] : context;

// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
jQuery.merge( this, jQuery.parseHTML(
match[
1],
context
&& context.nodeType ? context.ownerDocument || context : document,
true
) );

// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );

// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}

return this;

// HANDLE: $(#id)
} else {
elem
= document.getElementById( match[2] );

// Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}

this.cOntext= document;
this.selector = selector;
return this;
}

// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}

// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.cOntext= this[0] = selector;
this.length = 1;
return this;

// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return typeof rootjQuery.ready !== "undefined" ?
rootjQuery.ready( selector ) :
// Execute immediately if ready is not present
selector( jQuery );
}

if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.cOntext= selector.context;
}

return jQuery.makeArray( selector, this );
};
View Code

 

 配张思路图:

 


推荐阅读
  • PHP中元素的计量单位是什么? ... [详细]
  • 本文探讨了如何在C#中实现USB条形码扫描仪的数据读取,并自动过滤掉键盘输入,即使不知道设备的供应商ID(VID)和产品ID(PID)。通过详细的技术指导和代码示例,展示了如何高效地处理条形码数据,确保系统能够准确识别并忽略来自键盘的干扰信号。该方法适用于多种USB条形码扫描仪,无需额外配置设备信息。 ... [详细]
  • 本项目在Java Maven框架下,利用POI库实现了Excel数据的高效导入与导出功能。通过优化数据处理流程,提升了数据操作的性能和稳定性。项目已发布至GitHub,当前最新版本为0.0.5。该项目不仅适用于小型应用,也可扩展用于大型企业级系统,提供了灵活的数据管理解决方案。GitHub地址:https://github.com/83945105/holygrail,Maven坐标:`com.github.83945105:holygrail:0.0.5`。 ... [详细]
  • Spring框架入门指南:专为新手打造的详细学习笔记
    Spring框架是Java Web开发中广泛应用的轻量级应用框架,以其卓越的功能和出色的性能赢得了广大开发者的青睐。本文为初学者提供了详尽的学习指南,涵盖基础概念、核心组件及实际应用案例,帮助新手快速掌握Spring框架的核心技术与实践技巧。 ... [详细]
  • 在稀疏直接法视觉里程计中,通过优化特征点并采用基于光度误差最小化的灰度图像线性插值技术,提高了定位精度。该方法通过对空间点的非齐次和齐次表示进行处理,利用RGB-D传感器获取的3D坐标信息,在两帧图像之间实现精确匹配,有效减少了光度误差,提升了系统的鲁棒性和稳定性。 ... [详细]
  • C#编程指南:实现列表与WPF数据网格的高效绑定方法 ... [详细]
  • 本文详细解析了 MySQL 5.7.20 版本中二进制日志(binlog)崩溃恢复机制的工作流程。假设使用 InnoDB 存储引擎,并且启用了 `sync_binlog=1` 配置,文章深入探讨了在系统崩溃后如何通过 binlog 进行数据恢复,确保数据的一致性和完整性。 ... [详细]
  • MySQL性能优化与调参指南【数据库管理】
    本文详细探讨了MySQL数据库的性能优化与参数调整技巧,旨在帮助数据库管理员和开发人员提升系统的运行效率。内容涵盖索引优化、查询优化、配置参数调整等方面,结合实际案例进行深入分析,提供实用的操作建议。此外,还介绍了常见的性能监控工具和方法,助力读者全面掌握MySQL性能优化的核心技能。 ... [详细]
  • 题目描述:小K不幸被LL邪教洗脑,洗脑程度之深使他决定彻底脱离这个邪教。在最终离开前,他计划再进行一次亚瑟王游戏。作为最后一战,他希望这次游戏能够尽善尽美。众所周知,亚瑟王游戏的结果很大程度上取决于运气,但通过合理的策略和算法优化,可以提高获胜的概率。本文将详细解析洛谷P3239 [HNOI2015] 亚瑟王问题,并提供具体的算法实现方法,帮助读者更好地理解和应用相关技术。 ... [详细]
  • MongoDB Aggregates.group() 方法详解与编程实例 ... [详细]
  • 技术日志:深入探讨Spark Streaming与Spark SQL的融合应用
    技术日志:深入探讨Spark Streaming与Spark SQL的融合应用 ... [详细]
  • 深入解析:RKHunter与AIDE在入侵检测中的应用与优势
    本文深入探讨了RKHunter与AIDE在入侵检测领域的应用及其独特优势。通过对比分析,详细阐述了这两种工具在系统完整性验证、恶意软件检测及日志文件监控等方面的技术特点和实际效果,为安全管理人员提供了有效的防护策略建议。 ... [详细]
  • Mongoose E11000 错误:集合中出现重复键问题分析与解决 ... [详细]
  • 本文深入探讨了Java枚举类型的使用与实践,详细解析了枚举的基本用法及其在实际开发中的应用。首先介绍了枚举作为常量的替代方案,自JDK 1.5起,通过枚举可以更加简洁、安全地定义常量,避免了传统方式中可能出现的错误。此外,文章还探讨了枚举在实现单例模式、状态机等场景中的优势,并提供了多个实际案例,帮助开发者更好地理解和运用这一强大的语言特性。 ... [详细]
  • 本章节从商业数据分析与挖掘的角度,深入探讨了特征工程的关键技术和应用方法,包括数据预处理、特征构建、特征提取及特征选择。详细阐述了如何系统地构建用于分析的结构化数据,为全栈开发提供了坚实的基础。 ... [详细]
author-avatar
greybt
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有