JS擴(kuò)展類，克隆對(duì)象與混合類實(shí)例分析
更新時(shí)間：2016年11月26日 14:19:51 作者：牛逼的霍嘯林
這篇文章主要介紹了JS擴(kuò)展類，克隆對(duì)象與混合類,通過(guò)自定義extend,clone與augment函數(shù)實(shí)例分析了類的擴(kuò)展，對(duì)象的克隆與混合類相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下
本文實(shí)例講述了JS擴(kuò)展類，克隆對(duì)象與混合類。分享給大家供大家參考，具體如下：
1.類擴(kuò)展
/* EditInPlaceField類 */
/* 擴(kuò)展函數(shù) */
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) { // 構(gòu)造函數(shù)
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.對(duì)象克隆
/* EditInPlaceField對(duì)象*/
/* 克隆函數(shù) */
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對(duì)象*/
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.混合類
/* 混合類 */
/* 混合函數(shù) */
function augment(receivingClass, givingClass) {
for(methodName in givingClass.prototype) {
if(!receivingClass.prototype[methodName]) {
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
}
}
}
/* 改進(jìn)的增加函數(shù) */
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);
點(diǎn)評(píng)：
js分為類和對(duì)象、函數(shù)。
其中又包含多種形式，屬性，數(shù)組屬性，函數(shù)，私有函數(shù)，公有函數(shù)，靜態(tài)函數(shù)。
小的基礎(chǔ)方法，可以有大的用途，比如extend方法，clone方法，還有augment方法。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
在ECMAScript 6增加了一個(gè)對(duì)象,它不是新的語(yǔ)法或新的內(nèi)置對(duì)象,而一種協(xié)議（ 迭代器協(xié)議）,所有遵守這個(gè)協(xié)議的對(duì)象,都可以稱之為迭代器,這篇文章主要給大家介紹了關(guān)于ECMAScript中迭代器的相關(guān)資料,需要的朋友可以參考下2021-08-08
談?wù)刯avascript中使用連等賦值操作帶來(lái)的問(wèn)題
這篇文章主要介紹了javascript中使用連等賦值操作帶來(lái)的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2015-11-11
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常見(jiàn)的從某個(gè)數(shù)組中抽取出新的數(shù)組外，它還有一些其他的用法,下面就為大家講這些妙用2013-11-11
今天小編就為大家分享一篇layer 關(guān)閉指定彈出層的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS和jQuery通過(guò)this獲取html標(biāo)簽中的屬性值(實(shí)例代碼)
本文通過(guò)實(shí)例代碼給大家分享JS和jQuery通過(guò)this獲取html標(biāo)簽中的屬性值，非常不錯(cuò)，具有參考借鑒價(jià)值，需要額朋友參考下吧2017-09-09
js 數(shù)組的for循環(huán)到底應(yīng)該怎么寫？
說(shuō)實(shí)話，我是個(gè)比較喜歡懷疑權(quán)威的人，但是在有些權(quán)威的問(wèn)題一直在我面前閃，閃啊閃，我就開(kāi)始不懷疑他們了，因?yàn)橛?0000個(gè)人說(shuō)這個(gè)東西是對(duì)的，我就會(huì)覺(jué)得它的確是對(duì)的吧。2010-05-05
獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)
下面小編就為大家?guī)?lái)一篇獲取當(dāng)前按鈕或者h(yuǎn)tml的ID名稱實(shí)例(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
JavaScript中創(chuàng)建對(duì)象的模式匯總
本文給大家js創(chuàng)建對(duì)象的模式包括對(duì)象字面量，工廠模式，構(gòu)造函數(shù)模式，原型模式，結(jié)合構(gòu)造函數(shù)和原型模式，原型動(dòng)態(tài)模式 ，感興趣的朋友參考下2016-04-04
前面已經(jīng)講解了 引用，函數(shù)重載，作用域和上下文，接下來(lái)，講解JavaScript中另一個(gè)重要的知識(shí)——閉包。2009-09-09
Atitit.js的鍵盤按鍵事件捆綁and事件調(diào)度
這篇文章主要介紹了Atitit.js的鍵盤按鍵事件捆綁and事件調(diào)度的相關(guān)資料,需要的朋友可以參考下2016-04-04