extend篇
extend理解不夠深入，需要更深入研究。
(function($){
// 類插件，用法：$.plus(2,10); $.reduce(2,10);
$.extend({
plus: function(n, m){
return n+m;
},
reduce:function(n,m){
return m-n;
}
});
// 實(shí)例插件，使用方法：$('.text').strLen();
$.fn.extend({
strLen: function(){
return $(this).text().length;
}
});
})(jQuery);
/**
* jQuery.extend(target, obj1, obj2);
* target待修改的對象
* obj1 待合并到第一個(gè)對象的對象
* obj2 可選，待合并到第一個(gè)對象的對象
*/
/*示例一：
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);擴(kuò)展jQuery類本身，為類添加新的方法。
// $.fn.extend(object);給jQuery對象添加新的方法
// $.extend()用法：
//? 1.合并多個(gè)對象 $.extend(obj1,obj2);
// 說明：obj1的屬性被obj2覆蓋，并且繼承obj2的屬性
// 2.深度嵌套對象 $.extend(true, obj1, ojb2);
// 說明：obj1的屬性被obj2覆蓋，并且繼承obj2的屬性，obj1內(nèi)部屬性的結(jié)構(gòu)也被改變
/* 示例二：
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"}}
*/
/**
* 網(wǎng)上說extend第一個(gè)參數(shù)設(shè)置為true或false結(jié)果不同，經(jīng)測，結(jié)果是一樣的。？？？
* 總結(jié)：
* jQuery.fn.extend();jQuery對象添加新方法；
* jQuery.extend;對jQuery自身擴(kuò)展，為jQuery添加新方法
* 如果參數(shù)為null或undefined，則該參數(shù)將被忽略
* 如果只為$.extend()指定了一個(gè)參數(shù)，則意味著參數(shù)target被省略。target就是jQuery對象本身
* 如果多個(gè)對象具有相同的屬性，則后者會(huì)覆蓋前者的屬性值
* 改函數(shù)的返回值為參數(shù)target代表的對象
* jQuery中深度復(fù)制，是將除null,undefined,window對象,dom對象，通過繼承創(chuàng)建的對象外的其它對象克隆后保存到target中；
* 之所以排除部分對象，一是考慮性能，
* 二是考慮復(fù)雜度（如dom、window對象，如果克隆復(fù)制，消耗過大，而通過繼承實(shí)現(xiàn)的對象，復(fù)雜程度不可預(yù)知，因此也不進(jìn)行深度復(fù)制）；
* 深度與非深度復(fù)制區(qū)別是，深度復(fù)制的對象中如果有復(fù)雜屬性值（如數(shù)組、函數(shù)、json對象等），那將會(huì)遞歸屬性值的復(fù)制，合并后的對象修改屬性值不影響原對象
*/
// jQuery深度復(fù)制 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深度復(fù)制 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);// 第一個(gè)參數(shù)為true表示執(zhí)行深度復(fù)制
console.log('1',obj1, obj3);
$.extend(obj2, obj3);// deep的默認(rèn)值為false，表示前復(fù)制
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"
*/
