Nov 5, 2013 - javascript    No Comments

Ext.apply详解和实际应用

首先看一下Ext.apply的源码:

Ext.apply = function(o, c, defaults){  
    // no "this" reference for friendly out of scope calls  
    if(defaults){  
        Ext.apply(o, defaults);  
    }  
    if(o && c && typeof c == 'object'){  
        for(var p in c){  
            o[p] = c[p];  
        }  
    }  
    return o;  
};

这是非常经典的对象浅复制的函数。第一个参数o是目标对象,第二个参数c是源对象,第三个是可选参数defaults,表示给目标对象o的一个默认值。整个函数就是会把源对象c和可选参数defaults的所有属性一股脑儿的复制给目标对象c。(如果遇到对象o已有的属性则会覆盖。所以会先把defaults的所有属性都复制给o,然后再把c所有的属性复制给0。)

是不是有点绕,还是来看例子简单明了。

现在ext.js的功能是越来越全面,文件也是越来越多,越来越臃肿。下载最新的ext-4.2.1.883解压后居然有375M!!!!即便是单独下载一个ext-all.js也要1.5M!!!有必要吗?自己写一个,以后用的着。

_v = {}

_v.apply = function(o, c, defaults) {
	if (defaults) {
		_v.apply(o, defaults);
	}
	if (o && c && typeof c == 'object') {
		for (var p in c) {
			o[p] = c[p];
		}
	}
	return o;
}

然后创建对象:

var HKT48 = {
	center1: "指原莉乃",
	center2: "多田爱佳",
	f1: function() {
		alert(this.center1);
	}
};
var AKB48 = new Object();
AKB48.center1 = "岛崎遥香";
_v.apply(AKB48, HKT48);
AKB48.f1();//指原莉乃

可以看到AKB48的center1被HKT48的center1覆盖了!(宅姐最高)

再加入defaults参数:

_v.apply(AKB48, HKT48, {
	center3: "田中菜津美"
});
alert(AKB48.center3);//田中菜津美

靠,AKB48的center3变成了小美女田中菜津美!!

再稍微改一下代码,我们让小美女田中菜津美继续上位,让她做center1试试看。

_v.apply(AKB48, HKT48, {
	center1: "田中菜津美"
});
alert(AKB48.center1);//指原莉乃

哼哼,还是宅姐强大啊,丝毫不受defaults参数的影响!

怎么样,是不是很好理解!
PS:如果你是AKB48的脑残粉,那就更好理解了。

最后附上4位Idol的Tumblr link:指原莉乃多田爱佳岛崎遥香田中菜津美

等等,还有最后一件事没交代,我们写这个_v干嘛?直接看代码:

_v = {}

_v.apply = function(o, c, defaults) {
	if (defaults) {
		_v.apply(o, defaults);
	}
	if (o && c && typeof c == 'object') {
		for (var p in c) {
			o[p] = c[p];
		}
	}
	return o;
}

_v.apply(_v, {
	f1: function(item) {
		alert("1: " + item);
	},
	f2: function(item) {
		alert("2: " + item);
	},
	f3: function(item) {
		alert("3: " + item);
	},
})

_v.f1("高端");
_v.f2("大气");
_v.f3("上档次");

这代码是不是很高端大气上档次?而且妈妈再也不用担心我的命名和别人重复了!

Got anything to say? Go ahead and leave a comment!