脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery.extend源码深层分析,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 在网站的开发中,经常会自己写一些jQuery插件来方便使用,其中自然少不了一个关键的方法->jquery.extend(),使用这个方法来扩展jquery对象。
那么今天就来讲讲这个函数的实现原理。
这个方法不仅仅可以实现插件,当然也有它本来的功能,扩展对象。like this:
var person2 = $.extend(person,{age:20},{sex:';male'});
//person.name='李四';
//person.age=20;
//person.sex='male';
person2与person扩展后是同一个对象
这个函数的第一个函数指的是要被扩充的对象(target),第二、第三个函数则是附加对象。通俗点将,jQuery将检查target中没有的属性,而在后面两个对象中却存在,那么这些属性将被添加到target中。
那么我们写插件又是怎么回事呢,我们只用了一个参数啊,像这样:
$.extend({
myExtendMethod:function(){
alert('这是我的方法');
}
});
像上面这个例子里,我们的$.extend方法中只有一个Object类型的参数,即:{myExtendMethod},那么这个时候怎么扩展,去扩展谁?target又是什么?当然要扩展的就是我们爱不释手的jQuery了!上一下源码:
复制代码
1 jQuery.extend = jQuery.fn.extend = function() {
2 var options, name, src, copy, copyIsArray, clone,
3 target = arguments[0] || {},
4 i = 1,
5 length = arguments.length,
6 deep = false;
7
8 // 不会满足,因为我们传进来的是Object
9 if ( typeof target === "boolean" ) {
10 deep = target;
11 target = arguments[1] || {};
12 // skip the boolean and the target
13 i = 2;
14 }
15
16 // 同样不会满足
17 if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
18 target = {};
19 }
20
21 // length为1,i也为1,所以会走这个条件
22 if ( length === i ) {
23 target = this;
24 --i;
25 }
26
27 for ( ; i < length; i++ ) {
28 // Only deal wITh non-null/undefined values
29 if ( (options = arguments[ i ]) != null ) {
30 // Extend the base object
31 for ( name in options ) {
32 src = target[ name ];
33 copy = options[ name ];
34
35 // Prevent never-ending loop
36 if ( target === copy ) {
37 continue;
38 }
39
40 // Recurse if we're merging plain objects or arrays
41 if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
42 if ( copyIsArray ) {
43 copyIsArray = false;
44 clone = src && jQuery.isArray(src) ? src : [];
45
46 } else {
47 clone = src && jQuery.isPlainObject(src) ? src : {};
48 }
49
50 // Never move original objects, clone them
51 target[ name ] = jQuery.extend( deep, clone, copy );
52
53 // Don't bring in undefined values
54 } else if ( copy !== undefined ) {
55 target[ name ] = copy;
56 }
57 }
58 }
59 }
60
61 // Return the modified object
62 return target;
63 };
复制代码
通过这段代码可以看到第一行的定义,$.extend和$.fn.extend的定义方法为同一个匿名函数,也就是他们是一个方法实现的,只是扩展的对象前者是jQuery,
后者是jQuery.fn =jQuery.PRototype也就是 jQuery实例( $('p') )。$.fn.extend()就是为jQuery添加实例方法。
ps:如果不了解js原型概念可以看我上一篇文章js创建对象,或者看其他园子的文章。
源码:jQuery.fn= jQuery.prototype
下面就来看看$.extend函数只有一个参数时怎么执行的。
看3行代码的target变量,指定了arguments[0]为它的值,按照刚刚我们定义的插件,就是{myExtendMethod:function(){...}}这个object;
继续往下看,看我21行的注释,this指的是jQuery对象,然后把jQuery赋给了target变量,并且把 i 变成了0 ;
然后进入for循环,在第55行代码的时候,会把我们的参数Object赋给jQuery对象,这样,就把myExtendMethod这个方法添加到jQuery对象上了。
复制代码
1 $.extend({
2 testMethod: function () {
3 alert(111);
4 }
5 });
6 $.fn.extend({
7 testMethod2: function () {
8 alert(222);
9 }
10 });
11 //调用扩展方法
12 $.testMethod();//弹出111
13 $("#List1").testMethod2();//弹出222
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery.extend源码深层分析全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery.extend源码深层分析所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。