针对jQuery添加插件$.extend与 $.fn.extend两种方法分析

首先确定jQuery扩展插件的常用的两种方式
1.第一种方式: `$.extend()` 扩展jQuery本身的方法函数或者说静态函数 直接用 $.funName();调用
$.extend({
    funName:function(){
     //...
    }
})

2. 第二种方式:$.fn.extend 扩展jQuery对象的方法


针对第一种方式:
1.  先理解下面的写法
function test(){
}
//在js中函数其实是函数对象 那么可以通过函数名给test函数添加属性和方法
test.age = 1;
test.sex = 'male';
test.alert = function(){
alert('aaaa');
};
//直接使用 函数名.属性 函数名.方法名() 的方法调用相关的属性和方法
console.log(test.age);
console.log(test.alert());//
2. 与上面的相同道理
那么$.funName = function(){}这种方法也就不难理解了。直接把方法添加到jQuery构造函数上。那么使用函数.函数名的方式就可以直接调用相关方法。
3.  针对下面的这种写法
$.extend({
  funName:function(){
  //...
  }
})

jquery专门写了extend方法来实现将funName追加到jQuery上。
2019122707225210

 

————————————————————————————-

针对第二种情况:

针对jquery中源码的分析
2019122707244495

针对这一段源码
jQuery.fn = jQuery.prototpe = {};
jQuery.fn 其实指向了jQuery原型对象。
所以说我们通过$.fn.funName = function(){};方法添加插件扩展,本质上相当于$.prototype.funNanme = function(){};,向原型对象添加方法。
原型对象的属性与方法,只有通过对象才能访问,在这里是jQuery对象。所以在使用这类插件时,需要$('div').funName()调用。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/code/3051.html

发表评论

登录后才能评论