这篇分析下它的extend方法。如下
1
2
3
|
jQuery.extend = jQuery.fn.extend = function () {
...
}; |
我们可以用$.extend去扩展自定义的对象,如
1
2
3
|
var myself = {name:jack};
$.extend(myself, {setName: function (n){ this .name=n;} });
myself.setName( "tom" );
|
通过$.extend为对象myself添加了setName方法。但这里主要讨论$.extend如何构建jQuery库的。不知注意到上面代码中jQuery.extend和jQuery.fn.extend是同一个函数。我们浏览下jQuery库,发现有些方法是通过调用jQuery.extend扩展的,有些则是通过调用jQuery.fn.extend扩展的。
下面分别讨论:
1,通过jQuery.extend扩展
我们知道jQuery.extend中的jQuery类型是function,即typeof jQuery值为字符串“function”。如果把jQuery当成一个类,jQuery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。即jQuery.extend(...),jQuery又被赋值给$。因此我们更习惯$.extend(...)。
源码中直接调用jQuery.extend方法,只传一个参数。如下
1
2
3
4
5
6
7
8
9
|
jQuery.extend({ noConflict: function ( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
...
}); |
我们知道extend中如果只传一个参数,那么将执行该句
1
2
3
4
|
if ( length === i ) {
target = this ;
--i;
} |
即扩展自己,而这里的this则是function jQuery。也就是说给function jQuery添加了许多静态方法,这些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$("#id").xx。也许下面这个例子更容易理解
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function fun(){} //定义一个类(函数)
//为该类(函数)添加一个静态方法extend fun.extend= function (obj){
for ( var a in obj)
this [a] = obj[a]; //注意:这里的tihs即fun
} //调用extend为该类添加了静态属性name,静态方法method1 fun.extend({name: "fun" ,method1: function (){}});
//输出name,prototype,extend,method1 console.dir(fun) |
因此,jQuery中的isFunction, isArray, isWindow等都是静态方法,只能通过$.isFunction, $.isArray, $.Window引用。而不能通过$("...").isFuction, $("...").isArray, $("...").isWindow方式引用。
2,通过jQuery.fn.extend扩展
jQuery.fn等于jQuery.prototype,也就是说给function jQuery的原型(prototype)上挂了个extend方法。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行
1
2
3
4
|
if ( length === i ) {
target = this ;
--i;
} |
而这时的this则是jQuery.prototype(第一条提到的则是jQuery函数自身)。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。该函数会new一个jQuery(见上一篇jQuery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function fun(){} //定义一个类(函数)
//给该类原型上添加一个方法extned fun.prototype.extend = function (obj){
for ( var a in obj)
this [a] = obj[a]; //注意:这里的this即是fun.prototype
} //调用extend方法给fun.prototype上添加属性,方法 fun.prototype.extend({name: "fun2" ,method1: function (){}})
//输出name,extend,method1 console.dir( new fun())
|
因此扩展的属性或方法都添加到jQuery对象上了。如bind, one, unbind等可以通过$("...").bind, $("...").one, $("...").unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。
jQuery与Prototype一样都是通过extend方法扩展出整个库的。相对来说jQuery的扩展方式更难理解一些。
总结如下:
- jQuery.extend({...})是给function jQuery添加静态属性或方法
- jQuery().extend({...})是给jQuery对象添加属性或方法
相关推荐
jQuery.extend 函数详解 Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。
原生js实现jquery $.extend方法 通过遍历对象属性来实现
jQuery extend()详解及简单实例 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用...
介绍了jQuery extend 的简单实例,有需要的朋友可以可以参考一下
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...
jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法.
1.$.extend({},defaults, options) 这样做的目的是为了保护包默认参数。也就是defaults里面的参数。 做法是将一个新的空对象({})做为$.extend的第一个参数,defaults和用户传递的参数对象紧随其后,这样做的好处是...
用法一: $.extend({}) ,为jQuery类添加方法,可以理解为扩展静态方法 用法二:$.fn.extend({}) 插件,对jQuery.prototype进行扩展,提到插件那么就得说一下另一种方法$.fn.method = function(){} 1. $.fn....
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,dest是要整合的空间可以使{} 或者不写 src是一个JSON表达式表示的javascript对象…. 因此里面可以添加方法属性等等… 我么通过不同...
jQuery:jQuery.extend函数详解
jquery.validate.extend.js
extend()函数是jQuery的基础函数之一,作用是扩展现有的对象
1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({ add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加...
jQuery_extend 函数详解
jquery $.fn.extend 引用事件
NULL 博文链接:https://gghaomm.iteye.com/blog/1746699
NULL 博文链接:https://bijian1013.iteye.com/blog/2255035
jQuery为开发插件提拱了两个方法,分别是: 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...