JS扩展类，克隆对象与混合类实例分析
作者：牛逼的霍啸林
这篇文章主要介绍了JS扩展类，克隆对象与混合类,通过自定义extend,clone与augment函数实例分析了类的扩展，对象的克隆与混合类相关实现与使用技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。