JS design pattern-4. Inheritance (example)

Our goal is to write a reusable modular API for creating and managing the on-site editing domain. It refers to the form field with some buttons after a common text on the webpage is clicked, so that users can edit the text in place. Concept 1. hide common text fields 2. add form elements 3. set the value of the form element when the user saves the ajax communication to save the content when the user cancels 1. hide form fields 2. show text fields 3. set the value class inheritance of the text field to implement in-place superClass editing (input). Copy the code function EditInPlaceField (id, parent, value) {this. id = id; this. value = value | 'default value'; this. parentElement = parent; this. createElements (this. id); this. attachEvents ();} EditInPlaceField. prototype = {createElements: function () {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. fieldEle Ment); this. saveButton = document. createElement ('input'); this. saveButton. type = 'button '; this. saveButton. value = "Save"; this. containerElement. appendChild (this. saveButton); this. cancelBtton = document. createElement ('input'); this. cancelBtton. type = 'button '; this. cancelBtton. value = 'cancel'; this. containerElement. appendChild (this. cancelBtton); this. convertToText () ;}, attachEvents: function () {var That = this; addEvent (this. staticElement, 'click', function () {that. convertToEditable () ;}); addEvent (this. saveButton, 'click', function () {that. save () ;}); addEvent (this. cancelBtton, 'click', function () {that. cancel ()}) ;}, convertToEditable: function () {this. staticElement. style. display = 'none'; this. fieldElement. style. display = 'inline'; this. saveButton. style. display = 'inline'; this. cancelBtton. st Yle. 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. cancelBtton. 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 ;}}; copy the implementation of the Code subClass (textarea) copy the code function EditInPlaceArea (id, parent, value) {EditInPlaceArea. superclass. constructor. call (this, id, parent, value);} extend (EditInPlaceArea, EditInPlaceField); 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. 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. cancelBtton = document. createElement ('input'); this. cancelBtton. type = 'button '; this. cancelBtton. value = 'cancel'; this. containerElement. appendChild (this. cancelBtton); this. convertToText () ;}; EditInPlaceArea. prototype. convertToEditable = function () {this. staticElement. style. display = 'none'; this. fieldElement. style. display = 'block'; this. saveButton. style. display = 'inline'; this. cancelBtton. style. display = 'inline'; this. setValue (this. value) ;}; EditInPlaceArea. prototype. convertToText = function () {this. fieldElement. style. display = 'none'; this. saveButton. style. display = 'none'; this. cancelBtton. style. display = 'none'; this. staticElement. style. display = 'block'; this. setValue (this. value) ;}; copy code API dependencies and call addEvent dependencies copy code function addEvent (el, ty, fn) {if (el. addEvetListener) {el. addEvetListener (ty, fn, false);} else if (el. attachEvent) {el. attachEvent ('on' + ty, fn);} else {el ['on' + ty] = fn ;}} copy code extend dependency copy code 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;} copy the code API call var titleClassical = new EditInPlaceField ('titleclassical ', document. getElementById ('titleclassical '). parentNode, 'title here '); var bodyClassical = new EditInPlaceArea ('bodyclassical', document. getElementById ('bodyclassical '). parentNode, 'body here ');