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”

*/

    原文作者:一捆稻草
    原文地址: https://www.jianshu.com/p/bac9c9d943bd
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