首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 软件管理 > 软件开发 >

javaScript设计形式中的掺元类

2012-07-01 
javaScript设计模式中的掺元类今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方面也是习惯

javaScript设计模式中的掺元类

今天虽然周末但是没有撒懒,因为媳妇要上班所以我得送她下去,一方面也是习惯了早起,睡不住。好久没有发表文章了,今天特意上来发表发表文章 ,呵呵。

以下是javascript的掺元类的一个demo,什么是掺元类呢,据我的理解掺元类你可以把他当做c里面的头文件,或者是java中的基类,然后呢其他的类想用这个类里面的方法,那么就直接继承它就可以了,但是这里的继承又不是java中的那种继承,其实更应该理解为对基类中方法的copy。下面上代码看看:

首先我们写一个User类,如下

function User(name,age){
??? this.name = name;
??? this.age = age;
};
User.prototype = {
??? setName : function(n){
??? ??? this.name = n;
??? },
??? getName : function() {
??? ??? return this.name;
??? },
??? setAge : function(age){
??? ??? this.age = age;
??? },
??? getAge : function(){
??? ??? return this.age;
??? }
};

然后呢再写一个掺元类,如下

var Mixin = function(){};
Mixin.prototype = {
?? ?serialize : function(){//写这个方法的意图是为了查看类继承了掺元类后的结构
?? ???? var output = [];
?? ???? for(v in this){?? ?//这里的this是指当前类,v代表中的中的属性(包含方法),this[v]表示属性的value
?? ???? ??? output.push(v+':'+this[v]);
?? ???? }
?? ???? return output.join(",");?? ?//这句话的意思是序列化继承后的当前类
?? ?},
?? ?name_age : function(){
?? ???? return this.name+"_"+this.age;
?? ?},
?? ?bb : function(){}
};

当然了掺元类本身不具备copy的功能,我们必须要写一个使用掺元类的方法的方法,如下

//copy掺元类里面所有的方法

function augment2(re,giv){
??? for(mth in giv.prototype){
??? ??? if(!re.prototype[mth]){
??? ??? ??? re.prototype[mth] = giv.prototype[mth];
??? ??? }
??? }
};

/
function augment(re,giv){

//if的意思是根据自己的意愿copy需要的方法,而不是所有的
??? if(typeof(arguments[2]) == 'object'){//这里要判断第三个参数是否为数组 这里不严谨大家自己改下
??? ??? for(var i=0;i<arguments[2].length;i++){
??? ??? ??? re.prototype[arguments[2][i]] = giv.prototype[arguments[2][i]];
??? ??? }
??? }else{

//这里的意思是如果没有第三个参数,或者是其他的那么直接copy掺元类里面的所有的方法到当前类
??? ??? augment2(re,giv);
??? }
}

//这句话很重要,这句话的意思是继承掺元类,如果丢了这句话那么就无法使用掺元类里面的方法,这里只copy掺元类里面的serialize跟name_age方法

augment(User,Mixin,['serialize','name_age']);

如果写copy所有的方法那么就这样写

augment(User,Mixin);

接着我们实例化一个User对象

var au = new User('信科',23);

然后我们就可以调用掺元类里面的方法了

alert(au.serialize());

大家现在就可以观察效果了

希望大家多多指教,可能有的地方表示不准确,希望大家见谅!

?

?

热点排行