JS扩展类，克隆对象与混合类实例分析

本文实例讲述了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程序设计有所帮助。