JS擴展類，克隆對象與混合類實例分析

2019-11-19 18:48:42

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JS擴展類，克隆對象與混合類。分享給大家供大家參考，具體如下：

1.類擴展

/* EditInPlaceField類 *//* 擴展函數 */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) { // 構造函數 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類 */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.對象克隆

/* EditInPlaceField對象*//* 克隆函數 */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('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對象*/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.混合類

/* 混合類 *//* 混合函數 */function augment(receivingClass, givingClass) { for(methodName in givingClass.prototype) {  if(!receivingClass.prototype[methodName]) {   receivingClass.prototype[methodName] = givingClass.prototype[methodName];  } }}/* 改進的增加函數 */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(methodName 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('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);

點評：

js分為類和對象、函數。
其中又包含多種形式，屬性，數組屬性，函數，私有函數，公有函數，靜態函數。
小的基礎方法，可以有大的用途，比如extend方法，clone方法，還有augment方法。