jquery源码分析之扩展函数 extend, $.extend

标签: jquery 源码 分析 | 发表时间:2012-04-14 21:49 | 作者:siren0203
出处:http://blog.csdn.net
声明:本文为 斯人原创,全部为作者一一分析得之,有不对的地方望赐教。
欢迎转载,转载请注明出处 。
本文地址: http://imsiren.com/archives/525

好久没写jquery源码的内容了..
jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于 extend函数
该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.
该函数 确实很强大,而且写的很优雅..
先来看看用法,有三种用法.
1、$.extend(dest,src1,src2,src3…);
2、$.extend(src)
3、$.extend(boolean,dest,src1,src2,src3…)
意思就是将 src1,src2,src3合并到dest对象中..
特别说一下第三种,第一个参数的意义就在于 是否对src1,src2等进行深copy.
那么什么是深copy呢?
var ret=$.extend(true,{},
{name:”siren”,about:{age:24,country:”beijing”}},
{from:”hebei”,birthday:{year:1988,month:02}}
);
如果第一个值为true,那么就对src1,src2进行深copy.
这个时候ret返回值就是 ret={name:”siren”,about:{age:24,country:”beijing”},from:”hebei”,birthday:{year:1988,month:02}};
发现 连 about和birthday的属性都一起copy到了dest里面.这就是深copy.
那么看看源码

o.extend = o.fn.extend = function() {
        var J = arguments[0] || {},
        H = 1,
        I = arguments.length,
        E = false,
        G;
        if (typeof J === "boolean") {
            E = J;
            J = arguments[1] || {};
            H = 2
        }
        if (typeof J !== "object" && !o.isFunction(J)) {
            J = {}
        }
        if (I == H) {
            J = this; --H
        }
        for (; H < I; H++) {
            if ((G = arguments[H]) != null) {
                for (var F in G) {
                    var K = J[F],
                    L = G[F];
                    if (J === L) {
                        continue
                    }
                    if (E && L && typeof L === "object" && !L.nodeType) {
                        J[F] = o.extend(E, K || (L.length != null ? [] : {}), L)
                    } else {
                        if (L !== g) {
                            J[F] = L
                        }
                    }
                }
            }
        }
        return J
    };


这是方法的定义部分.
我们逐行分析.
第2行 获取 extend传递进来的第一个参数..如果没有 初始化为一个对象.
4行获取参数的个数.
7行:如果第一个参数传递过来的是一个bool类型,这个时候用法就是我们前面提到的第三种.
12-14行:是一种规定,第一个参数要么是bool类型 要么是obj类型.当然在js里 obj类型也包括函数.
18-34行:进行复制.变量G是一个临时变量保存当前src的值.
比如执行 $.extend({},{a:10}); G就等于{a:10}
26-27行:如果进行深复制,src的属性也是一个对象并且不是一个element对象…这个时候再调用o.extend 递归进行复制.
否则
29-31行:L!==g. g是哪儿定义的?没定义 所以它等于undefined..
J[F] = L; F等于属性名称..L等于值.J就等于我们的dest.
怎么样明白了没有..这样我们也可以写出很牛的继承函数了哦..
我先来个简单的.

(function(){
    var s={};
    s.extend=function(){
        var a=arguments[0]||{},
            e=false, //是否是深拷贝
            h=0,  //参数个数
            j=arguments[1],
            n=arguments.length,g;
            if(typeof arguments[0]==='boolean'){
                e=arguments[0];
                h=1;
            };
            for(;h<n;h++){
                g=arguments[h];
                if(typeof g !=null){
                    for(var t in g){
                        if(e && g[t] && typeof g[t]=='object' && !g[t].nodeType){//深拷贝
                            o.extend(e,(j||{}),g[t]);
                        }else{
                            if(g[t]!=undefined){
                                j[t]=g[t]; //拷贝
                            }
                        }
                    }
                }
            }
            return j;
    };
    var c=s.extend({a:10},{name:'siren',t:{age:20,sex:1}})
    console.log(c)
})()

怎么样..是不是非常简单??
^.^


作者:siren0203 发表于2012-4-14 21:49:10 原文链接
阅读:22 评论:0 查看评论

相关 [jquery 源码 分析] 推荐:

jquery源码分析之扩展函数 extend, $.extend

