jquery源码解析:代码结构分析
本系列是针对jquery2.0.3版本进行的讲解。此版本不支持IE8及以下版本。
(function(){
(21, 94) 定义了一些变量和函数, jQuery = function(){};
(96,283) 给jQuery对象添加一些属性和方法(实例方法,通过$("div")这类的jQuery实例对象来调用)
(285,347) extend : jQuery的继承方法
(349,817) jQuery.extend():扩展一些工具方法(静态方法,直接通过$来调用的,比如:$.trim)
(877,2856) Sizzle:复杂选择器的实现。比如:$("ul li + p ");
(2880,3042) Callbacks:回调对象-》函数的统一管理。
(3043,3183) Deferred:延迟对象-》对异步的统一管理
(3184,3295) support:功能检测
(3308,3652) data(): 数据缓存
(3653,3797) queue():队列管理,dequeue.
(3803,4299) attr(),prop(),val(),addClass(),对元素属性的操作
(4300,5128) on(),trigger() 事件操作的相关方法
(5140,6057) DOM操作:添加,删除,获取(next),包装(wrap),Dom筛选
(6058,6620) css():样式的操作
(6621,7854) 提交的数据和ajax的操作:load,ajax
(7855,8584) animate():运动的操作。 show,hide,fadeIn。
(8585,8792) offset(),位置和尺寸的一些方法
(8804,8821) jQuery支持模块化的模式
(8826) window.jQuery = window.$ = jQuery;
})()
(function(window,undefined){
//window局部化,1.查找速度快。2.利于代码压缩,可以把window压缩成a。
//undefined,有些浏览器的undefined可以被修改,为了防止undefined被修改,所以传了一个undefined给了jQuery
core_strundefined = typeof undefined;
//为了防止ie9以及以下版本,判定一个xmlNode方法为undefined时出问题。
//比如:a.b== undefined(a为xmlNode,并且在IE9以下浏览器下,b不存在a中,出问题); typeof a.b== "undefined"(没问题)
class2type = {};
//类型判断,里面存的是{"[object String]":"string",....}。先去了解object.prototype.toString.call()
core_version = "2.0.3";
core_concat = [].concat; //缓存数组方法以及对象方法。利于压缩。可以对core_concat压缩。
......
var rootjQuery,
_jQuery = window.jQuery, //以防在引入jQuery库时,已经有其他库引用jQuery和$标示符了。
_$ = window.$, //因此先把他们保存起来。(prototype.js就引用了$标识)
jQuery = function(selector, context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
......
window.jQuery = window.$ = jQuery;
})(window)
这里我要详细的讲下new jQuery.fn.init(selector,context,rootjQuery);我看了太多别人写的jQuery源码解析,大多写的不详细,导致刚开始看的时候,没看懂。
我们平常新建一个jQuery对象:$("div"),jQuery("div"),调用的就是new jQuery.fn.init(selector,context,rootjQuery);
很多人会有疑问,怎么new一个init,就是jQuery对象。除非init.prototype 就是jQuery.prototype。
大家可以在283行看到这样一句话:jQuery.fn.init.prototype = jQuery.fn;96行看到这样一句话:jQuery.fn = jQuery.prototype = {}
印证了上面的观点。jQuery.fn.init.prototype 就是jQuery.prototype。
当你们去看init方法的时候,会发现它返回的是this,this指的就是new出来的jQuery对象,而大家都知道,当访问一个实例对象的方法和属性时,如果实例对象没有,那么就去找原型对象,因此jQuery.prototype对象中的属性和方法,都可以通过new 出来的jQuery实例对象访问。也就是$("div")这种jQuery的实例对象可以调用各种在jQuery.prototype对象中的属性和方法。
而对于这种静态属性和方法,$.trim,jQuery.trim,是在构造函数的属性上定义的,跟实例对象没有什么关系。举个例子:function Person(){},Person.prototype={};
new Person()就是实例对象,它可以调用Person.prototype中的所有属性和方法。而Person.trim = function(){},就是静态方法,只能通过构造函数Person.trim才能进行调用。
有一个知识点,-webkit-margin-left ->js访问时,会转化成webkitMarginLeft,而-ms-margin-left会转换成MsMarginLeft。
加油!
转载于:https://www.cnblogs.com/chaojidan/p/4127380.html
jquery源码解析:代码结构分析相关推荐
- jQuery源码解析(架构与依赖模块)
jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1. ...
- jQuery源码解析(架构与依赖模块)第一章 理解架构
1-1 jQuery设计理念 引用百科的介绍: jQuery是继prototype之后又一个优秀的Javascript框架.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, F ...
- JQuery 源码解析资料
2019独角兽企业重金招聘Python工程师标准>>> jQuery源码分析系列目录 jQuery源码解读-理解架构 jQuery源码解析(架构与依赖模块) jQuery v1.10 ...
- jquery源码解析:jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- jQuery源码解析之on事件绑定
本文采用的jQuery源码为jquery-3.2.1.js jquery的on方法用来在选定的元素上绑定一个或多个事件处理函数. 当参数selector存在时,通常会用来对已经存在的元素或将来即将添加 ...
- 浅谈jquery源码解析
本文主要是针对jquery v3.x版本来描述的,将从以下几个方面谈谈我对jquery的认识, 总体架构 $与$.fn jQuery.fn.init (重要) jQuery.extend 与jQ ...
- jQuery源码解析之position()
position() 作用: 返回被选元素相对于父元素(parent)的偏移坐标 使用: 直接调用$().position()即可,该方法没有 arguments(参数对象) <body> ...
- jQuery源码解析(5)—— Animation动画
闲话 jQuery的动画机制有800行, 虽然不如样式的1300行,难度上却是不减.由于事前不了解animate接口的细节使用规则,看代码期间吃了很多苦头,尤其是深恶痛绝的defaultPrefilt ...
最新文章
- 打包图片上传cdn_紧抓5G新时代机遇 又拍云创新发展CDN行业
- 关于笔记本电脑玩一些游戏不能全屏的注册表修改法
- 一起来看流星雨剧情简介/剧情介绍/剧情分集介绍第三十五集
- 如何将OpenCV中的Mat类绑定为OpenGL中的纹理
- 程序员的节日怎么过?
- c++静态成员变量成员函数
- HTTP状态码415 springboot项目
- 【报告分享】华为2019年财报.pdf(附下载链接)
- windows下数据库mysql8.0安装
- 生信c语言面试题,c语言入门 java
- angularJS使用编写KindEditor,UEidtor,jQuery指令,双重绑定
- 【转】hadoop2.6 配置lzo压缩
- 我所认为的KVC和KVO
- html 实现页面加载进度,网页加载进度条实现方案
- Hibernate二级缓存
- css中自适应字体问题等
- 248 中心对称数 III
- 毕设过程中使用WPS的自定义生成目录中混入图片等非相关元素
- C# dynamic是什么
- 苹果照片未删却不见了_删掉的照片怎样找回?教你打开手机这个功能,可以立马恢复...
热门文章
- 云合影程序_活动回顾丨阿里云ACE同城会开发者云workshop圆满落幕
- 雷电模拟器多开ip修改器_模拟器怎样才能更换不同ip地址?
- Eugeny and Array(水题,注意题目描述即可)
- 【Luogu3383】【模板】线性筛素数
- 查询score中选学多门课程的同学中分数为非最高分成绩的记录。
- 再起航,我的学习笔记之JavaScript设计模式23(中介者模式)
- 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题...
- 爬取京东商品分类和链接
- centos7编译安装pure-ftpd-1.0.42
- Java Web学习(二)数据加密