JS扩展类，克隆对象与混合类实例分析
本文实例讲述了JS扩展类，克隆对象与混合类。分享给大家供大家参考，具体如下：
1.类扩展
/*EditInPlaceField类*/
/*扩展函数*/
functionextend(subClass,superClass){
varF=function(){};
F.prototype=superClass.prototype;
subClass.prototype=newF();
subClass.prototype.constructor=subClass;
subClass.superclass=superClass.prototype;
if(superClass.prototype.constructor==Object.prototype.constructor){
superClass.prototype.constructor=superClass;
}
}
functionEditInPlaceField(id,parent,value){//构造函数
this.id=id;
this.value=value||'defaultvalue';
this.parentElement=parent;
this.createElements(this.id);
this.attachEvents();
};
EditInPlaceField.prototype={
createElements:function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('span');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('input');
this.fieldElement.type='text';
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
},
attachEvents:function(){
varthat=this;
addEvent(this.staticElement,'click',function(){that.convertToEditable();});
addEvent(this.saveButton,'click',function(){that.save();});
addEvent(this.cancelButton,'click',function(){that.cancel();});
},
convertToEditable:function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='inline';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
},
save:function(){
this.value=this.getValue();
varthat=this;
varcallback={
success:function(){that.convertToText();},
failure:function(){alert('Errorsavingvalue.');}
};
ajaxRequest('GET','save.php?id='+this.id+'&value='+this.value,callback);
},
cancel:function(){
this.convertToText();
},
convertToText:function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='inline';
this.setValue(this.value);
},
setValue:function(value){
this.fieldElement.value=value;
this.staticElement.innerHTML=value;
},
getValue:function(){
returnthis.fieldElement.value;
}
};
vartitleClassical=newEditInPlaceField('titleClassical',$('doc'),'TitleHere');
varcurrentTitleText=titleClassical.getValue();
/*EditInPlaceArea类*/
functionEditInPlaceArea(id,parent,value){
EditInPlaceArea.superclass.constructor.call(this,id,parent,value);
};
extend(EditInPlaceArea,EditInPlaceField);
//Overridecertainmethods.
EditInPlaceArea.prototype.createElements=function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('p');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('textarea');
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
};
EditInPlaceArea.prototype.convertToEditable=function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='block';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
};
EditInPlaceArea.prototype.convertToText=function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='block';
this.setValue(this.value);
};
2.对象克隆
/*EditInPlaceField对象*/
/*克隆函数*/
functionclone(object){
functionF(){}
F.prototype=object;
returnnewF;
}
varEditInPlaceField={
configure:function(id,parent,value){
this.id=id;
this.value=value||'defaultvalue';
this.parentElement=parent;
this.createElements(this.id);
this.attachEvents();
},
createElements:function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('span');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('input');
this.fieldElement.type='text';
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
},
attachEvents:function(){
varthat=this;
addEvent(this.staticElement,'click',function(){that.convertToEditable();});
addEvent(this.saveButton,'click',function(){that.save();});
addEvent(this.cancelButton,'click',function(){that.cancel();});
},
convertToEditable:function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='inline';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
},
save:function(){
this.value=this.getValue();
varthat=this;
varcallback={
success:function(){that.convertToText();},
failure:function(){alert('Errorsavingvalue.');}
};
ajaxRequest('GET','save.php?id='+this.id+'&value='+this.value,callback);
},
cancel:function(){
this.convertToText();
},
convertToText:function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='inline';
this.setValue(this.value);
},
setValue:function(value){
this.fieldElement.value=value;
this.staticElement.innerHTML=value;
},
getValue:function(){
returnthis.fieldElement.value;
}
};
vartitlePrototypal=clone(EditInPlaceField);
titlePrototypal.configure('titlePrototypal',$('doc'),'TitleHere');
varcurrentTitleText=titlePrototypal.getValue();
/*EditInPlaceArea对象*/
varEditInPlaceArea=clone(EditInPlaceField);
//Overridecertainmethods.
EditInPlaceArea.createElements=function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('p');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('textarea');
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
};
EditInPlaceArea.convertToEditable=function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='block';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
};
EditInPlaceArea.convertToText=function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='block';
this.setValue(this.value);
};
3.混合类
/*混合类*/
/*混合函数*/
functionaugment(receivingClass,givingClass){
for(methodNameingivingClass.prototype){
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName]=givingClass.prototype[methodName];
}
}
}
/*改进的增加函数*/
functionaugment(receivingClass,givingClass){
if(arguments[2]){//Onlygivecertainmethods.
for(vari=2,len=arguments.length;i<len;i++){
receivingClass.prototype[arguments[i]]=givingClass.prototype[arguments[i]];
}
}
else{//Giveallmethods.
for(methodNameingivingClass.prototype){
if(!receivingClass.prototype[methodName]){
receivingClass.prototype[methodName]=givingClass.prototype[methodName];
}
}
}
}
varEditInPlaceMixin=function(){};
EditInPlaceMixin.prototype={
createElements:function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('span');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('input');
this.fieldElement.type='text';
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
},
attachEvents:function(){
varthat=this;
addEvent(this.staticElement,'click',function(){that.convertToEditable();});
addEvent(this.saveButton,'click',function(){that.save();});
addEvent(this.cancelButton,'click',function(){that.cancel();});
},
convertToEditable:function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='inline';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
},
save:function(){
this.value=this.getValue();
varthat=this;
varcallback={
success:function(){that.convertToText();},
failure:function(){alert('Errorsavingvalue.');}
};
ajaxRequest('GET','save.php?id='+this.id+'&value='+this.value,callback);
},
cancel:function(){
this.convertToText();
},
convertToText:function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='inline';
this.setValue(this.value);
},
setValue:function(value){
this.fieldElement.value=value;
this.staticElement.innerHTML=value;
},
getValue:function(){
returnthis.fieldElement.value;
}
};
/*EditInPlaceFieldclass.*/
functionEditInPlaceField(id,parent,value){
this.id=id;
this.value=value||'defaultvalue';
this.parentElement=parent;
this.createElements(this.id);
this.attachEvents();
};
augment(EditInPlaceField,EditInPlaceMixin);
/*EditInPlaceAreaclass.*/
functionEditInPlaceArea(id,parent,value){
this.id=id;
this.value=value||'defaultvalue';
this.parentElement=parent;
this.createElements(this.id);
this.attachEvents();
};
//Addcertainmethodssothataugmentwon'tincludethem.
EditInPlaceArea.prototype.createElements=function(id){
this.containerElement=document.createElement('div');
this.parentElement.appendChild(this.containerElement);
this.staticElement=document.createElement('p');
this.containerElement.appendChild(this.staticElement);
this.staticElement.innerHTML=this.value;
this.fieldElement=document.createElement('textarea');
this.fieldElement.value=this.value;
this.containerElement.appendChild(this.fieldElement);
this.saveButton=document.createElement('input');
this.saveButton.type='button';
this.saveButton.value='Save';
this.containerElement.appendChild(this.saveButton);
this.cancelButton=document.createElement('input');
this.cancelButton.type='button';
this.cancelButton.value='Cancel';
this.containerElement.appendChild(this.cancelButton);
this.convertToText();
};
EditInPlaceArea.prototype.convertToEditable=function(){
this.staticElement.style.display='none';
this.fieldElement.style.display='block';
this.saveButton.style.display='inline';
this.cancelButton.style.display='inline';
this.setValue(this.value);
};
EditInPlaceArea.prototype.convertToText=function(){
this.fieldElement.style.display='none';
this.saveButton.style.display='none';
this.cancelButton.style.display='none';
this.staticElement.style.display='block';
this.setValue(this.value);
};
augment(EditInPlaceArea,EditInPlaceMixin);
点评：
js分为类和对象、函数。
其中又包含多种形式，属性，数组属性，函数，私有函数，公有函数，静态函数。
小的基础方法，可以有大的用途，比如extend方法，clone方法，还有augment方法。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。