- - CSDN博客推荐文章
声明:本文为 斯人原创,全部为作者一一分析得之,有不对的地方望赐教. 本文地址: http://imsiren.com/archives/525. 好久没写jquery源码的内容了. jquery的发展有很大因素是因为它非常易于扩展,究其原因就得益于 extend函数. 该函数是一个扩展函数…说是一个扩展函数,其实就是一个浅拷贝和深拷贝的函数而已.

阅读 jQuery 源码的18个惊喜

- - 外刊IT评论
我热爱 jQuery,且尽管我认为自己算是一名高级 JavaScript 开发者,我从来没有试过由头到尾把 jQuery 的源码看一遍,直到现在. 这里分享一些我一路下来学到的东西:. 注意:我使用  $.fn.method() 语法来表示调用一组匹配元素的方法. 比如当我说  $.fn.addClass,则表示 $('div').addClass('blue') 或者  $('a.active').addClass('in-use') 此类的用法.

nodejs上HTML分析利器node-jquery

- - 博客园_首页
      首先描述产生这篇随笔的场景:我需要获取项目在jenkins构建的最新Javascript Coverage显示在供管理层次查看的项目情况Report上,但是由于jenkins没有直接的API取得数据所需数据,所以我们只能从自建的容器发布Javascript Coverage数据API,供Report项目使用.

Tcmalloc源码分析(总括)

- cpy - 弯曲评论
Tcmalloc通过preload或者直接动态链接的方式对malloc等内存分配和释放函数进行截获并提供服务. Tcmalloc提供接口主要涵盖malloc.h的接口. 下面我将通过内存操作的基本流程,从分配开始到释放简单的分析tcmalloc的一些内部实现. 在tcmalloc中,内存分配malloc的入口为tc_malloc,new的入口为tc_new,相应的realloc,calloc,memalign,valloc等也有相应的入口.

不得不爱开源 Wijmo jQuery 插件集(2)-【准备工作】(附30种Theme演示和源码)

- - ITeye博客
由于我写这个系列文章的目的是让大家快速、简单的制作绚丽的 jQuery 站点. 第一,ITEYE里有许许多多的大牛. 大牛们可以忽略掉前面的部分内容,直接查看 Theme 展示. 刚刚入门的朋友可以细致的查看前面关于 介绍一些 jQuery 的基础知识,还有如何引用 Wijmo 资源文件的内容. 第二,上篇文章中讲到 Wijmo 内置了多种 Theme,为了满足大牛们的胃口,所以给出了 Wijmo 的 30 种 Theme 演示,并且提供了源码下载:.

Redis源码分析-内存分配

- gOODiDEA - NoSQLFan
本文转载自Day Day Up博客,文章对Redis的内存分配封装zmalloc库进行了分析,描述了Redis在内存分配和使用统计方面的各种细节和技巧. 原文链接:blog.ddup.us. Redis中到处都会进行内存分配操作. 为了屏蔽不同平台之间的差异,以及统计内存占用量等,Redis对内存分配函数进行了一层封装,程序中统一使用zmalloc,zfree一系列函数,位于zmalloc.h,zmalloc.c文中.

Redis源码分析系列文章

- gOODiDEA - NoSQLFan
Redis 的源码只有2万来行,个人觉得是一个非常合适的学习Unix 环境下C语言编程的实例教材. 而读源码,也对了解Redis内部结构很有帮助. 下面推荐的几篇文章,来自阿里巴巴云计算运维部的 hoterran 同学的个人博客,分别对Redis几个重要流程的源码进行了分析研究,对了解Redis内部结构很有帮助.

nginx源码分析--GDB调试

- - CSDN博客架构设计推荐文章
利用gdb[i]调试nginx[ii]和利用gdb调试其它程序没有两样,不过nginx可以是daemon程序,也可以以多进程运行,因此利用gdb调试和平常会有些许不一样. 当然,我们可以选择将nginx设置为非daemon模式并以单进程运行,而这需做如下设置即可:. master_process off; 这是第一种情况:.

jQuery实现页面内平滑回到顶部的过程分析及实现方法

- - 奶牛博客
jQuery可以实现一些很绚丽的网页效果,比如淡入淡出还有滑动效果等,它的动画自定义也很强大,animate()功能很出色,今天奶牛跟大家一起来看看那些网页中的回到顶部或者回到底部如何用jQuery来实现平滑滚动. 首先,我们需要知道,我们的滚动要到达的目的地,比如一个页面内的元素,我们要知道它距离窗口顶部的位置.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.