本文實例講述了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方法。
更多關於JavaScript相關內容可查看本站專題:《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。