- jQuery方法的调用方式:
//一般是这两种
$('div').html();
$.ajax();
从jQuery的使用方法来猜测它的编写方式。
jQuery插件方式如何编写?
-
第一步:搭Query插件框架,找到我们的目的。
思路:通过立即执行函数内生成Query的构造函数然后赋值给我们的全局对象内,然后在全局对象下使用$或yQuery绑定原生dom对象,这样我们通过yQuery绑定的原生dom对象都能使用yQuery.prototype下的方法。
注:不直接在全局对象下创建yQuery对象是为了防止压缩代码时重命名window导致错误。
现象:现在我们在浏览器下验证真有$这个函数,并且可以通过构造函数传递原生对象。但写法不是$('div')。 -
第二步: 试试return,我们需要在全局下直接返回一个对象
思路:我们需要直接返回一个对象,试着在yQuery里return一下看看结果。
现象:真的在全局下返回了一个对象,还调用到了我们想要的方法,但是我们只是返回了yQuery.prototype。
yQuery.prototype是一个公共区域,绑定任何元素dom对象返回的都是同样一个东西,离结果很远。
-
第三步:这次我们不返回公共区域,返回公共区域下的对象
思路:得到了个对象,但没返回值,试试this。
-
第四步:加上this看看
思路:试一下this看看返回了什么,this返回的是函数的调用者。
现象:结果很眼熟,好像就是yQuery.prototype,和第二步的结果一样。。但我们好像更接近了目标。 -
第五步:this返回的是函数的调用者,但this在构造函数里返回的是一个实例
思路:我们想做的应该是后者,这样我们每次绑定原生dom的时候返回的都是一个实例,他们相互独立但又使用prototype下的公共区域。
现象:这一步不仅加了new,还加了红框里的两句话,我们需要一张图来解释
看上图前我们先了解下我们的目的有两个:1创建各不相同的实例对象(完成)2使用我们yQuery.prototype下的公共方法。
解释:通过原型链和继承的知识我们知道我们新创建的这个实例对象的__prto__
指向的是他的构造函数下的prototype,也就是yQuery.prototype.init.prototype,是一个null的空对象。而我们需要的方法在yQuery.prototype,那么我们通过yQuery.prototype.init.prototype = yQuery.prototype使我们新创建的实例对象可以拥有yQuery.prototype下的方法。并且为了内部正确我们constructor: yQuery让它指向正确。
-
jQuery插件的方法是如何实现的?
通过上面的步骤我们完成了jQuery插件核心的构成,但jQuery有两种使用方法$('div').addClass()和$.ajax(),这两类方法分布的位置是不一样的
实现: 在内部定义一个extend方法,作用是确定对象是否存在,如果不存在就存入extend方法的调用者。这样我们就只需要在yQuery.prototype里留下初始的构造函数,公共方法都放在yQuery.prototype.extend里面
- jQuery如何与其他插件防止冲突?
方法一:jQuery.noConflict();
然后就不用$
方法二:把jQuery传递到函数内使用$
noConflict()的原理:这里的_$是个临时变量并且为undefined,当执行时window下的$就被赋值为undefined了,window下就jQuery的$就失效了
- jQuery链式调用是什么?是如何实现的?
- 链式调用:$('div').addClass().html(),原理很简单,就是在我们的方法的最后return this。这里的this是调用此方法的对象$('div').addClass(),addClass()里return this出了$('div')对象,然后继续调用html()方法。
本博客版权归 本人和饥人谷所有,转载需说明来源