JS extension class, clone object and mixed class instance analysis

JS extension class, clone object and mixed class instance analysis class Extension

/* EditInPlaceField class * // * Extension function */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, pa Rent, 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 ('P'); this. parentElement. appendChild (this. containerElement); this. staticElement = document. createElement ('span '); this. containerElemen T. 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. append Child (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 callba Ck = {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 ('P'); 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 );};

Object cloning

/* EditInPlaceField object * // * clone function */function clone (object) {function F () {} F. prototype = object; 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 ('P'); 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 = doc Ument. 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; addEve Nt (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. dis Play = 'line'; 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 ('P'); 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 );};

Mixing class

/* Mixed class * // * mixed function */function augment (receivingClass, givingClass) {for (methodName in givingClass. prototype) {if (! ReceivingClass. prototype [methodName]) {receivingClass. prototype [methodName] = givingClass. prototype [methodName] ;}}/ * added function */function augment (receivingClass, givingClass) {if (arguments [2]) {// Only give certain methods. for (var I = 2, len = arguments. length; I <len; I ++) {receivingClass. prototype [arguments [I] = givingClass. prototype [arguments [I];} else {// Give all methods. for (meth OdName in givingClass. prototype) {if (! ReceivingClass. prototype [methodName]) {receivingClass. prototype [methodName] = givingClass. prototype [methodName] ;}}}var EditInPlaceMixin = function () {}; EditInPlaceMixin. prototype = {createElements: function (id) {this. containerElement = document. createElement ('P'); 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. appendC Hild (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 () {t Hat. 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 callbac K = {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 ('P'); 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, objects, and functions.
It also contains multiple forms, attributes, array attributes, functions, private functions, public functions, and static functions.
A small basic method can be used for a large number of purposes, such as the extend method, clone method, and augment method.