源码分析-----整体架构

1.首先关于jQuery的闭包结构

（function(window,undefined){//jquery代码jquery=function(selector,context){return new jQuery.fn.init(selector,context,rootjQuery);};jQuery.fn=jQuery.prototype={init:function(selector,context,rootjQuery){//....};}jquery.fn.init.prototype=jQuery.fn;window.jQuery=window.$=jQuery;}）(window);

为了不造成全局污染和变量冲突，整个实现都包含在一个立即执行的闭包环境里，只在后面暴露了$和jQuery两个变量.

2.jquery实例化对象
在使用$(””),时，其内部调用的是return new jQuery.fn.init(selector,context),其次jquery.fn.init的prototype属性设置为jQuery.fn;所以new jquery.fn.init()生成的对象就能访问到jQuery.fn上的所有原型方法。

3.关于jQuery方法的扩展
extend是jquery中的很重要的一个方法。jquery内部用来扩展静态方法和实例方法。jQuery.extend 是扩展jQuery本身，为类添加新的静态方法。jQuery.fn.extend是给jQuery对象添加实例方法，但同时jQuery.fn=jQuery.prototype，所以实例化的对象都能使用。jQuery.extend扩展的静态方法可以通过.xxx来进行调用，jQuery.fn.extend扩展的实例方法可以通过().xxx来调用。
1）在 jQuery.extend() 中，this 的指向是 jQuery 对象(或者说是 jQuery 类)，所以这里扩展在 jQuery 上；且上下文指向是jQuery构造器
2）在 jQuery.fn.extend() 中，this 的指向是 fn 对象，前面有提到 jQuery.fn = jQuery.prototype ，也就是这里增加的是原型方法，也就是对象方法。

关于JQuery源码解析相关推荐

jquery源码解析：代码结构分析
本系列是针对jquery2.0.3版本进行的讲解.此版本不支持IE8及以下版本. (function(){ (21, 94) 定义了一些变量和函数, jQuery = function() ...
JQuery 源码解析资料
2019独角兽企业重金招聘Python工程师标准>>> jQuery源码分析系列目录 jQuery源码解读-理解架构 jQuery源码解析(架构与依赖模块) jQuery v1.10 ...
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源码解析：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 ...

关于JQuery源码解析

源码分析-----整体架构

关于JQuery源码解析相关推荐

最新文章

热门文章