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"
*/