jQuery的核心原理

jQuery的具体实现

为了避免变量的全局污染,在声明jQuery这个类的时候把代码都包含在了一个自执行函数构造的闭包中,然后将命名空间暴露出来,如$和jQuery

jQuery是一个自定义的类,在这个类和这个类的原型上都定义了很多属性供我们调用

为了实现jQuery的链式调用,在jQuery中必须返回一个jQuery的实例,但是如果直接在函数中return new jQuery 则会造成无限递归,所以jQuery在实现的过程中使用了如下方式

jQuery.fn = jQuery.prototype = {
		toArray: function() {
			return slice.call( this );
		},
		get:function(){
			...
		},
		...
}

首先定义了一个jQuery.fn,且将jQuery的原型地址指向jQuery.fn,并在jQuery的原型上定义了很多方法,等同于在jQuery的原型和jQuery.fn上同时定义

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

后面又在jQuery.fn上新增了一个init的属性,因为jQuery.fn和jQuery的原型指向了同一个空间地址,所以就是等同于在jQuery的原型上新增了一个init属性,且在上面新增了很多方法

init.prototype = jQuery.fn;

然后将init的原型地址指向了jQuery.fn也就是指向了jQuery的原型地址

所以init的实例在调用方法时是通过原型链找到的jQuery原型上的方法进行使用,也可以说init的实例就是jQuery的实例

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

在jQuery的内部return了一个jQuery.fn.init的实例,等同于return了一个init的实例===return了一个jQuery的实例,使用这种方式实现了jQuery的链式调用

实例化方法存在这么一个关系链 :

① jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;

② new jQuery.fn.init() 相当于 new jQuery() ;

最后将jQuery和$添加到window的属性上,所以在执行的时候不需要new就可以创建一个jquery的实例在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值