jQuery.extend源码深层分析

  在网站的开发中,经常会自己写一些jQuery插件来方便使用,其中自然少不了一个关键的方法->jQuery.extend(),使用这个方法来扩展jQuery对象。

那么今天就来讲讲这个函数的实现原理。

  这个方法不仅仅可以实现插件,当然也有它本来的功能,扩展对象。like this:

var person = {name:‘李四‘};
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实例(  $(‘div‘)  )。$.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
时间: 2024-10-08 05:50:37

jQuery.extend源码深层分析的相关文章

jQuery.extend() 源码分析

jQuery.extend() 方法 可以合并对象 深拷贝与浅拷贝 源码分析: 概述:  1. 首先定义变量 options:保存每次循环遍历的arguments[i] , name: 保存循环遍历对象的key值 src:保存目标对象target的属性 copy: 保存合并对象的属性 copyIsArray: 如果copy是数组,用copyIsArray保存 clone:如果目标对象是数组,用clone保存. target:目标对象 deep: boolean值,判断是否是深拷贝 2. 然后判断

jQuery.extend()源码解读

// extend方法为jQuery对象和init对象的prototype扩展方法// 同时具有独立的扩展普通对象的功能jQuery.extend = jQuery.fn.extend = function() { /* *target被扩展的对象 *length参数的数量 *deep是否深度操作 */ var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = ar

jquery extend源码解析

$.extend(obj1,0bj2,{"name":"s","age":22}) //target 要拷贝到哪个对象上 // i 要执行拷贝的次数 // length 要拷贝的参数的长度 // name 对象参数中属性值 // options 对象参数 // clone 深度拷贝时重名对象属性的拷贝 // target 要拓展的对象 jQuery.extend = jQuery.fn.extend = function() { var src,

jQuery源码 框架分析

每一个框架都有一个核心,所有的结构都是基于这个核心之上,结构建立好了之后,剩下的就是功能的堆砌. jQuery的核心就是从HTML文档中匹配元素并对其操作. 就跟一座大楼一样,让我们一步一步了解这座大厦的基石和结构. 1.构造函数 2.链式语法 3.选择器 4.扩展性  一.构造函数 我们知道类是面向对象编程的一个重要概念,它是对事物的最高抽象,它是一个模型.通过实例化一个类,我们可以创建一个实例. javascript本身没有类的概念,只有原型prototype,prototype是什么呢?它

jQuery.attributes源码分析(attr/prop/val/class)

回顾 有了之前的几篇对于jQuery.attributes相关的研究,是时候分析jQuery.attr的源码了 Javascript中的attribute和property分析 attribute和property兼容性分析 jQuery.access源码分析 结构 jQuery.fn.extend({ attr: function (name, value) { }, removeAttr: function (name) { }, prop: function (name, value) {

jQuery.access源码分析

基本理解 jQuery.attr是jQuery.attr,jQuery.prop,jQuery.css提供底层支持,jQuery里一个比较有特色的地方就是函数的重载, 比如attr,有如下几种重载 $('#box').attr('title') $('#box').attr('title','标题') $('#box').attr({title:'标题',data-menu-toggle:'dropdown'}) $('#box').attr('title',function () {....}

jQuery选择器源码分析和easyui核心分析

写在选择器源码分析之前 这里指对1.7.2版本的源码分析,更高版本添加了更多代码. 整个jQuery的代码是写在一个(function(window, undefined){})(window);这样一个闭包里.请思考,为什么要这样做? 将其写在一个闭包函数里,并传入window直接运行的好处有三: 1,统一命名空间,防止变量的污染:  2,将window作为参数传入函数,在函数里调用window的时候,就不用再去找外层的对象,可以提高效率 : 3,undefined并不是javascript的

jQuery.Deferred 源码分析

作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 1 引子 观察者模式是我们日常开发中经常用的模式.这个模式由两个主要部分组成:发布者和观察者.通过观察者模式,实现发布者和观察者的解耦. 发布者主要负责发布内容,观察者主要负责监听发布者发布的内容,并作出相应的动作.和我们平时订阅期刊一样,cnki会维护一个订阅者列表,有期刊被发布出来时,cnki会将这些期刊推送给订阅者.从程序角度来说,订阅者就是一堆的方法,发布者的推送内容的动作就是依次调用订阅者列表中的

ajaxFileupload的源码思路分析

? 1 ajaxfileupload源码: jQuery.extend({ //创建一个临时的iframe; createUploadIframe: function(id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="posit