JS extended class, Clone object and mixed class instance analysis _javascript skill

This article describes the JS extension class, cloning objects and mixed classes. Share to everyone for your reference, specific as follows:

1. Class Extensions

/* Editinplacefield class *//////function extend (subclass, superclass) {var F = function () {};
 F.prototype = Superclass.prototype;
 Subclass.prototype = new F ();
 SubClass.prototype.constructor = subclass;
 Subclass.superclass = Superclass.prototype; if (SuperClass.prototype.constructor = = Object.prototype.constructor) {superClass.prototype.constructor = Superclass
 ;
 } function Editinplacefield (ID, parent, value) {//constructor this.id = ID; This.value = value | |
 ' Default value ';
 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 () {var that = 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 ();
  var that = this;  var callback = {Success:function () {That.converttotext ();}, Failure:function () {alert (' Error saving value. ');
  }
  };
 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 () {return this.fieldElement.value;
}
};
var titleclassical = new Editinplacefield (' Titleclassical ', $ (' Doc '), ' Title here ');
var currenttitletext = Titleclassical.getvalue (); /* Editinplacearea class */function Editinplacearea (ID, parent, value) {EditInPlaceArea.superclass.constrUctor.call (this, ID, parent, value);
};
Extend (Editinplacearea, Editinplacefield);
Override certain methods.
 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. Object Cloning

///////////////////* Cloning function/function Clone (object) {function F () {} F.prototype = Editinplacefield
return new F;
  var Editinplacefield = {Configure:function (ID, parent, value) {this.id = ID; This.value = value | |
  ' Default value ';
  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 () {var that = 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 ();
  var that = this;  var callback = {Success:function () {That.converttotext ();}, Failure:function () {alert (' Error saving value. ');
  }
  }; 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 () {return this.fieldElement.value;
}
};
var Titleprototypal = Clone (Editinplacefield);
Titleprototypal.configure (' Titleprototypal ', $ (' Doc '), ' Title here ');
var currenttitletext = Titleprototypal.getvalue ();
/* Editinplacearea Object * * var Editinplacearea = clone (Editinplacefield);
Override certain methods.
 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. Mixed class

Ceivingclass.prototype[methodname]) {Receivingclass.prototype[methodname] = Givingclass.prototype[methodname];
  }}///function augment (Receivingclass, Givingclass) {if (arguments[2]) {//only give certain. for (var i = 2, Len = Arguments.length i < len; i++) {receivingclass.prototype[arguments[i]] = Givingclass.prototyp
  E[arguments[i]];
  } else {//Give all methods. For (methodname in Givingclass.prototype) {if (!receivingclass.prototype[methodname]) {Receivingclass.prototype[met
   Hodname] = Givingclass.prototype[methodname];
{}}} var editinplacemixin = 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 () {var that = 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 ();
  var that = this;  var callback = {Success:function () {That.converttotext ();}, Failure:function () {alert (' Error saving value. ');
  }
  };
 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 () {return this.fieldElement.value;
}
}; /* Editinplacefield class. */function Editinplacefield (ID,Parent, value) {this.id = ID; This.value = value | |
 ' Default value ';
 This.parentelement = parent;
 This.createelements (this.id);
This.attachevents ();
};
Augment (Editinplacefield, editinplacemixin); /* Editinplacearea class.
 */function Editinplacearea (ID, parent, value) {this.id = ID; This.value = value | |
 ' Default value ';
 This.parentelement = parent;
 This.createelements (this.id);
This.attachevents ();
};
Add certain methods so that augment won ' t include them.
 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);

Comments:

JS is divided into classes and objects, functions.
It also contains a variety of forms, attributes, array properties, functions, private functions, public functions, static functions.
Small Basic methods can have large uses, such as Extend method, Clone method, and augment method.

For more on JavaScript related content to view the site topics: "JavaScript common function Tips Summary", "JavaScript object-oriented tutorial", "JavaScript in the JSON Operation tips Summary", " JavaScript switching effects and techniques summary, "JavaScript Search Algorithm Skills Summary", "JavaScript animation effects and Skills summary", "JavaScript Error and debugging skills Summary", "JavaScript data structure and algorithm skills summary", JavaScript traversal algorithm and techniques summary and JavaScript mathematical Operational Usage Summary

I hope this article will help you with JavaScript programming.