JS extension class, clone object and mixed class instance analysis

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.