jQuery源码学习笔记(3)

extend篇

extend理解不够深入,需要更深入研究。

(function($){

// 类插件,用法:$.plus(2,10); $.reduce(2,10);

$.extend({

plus: function(n, m){

return n+m;

},

reduce:function(n,m){

return m-n;

}

});

// 实例插件,使用方法:$('.text').strLen();

$.fn.extend({

strLen: function(){

return $(this).text().length;

}

});

})(jQuery);

/**

* jQuery.extend(target, obj1, obj2);

* target待修改的对象

* obj1 待合并到第一个对象的对象

* obj2 可选,待合并到第一个对象的对象

*/

/*示例一:

var obj1 = {},

obj2 = {

name:'karry',

email:'karry@a.com',

tel:{

homeTel:'158255',

officeTel:'02112585'

}

};

obj1 = $.extend({}, obj1, obj2);

console.log('obj1', obj1); //{name:"karry", email:"karry@a.com", tel:{homeTel:"158255", officeTel:"02112585"}}

console.log('obj2', obj2); //{name:"karry", email:"karry@a.com", tel:{homeTel:"158255", officeTel:"02112585"}}

*/

// $.extend(object);扩展jQuery类本身,为类添加新的方法。

// $.fn.extend(object);给jQuery对象添加新的方法

// $.extend()用法:

//  1.合并多个对象 $.extend(obj1,obj2);

// 说明:obj1的属性被obj2覆盖,并且继承obj2的属性

// 2.深度嵌套对象 $.extend(true, obj1, ojb2);

// 说明:obj1的属性被obj2覆盖,并且继承obj2的属性,obj1内部属性的结构也被改变

/* 示例二:

var target = {};

var source = {

name: "abc",

address: "BJ",

age: 12,

job: {

one: 'english teacher',

two: 'designer'

}

};

var deep = {

name: "def",

sex: "male",

age: 14,

job: {

one: "student"

}

};

*/

/*测试一:

$.extend(target,source);

console.log('target ', target); //target {name:"abc",address:"BJ",age:12,job:{one:"english teacher",two:"designer"}}

console.log('source ', source); //不变

*/

/*测试二:

$.extend(source,deep);

console.log('source ', source); //source {name:"def",address:"BJ",age:14,sex:"male",job:{one:"student"}}

console.log('deep ', deep); //不变

*/

/*测试三:

var t = $.extend(true, source, deep);

console.log('t ', t); //t与source相等

console.log('source ', source); //source {name:"def",address:"BJ",age:14,sex:"male",job:{one:"student",two:"designer"}}

console.log('deep ', deep); //不变

*/

/*测试四:

var t = $.extend(true, deep, source);

console.log('t ', t); //t与source相等

console.log('source ', source); //不变

console.log('deep ', deep); //deep {name:"abc",address:"BJ",age:12,sex:"male",job:{one:"english teacher",two:"english teacher"}}

*/

/**

* 网上说extend第一个参数设置为true或false结果不同,经测,结果是一样的。???

* 总结:

* jQuery.fn.extend();jQuery对象添加新方法;

* jQuery.extend;对jQuery自身扩展,为jQuery添加新方法

* 如果参数为null或undefined,则该参数将被忽略

* 如果只为$.extend()指定了一个参数,则意味着参数target被省略。target就是jQuery对象本身

* 如果多个对象具有相同的属性,则后者会覆盖前者的属性值

* 改函数的返回值为参数target代表的对象

* jQuery中深度复制,是将除null,undefined,window对象,dom对象,通过继承创建的对象外的其它对象克隆后保存到target中;

* 之所以排除部分对象,一是考虑性能,

* 二是考虑复杂度(如dom、window对象,如果克隆复制,消耗过大,而通过继承实现的对象,复杂程度不可预知,因此也不进行深度复制);

* 深度与非深度复制区别是,深度复制的对象中如果有复杂属性值(如数组、函数、json对象等),那将会递归属性值的复制,合并后的对象修改属性值不影响原对象

*/

// jQuery深度复制 boolean=true;

// extend(boolean, dest, src1, src2, ...);

/* 示例一:

var resT = $.extend(true, {},

{name: "Tammy", age: 24, location: {city:"BJ",country: "USA"}},

{last: "Resig", age:22, location: {city:"NJ", country:"China", state: "HB"}}

);

console.log(resT);

*/

// jQuery深度复制 boolean=false;

/* 示例二:

var resF = $.extend(false, {},

{name: "Tammy", age: 24, location: {city:"BJ",country: "USA"}},

{last: "Resig", age:22, location: {city:"NJ", country:"China", state: "HB"}}

);

console.log(resF);

*/

/* 示例三:

var obj1 = {a: 'a', b: 'b'},

obj2 = {},

obj3 = {x: {xxx: 'oldValue', yyy: 'yyy'}, y: 'y'};

$.extend(true, obj1, obj3);// 第一个参数为true表示执行深度复制

console.log('1',obj1, obj3);

$.extend(obj2, obj3);// deep的默认值为false,表示前复制

console.log('2',obj2, obj3);

console.log('obj1.x.xxx', obj1.x.xxx);  // 输出"oldValue"

obj3.x.xxx = 'newVlaue';

console.log('重新赋值后obj3.x.xxx,', obj3.x.xxx); // 输出"newValue"

console.log('重新赋值后obj3.x.xxx --- ', obj1.x.xxx); // 输出"oldValue"

console.log('重新赋值后obj3.x.xxx || ', obj2.x.xxx); // 输出"newValue"

*/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • 在 JS 中有一些基本类型像是Number、String、Boolean,而对象就是像这样的东西{ name: '...
    tobAlier阅读 551评论 0 0
  • jQuery 中, $(document).ready()是什么意思? 当DOM准备就绪时,指定一个函数来执行。传...
    饥人谷_saybye阅读 216评论 0 0
  • 1.jQuery 中, $(document).ready()是什么意思? $(document).ready(h...
    Rising_suns阅读 243评论 0 0
  • 问答 1.Jquery 中, $(document).ready()是什么意思?和window.onload 的区...
    JunVincetHuo阅读 194评论 0 0
  • 今天是正阳暑假的第一天,上学时的闹铃一如即往的响起,我悄悄的给他关上了,因为比计划早了半个小时,想让他再多睡...
    正阳妈妈阅读 235评论 0 0