jQuery核心源码core.js分析

Open UI5 源代码解析之367:jquery-ui-core.js OpenUI5 中 jquery-ui-core.js 的核心作用与关键特性 jquery-ui-core.js 在 OpenUI5 项目中作为基础支撑层,主要提供以下关键能力: 核心交互支持: 层级管理(zIndex计算) 滚动容器识别(scrollParent) 焦点控制(focusable/tabbable选择器) 唯一ID生成(uniqueId/removeUniqueId) SAP定制优化: 重置懒加载getter,避免与UI5插件冲突 改进focus事件触发机制 更新选择器扩展方式 优化area 阅读详情
关于JQuery
作者John Resig(1984.5.8),Mozilla基金会Javascript技术支持。作者的主页:http://ejohn.org/,有影响的网站。
2006年发布,目前是1.4.2版本。
26.95%的网站使用JQuery。
JQuery及其相关项目由Mozilla基金会支持,得到了包括Google,微软,惠普,IBM等的认可。
JQuery使用github作为源码托管,在
http://github.com/jquery/jquery
先看core.js文件:
var jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );//
},
jQuery是一个Function。在JavaScript中,Function是一种特殊的对象,这个对象可以有自己的属性。
但是JQuery(parameters)方法调用的结果却是一个jQuery.fn.init对象。注意此处的new Function用法,实际上返回了一个对象实例。
这个对象实例的类型是jQuery.fn.init,而不是JQuery。--至少现在不是。
往下看:
jQuery.fn = jQuery.prototype = {init:function (){},...}
这一段意味着,jQuery.fn 和jQuery.prototype是一样的,都是jQuery的prototype。prototype是JavaScript实现类型继承的机制。简单地说,jQuery.prototype这个对象有的属性,jQuery对象实例也继承过来了。注意上文提到过,jQuery是一个方法,也就是Function对象。jQuery和jQuery对象实例是不同的。jQuery对象实例是调用new jQuery(..)产生的。jQuery作为一个Function对象,是不能继承jQuery.prototype的属性的,Function对象有自己的prototype。也就是说,jQuery.init是undefined,这点应该没有问题的。但是var x=new jQuery();x就有了jQuery.prototype这个对象的所有属性,包括init方法,length等属性。
jQuery.fn.init.prototype = jQuery.fn;
这句话很关键。
jQuery是一个方法,jQuery(...)方法调用的结果是一个jQuery.fn.init对象实例,这是上文提到的。上面这句话意味着,jQuery.fn.init对象实例的父类是jQuery.fn。也就是说,jQuery.fn有的属性,jQuery.fn.init的对象实例也有。这说明,如果var x=jQuery(xxx);那么x将有jQuery.fn对象的所有属性,包括init方法,length属性等。跟var x=new jQuery()的效果一样。这样之后,发现,jQuery方法就是一个工厂方法,产生jQuery对象实例(其实是jQuery.fn.init对象实例,但是,既然jQuery.fn.init对象实例的父类是jQuery.prototype也就是jQuery对象实例的父类,意味着jQuery对象实例和jQuery.fn.init对象实例有共同的父类,就把它们当作是一样的吧)。
继续:
jQuery.extend = jQuery.fn.extend = function() {...}
这里定义了jQuery核心的一个重要的extend方法。这里不厌其烦地再提一遍,jQuery是一个Function对象,这句代码之后,这个Function对象有了一个新的属性。而所有jQuery的实例,也就是工厂方法jQuery(...)或者new jQuery产生的对象都具有了extend方法。
这个extend的作用是,扩展jQuery对象实例的功能,这成为jQuery插件机制的基础。当然,也可以直接拿来用。jQuery.extend(object1,object2)之后,object1的属性融合了object2的属性,而object2保持不变。
jQuery.extend({noConflict:function(){...},...})
这句的作用是,扩展jQuery这个Function对象的属性,使他具有了熟悉的noConflict等方法,把这些方法当作是工具方法吧,因为jQuery框架的主角是jQuery实例。
browserMatch = jQuery.uaMatch( userAgent );
这是jQuery用来做浏览器检测的。这个功能主要通过navigator.userAgent字符串来判断的,仅供参考。
下来:
rootjQuery = jQuery(document);
这个jQuery的实例在core.js内部使用,并没有在其他地方暴露。
最后一句:
window.jQuery = window.$ = jQuery;
将jQuery(即$)这个Function对象暴露在全局范围内。
以上是粗略的分析。
下面进行更细致的分析。
jQuery.fn.init是核心方法之一。
// Handle $(DOMElement)
if ( selector.nodeType ) {
  this.context = this[0] = selector;
  this.length = 1;
  return this;
}
每一个jQuery对象实例都有context和selector,length属性。而且,每一个jQuery对象都是一个索引"数组",这个数组里面包含的内容是DOM元素。这是很重要的,因为jQuery的一个设计理念就是,获取DOM元素(现在发现存在索引数组里面),并且操作这些DOM元素(manipulation.js和traversing.js等等负责这些任务)。
无疑,上面的代码效率很高。
...
} else if ( jQuery.isFunction( selector ) ) {
return rootjQuery.ready( selector );
}
jQuery(function(){...})意思是在DOM加载完之后执行一个方法。
pushStack方法,在执行eq,first,last等方法之后,调用end之后可以回退到之前的jQuery对象。
jQuery.fn.extend(.....
map: function( callback ) {
return this.pushStack( jQuery.map(this, function( elem, i ) {
return callback.call( elem, i, elem );
}));
},
这个map方法直接把原来jQuery对象里保存的DOM元素转换成别的元素,通过callback方法。pushStack在此意味着这map之后还可以回退到原来的jQuery对象实例。
jQuery.extend(.....
noConflict: function( deep ) {
window.$ = _$;
if ( deep ) {
window.jQuery = _jQuery;
}
return jQuery;
},
这个是为了防止冲突。
注意在一开始的时候,已经保存了原来可能已经存在的jQuery,$变量:
// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,
此处将其还原。
makeArray(arr),将一个Array-like的元素变成一个Array。如果arr含有length,并且含有索引属性,转化就是有意义的。
merge(first,second),将数组(或者类似数组的对象)second的元素拷到first数组的最后。
grep: function( elems, callback, inv ) 通过callback过滤掉elems中的某些元素。callback的返回值将被标准化为true或false。如果callback的返回值和inv相等,相应的元素将被过滤掉。inv默认是false。
map: function( elems, callback, arg )  将elems中的元素用callback(value,index)转化,然后返回转化后的数组,如果callback的返回值是null,相应元素将被过滤。
proxy: function( fn, proxy, thisObject ) 将方法fn的执行环境(this)设成proxy,使用fn.call(proxy,arguments)实现。
jquery.ui.core.js JQuery的插件,实现拖拽效果所需要的插件,jquery.ui.core.js 立即下载

相关推荐

ASP.Net core Web框架(JuCheap.Core).zip

ASP.Net core Web框架(JuCheap.Core).zip

前端架构设计第三课 core-js标准套件

06 core-j 及垫片理念:设计一个“最完美”的 Polyfill 方案 即便你不知道 core-js,也一定在项目中直接或间接地使用过它。core-js 是一个 JavaScript 标准库,它包含了 ECMAScript 2020 在内的多项特性的 polyfills,以及 ECMAScript 在 proposals 阶段的特性、WHATWG/W3C 新特性等。因此它是一个现代化前端项目的“标准套件”。 除了 core-js 本身的重要性,它的实现理念、设计方式都值得我们学习。事实上,core-

fegus的博客 4197

STM32F103C8T6驱动DM542步进电机:从CubeMX配置到按键控制的全流程避坑指南

本文详细介绍了如何使用STM32F103C8T6通过CubeMX配置驱动DM542步进电机的全流程,包括PWM频率计算、GPIO模式选择及按键控制实现。重点解决了常见硬件连接错误、PWM参数配置及加减速算法优化,帮助开发者快速搭建稳定的电机控制系统。

weixin_42741930的博客 308

Promise学习笔记(三):源码core.js解析(上)

源码阅读阶段 先理解Promise根本吧,想快点理解的话可以直接跳到下个标题.这部分根据理解将持续修改。 Promise(fn) functionnoop(){} /* 空函数,用于判断传入Promise构造器的函数是否为空函数,如果为空函数构造一个promise对象并初始化状态为pending,终值null,回调状态0和队列null...

weixin_33857230的博客 405

C++版Cesium实战:从OpenGL到3DTiles的全流程开发指南

本文提供了一份C++版Cesium全流程开发指南,详细阐述了如何利用OpenGL和Qt从零构建高性能、可离线部署的三维GIS应用。内容涵盖开发环境搭建、OpenGL渲染引擎初始化、Cesium核心坐标系与场景管理移植,并重点解析了3DTiles数据的解析、异步加载与渲染优化等硬核实战技术,旨在帮助开发者实现与现有C++工业软件的深度集成。

weixin_28077113的博客 165

一文看懂分布式存储架构

目录一、集中存储结构二、分布式存储1 、分布式存储的兴起2 、分布式存储的重要性3 、分布式存储的种类和比较三、分布式理论浅析1 、一致性和可用性2 、数据分布3 、复制4 、分布式协议5、跨机房部署四、分布式文件系统1、 Google 文件系统( GFS )2、 Taobao 文件系统( TFS )3、 Fackbook Haystack 文件系统4、 CDN 内容分发网络五、分布式键值系统1、 Amazon Dynamo2、 Taobao Tiar3、 ETCD4 、产品选型比较( Etcd , Zoo

weixin_70730532的博客 2万+

jqueryui 1.8.19引用顺序(及var basePrototype = new base()错误)

在jqueryui1.8.19中,发现它没有使用原来1.8.17里边那个巨大的260K的单个js,而是把各种JS散开放了,有效地防止了JS下载的带宽。 不过放错顺序,会出现各种错误,不一而足,比如标题括号中的那个位置就经常出做,自己测试及上网搜索了一下,找到个现在可用的顺序,供大家参考。 (在搜索过程中发现有人1.4.X就开始用分离的多个小JS,但此之前本人一直单个的J...

weixin_34248487的博客 195

il2cpp分析-gobal-metadata.dat解密

打开ida,把libil2cpp拖到ida中按快捷键Shift+F12等待字符串分析完后,搜索global-metadata.dat。ida中双击sub_57EE7C进入,VS code中也跳转到LoadMetadataFile函数。VSCode打开il2cpp源代码,全局搜索global-metadata.dat。工具:010Editor,IDA 7.5,Jadx,VS Code。判断加密逻辑为根据文件的长度循环读取字节码做亦或加密。双击搜索出来的结果,切记要选il2cpp目录下的。

Android_machong的博客 8025

JQuery UI 插件原理分析(一)<jquery.ui.core.js>

因项目需要用到JQuery UI的sorttable插件,抽空分析了下JQuery UI 的实现方式. JQuery 为最新1.4.1版本 jquery.ui.core.js 仅对此做了简单的汉语注释 1 /*! 2 * jQuery UI 1.8rc1 3 * 4 * Copyright (c) 2010 AUTHORS.txt (http://jqu...

weixin_30662539的博客 265

【Boost5】Boost变换器的输入电容

节点的电流有3个,一个是来自电源输入的,由于我们把Vin看成理想电源以及线路的电感的存在,它可以近似看作是恒定的电流源Iin,一个是流向输入电容Cin的电流Icin,另外一个节点是电感L电流IL。电容电流波形在整个开关周期内的平均值为0,充电和放电在一个周期中各占1/2,在图中充电部分面积和放电部分面积相等,那么在充电或放电的电荷量Q=I*t,从图中可以看出,在一个周期内电容电流变化量是ΔIL,那在电容在充电1/2T周期中电流的变化量是1/2ΔIL。输入电容上的ESR也会随着电流变化,影响输入电压的变化。

qq_43416206的博客 3349

数通基础(基本网络通信原理、IP地址如何配置、DHCP、DNS域名系统、路由技术基础、静态路由 、TCP和UDP、vlan虚拟局域网、trunk、三层交换)

我们知道了1、电脑开机,通过dhcp获取ip地址2、电脑输入域名,www.baidu.com电脑把www.baidu.com发到自己的dns服务器3、dns服务器把域名解析成对应的ip地址4、电脑向百度服务器发送一个请求。

qq_53235556的博客 6482

jQuery 1.8源码分析 core.js核心模块 jQuery对象的构造分析

1、init方法详解: 根据上一篇文章的分析,知道init方法其实就是在使用$() 创建jQuery对象是调用的,简单的说其实就是一个元素选择器,在API文档中可以发现,该方法可以提供如下几个用法: jQuery([selector,[context]]) 概述 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通...

weixin_34096182的博客 105

[QMT量化交易小白入门]-五十、十年基本保证每年盈利,全天ETF候稳稳的幸福

全局参数raise_rate = -1 # 触发rebalance的上涨比例period: 设定为22,表示每22个交易日执行一次调仓(即大约每月一次)。这是策略的时间框架基础。raise_rate: 初始值设为-1,意味着默认情况下不会因为资产的涨幅而触发调仓。这一参数用于控制是否基于资产表现动态调整仓位。run_count: 用于记录策略运行的次数,帮助判断何时执行定期调仓。1、为了简便计算,回撤时将调仓再平衡是先卖出再买入,没有比较持仓,实盘时是需要计算的,减少交易费用。

木头大左的博客 807

jquery3.0源码解读(一)Init

目的督促自己耐心完整看完jquery源码,学习jquery书写思想,并留下笔记供他人参考。环境jquery源码地址:https://github.com/jquery/jquery/tree/3.0.0

m1213642578的专栏 7508

级联H桥构网型储能SVG系统设计与VSG控制策略研究

随着新能源渗透率不断提高,电力系统惯量和阻尼水平持续下降,传统跟网型控制策略在弱电网条件下的稳定性面临严峻挑战。构网型控制以电压源方式运行,能够为系统提供惯量和频率支撑,成为当前研究热点。本文针对10kV/10Mvar级联H桥构网型储能静止无功发生器(SVG),采用星形连接拓扑结构,设计了基于虚拟同步发电机(VSG)的构网型控制策略。文章从主电路拓扑设计、数学建模、VSG控制策略设计、调制策略、直流电压平衡控制、系统参数设计、仿真建模和硬件实现等八个方面展开系统论述,给出了完整的Simulink仿真模型~~

huanghm88的专栏 353

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

jquery源码解析

jquery源码剖析 概述 jquery 源码解析,参看代码是jquery 3.0版本 jquery.js 入口jQuery.js包含core.js,以及jquery的各类功能的组合,包括selector,ajax等等 然后将jquery对象导出到全局的jquery符号,以及$符号 core.js 确定jQuery对象是个函数,这个函数生成出来的数据是对象 建立jquery的pro

fishmei的博客 715

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

从源码到实践:jQuery PowerTip核心组件工作原理剖析

jQuery PowerTip是一款功能强大的jQuery工具提示插件,它提供了悬停意图测试、工具提示排队和复杂数据支持等高级功能。本文将深入剖析其核心组件的工作原理,帮助开发者从源码层面理解这款插件的设计思想与实现方式。 ## 核心架构概览 PowerTip采用模块化设计,主要由多个核心JavaScript文件构成,这些文件位于项目的`src`目录下: - **核心控制模块**:`core

gitblog_00093的博客 409

NTscan扫描工具

ntscan是一个扫描器,可以扫描没有密码和弱密码的共享,先到配置文件中填写猜测的用户名和密码,扫描过程中右侧出现的是扫描日志。

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

jquery core 源码分析

jQuery是一个非常优秀的JS库,与Prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发的实用角度出发,抛除了其它Lib中一些中看但不实用的东西,为开发者提供了优美短小而精悍的类库。其使用简单,文档丰富,而且性能高效,能极大地提高web系统的开发效率。因此可以说是web应用开发中最佳的Js辅助类库之一。大部分开发者正在抛弃Prototype,而选择Jquer...

蝶飞鸿云 志化燕雀(http://jxnuprk.cnblogs.com/) 156

jQuery 源码分析和使用心得 - core.js

http://www.ablesky.com/u/ps428b62 http://www.ablesky.com/u/st040a04 http://www.ablesky.com/u/hw208p42 http://www.ablesky.com/u/vt880q62 http://www.ablesky.com/u/oq800y64 http://www.ablesky.com/u/

95
上一篇: 标准程序员修炼-请尝试最原始的东西
下一篇: 程序员学习能力提升三要素
dw_java08
博客等级 码龄15年 122粉丝 66原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值