|
|
在今天的教程中，我們將主要學(xué)習(xí)一下MooTools中類的實(shí)現(xiàn)和繼承（擴(kuò)展）。通過實(shí)現(xiàn)和繼承，我們可以在子類中使用父類的方法，而不需要再重新聲明和實(shí)現(xiàn)相同的方法。MooTools中的Class類可以幫助我們輕松地做到這一點(diǎn)。首先，我們定一個(gè)基類（base class）。
參考代碼：
復(fù)制代碼 代碼如下:
var BaseClass = new Class({
// 定義一個(gè)方法testFunction
// 這個(gè)方法彈出一個(gè)對(duì)話框
testFunction : function(){
alert('This function is defined in BaseClass');
}
});
現(xiàn)在，我們已經(jīng)有了一個(gè)基類（base class），我們可以通過創(chuàng)建一個(gè)新類來實(shí)現(xiàn)它從而使用它的全部功能。注意，在下面的例子中，我們的新類沒有做任何事情，而只是實(shí)現(xiàn)了基類BaseClass。
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)名叫ImplementingClass的類
var ImplementingClass = new Class({
// 我所做的全部事情就是實(shí)現(xiàn)Baseclass
Implements : BaseClass
});
現(xiàn)在，我們就可以創(chuàng)建一個(gè)ImplementingClass的實(shí)例，并使用在BaseClass中定義的方法。
參考代碼：
復(fù)制代碼 代碼如下:
var demo_one = function(){
// 創(chuàng)建一個(gè)ImplementingClass實(shí)例
var test_class = new ImplementingClass();
// 調(diào)用在BaseClass中定義的testFunction
test_class.testFunction();
}
demo_one()
你也可以對(duì)基類中的變量和初始化函數(shù)（構(gòu)造函數(shù)）做同樣的事情。如果你在實(shí)施類（實(shí)現(xiàn)基類的類）中聲明了的話，每個(gè)你在基類中定義的東西就將被轉(zhuǎn)移到實(shí)施類中。
注意：從現(xiàn)在開始，我們下面所有的示例中將全部使用下面這個(gè)版本的BaseClass。
參考代碼：
復(fù)制代碼 代碼如下:
var BaseClass = new Class({
// 把參數(shù)賦值給這個(gè)類中的inputVariable變量
initialize: function(input){
this.inputVariable = input;
},
// 顯示變量inputVariable的值
testFunction : function(){
alert('BaseClass.testFunction() : ' + this.inputVariable);
},
// 為這個(gè)類的所有實(shí)例定義一個(gè)內(nèi)部變量
definedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// 重復(fù)一遍：
// 這里我們做的全部事情就只是實(shí)現(xiàn)BaseClass
Implements : BaseClass
});
下面的示例表明：初始化程序、函數(shù)調(diào)用和變量都可以被訪問到，就像它們是屬于這個(gè)實(shí)施類的。
參考代碼：
復(fù)制代碼 代碼如下:
var demo_two = function(){
// 創(chuàng)建一個(gè)ImplementingClass實(shí)例
var test_class = new ImplementingClass('this is the input value');
// 調(diào)用testFunction()（在BaseClass中定義的）
test_class.testFunction();
// 顯示變量definedVariable的值
alert('test_class.testVariable : ' + test_class.definedVariable);
}
demo_two()
一旦你實(shí)現(xiàn)了一個(gè)類，你可以添加任何你想要的功能到你的實(shí)施類定義中。
參考代碼：
復(fù)制代碼 代碼如下:
var ImplementingClass = new Class({
Implements : BaseClass,
// 下面的這些功能都在BaseClass中定義了
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
},
// 下面的這些都沒有在BaseClass中定義
anotherDefinedVariable : "Also Defined in ImplementingClass",
anotherTestFunction : function(){
alert('This function is defined in ImplementingClass');
}
});
請(qǐng)注意，我們?cè)趯?shí)施類中重新定義了testFunction和definedVariable，就像我們添加新的函數(shù)和變量一樣。特別需要注意的是：如果你想在實(shí)施類中定義一個(gè)已經(jīng)在基類中定義了的函數(shù)或者變量，基類中的定義將會(huì)取代實(shí)施類中的定義。如果不明白，看看下面的例子就知道了。
參考代碼：
復(fù)制代碼 代碼如下:
var demo_three = function(){
// 創(chuàng)建一個(gè)ImplementingClass實(shí)例
var test_class = new ImplementingClass('this is the input value');
// (執(zhí)行BaseClass中定義的方法）
test_class.testFunction();
// 顯示變量definedVariable的值（BaseClass中定義的值）
alert('test_class.testVariable : ' + test_class.definedVariable);
// （ImplementingClass中定義的方法）
test_class.anotherTestFunction();
// 顯示變量anotherDefinedVariable的值（ImplementingClass中定義的值）
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable);
}
demo_three()
Extends（擴(kuò)展）
如果你想要覆蓋基類中定義的方法和變量，你可以使用Extends。簡(jiǎn)單地把上面代碼中的“Implements”替換成“Extends”就可以了。
參考代碼：
復(fù)制代碼 代碼如下:
var ExtendingClass = new Class({
// 注意這里用Extends替代了Implements
Extends : BaseClass,
// 下面的這些都在BaseClass中定義了
// 但是我們用extend替代了implements
// 這將覆蓋在BaseClass中的定義
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
}
});
var demo_four = function(){
// 創(chuàng)建一個(gè)ImplementingClass實(shí)例
var test_class = new ExtendingClass('this is the input value');
// 調(diào)用testFunction()（同時(shí)在BaseClass和ExtendingClass中都有定義）
test_class.testFunction();
// 顯示變量definedVariable的值（同時(shí)在BaseClass和ExtendingClass中都有定義）
alert('test_class.definedVariable : ' + test_class.definedVariable);
}
demo_four()
使用extends的另外一個(gè)有用的功能是，它提供了一個(gè)功能：在覆蓋基類的初始化方法時(shí)，你仍然可以調(diào)用基類中的初始化方法。因此，如果你在基類中定義了一個(gè)這樣的初始化方法：
參考代碼： 復(fù)制代碼 代碼如下:
initialize : function(){
alert('base class');
}
然后，在擴(kuò)展類中定義了下面這樣一個(gè)初始化方法，那么將會(huì)彈出兩個(gè)提示分別顯示“base class”和“extending class”。
參考代碼：
復(fù)制代碼 代碼如下:
initialize : function(){
// 調(diào)用父類的構(gòu)造函數(shù)
this.parent();
alert('extending class');
}
如果父類的初始化函數(shù)需要參數(shù)，請(qǐng)一定要確保在這個(gè)初始化函數(shù)中又相同的輸入?yún)?shù)并傳遞給父類的構(gòu)造函數(shù)。在下面的示例中，請(qǐng)注意我們沒有給input指定任何值――我們只是把它傳遞給了父類的構(gòu)造函數(shù)，它會(huì)自動(dòng)管理好的。
參考代碼：
復(fù)制代碼 代碼如下:
var ExtendingClass = new Class({
// 重復(fù)一遍：我們?cè)谑褂脭U(kuò)展方法，而不是實(shí)現(xiàn)
Extends : BaseClass,
initialize: function(input){
// 通過調(diào)用this.parent來執(zhí)行父類的初始化方法
this.parent(input);
// 這樣我們可以在初始化方法中做一些其他的事情
// 而不用完全覆蓋父類的方法
this.otherVariable = "Original Input Was : " + input;
}
});
var demo_five = function(){
// 創(chuàng)建我們的擴(kuò)展類實(shí)例
var test_class = new ExtendingClass('this is the input value');
// 調(diào)用testFunction
test_class.testFunction();
// 顯示變量otherVariable的值
alert("test_class.otherVariable : " + test_class.otherVariable);
}
demo_five()
.implement()方法
你不僅可以使用implements和extends來擴(kuò)展你的類定義，你還可以使用它們?cè)械念悂硪淮翁砑右粋€(gè)功能。在下面的這個(gè)示例中，我們將使用一個(gè)簡(jiǎn)單的計(jì)算器類（calculator），定義這個(gè)類的時(shí)候，我們只給了它一個(gè)對(duì)兩個(gè)數(shù)字做加法運(yùn)算和一個(gè)做減法運(yùn)算的功能。
參考代碼： 復(fù)制代碼 代碼如下:
var Calculator = new Class({
// 在初始化的時(shí)候指定兩個(gè)數(shù)字
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number;
},
// 把兩個(gè)數(shù)字相加
// 并返回結(jié)果
add : function(){
result = this.first + this.second;
alert(result);
},
// 把兩個(gè)數(shù)字相減
// 并返回結(jié)果
subtract : function(){
result = this.first - this.second;
alert(result);
}
});
如果你只是要對(duì)數(shù)字做加法或者減法運(yùn)算，這一切看起來都很好，但是，如果你要對(duì)它們做乘法怎么辦呢？使用.implement();方法，我們可以給這個(gè)類添加一個(gè)功能，就像我們已經(jīng)創(chuàng)建了另外一個(gè)以Calculator類為基類的類一樣。
參考代碼：復(fù)制代碼 代碼如下:
var demo_six = function(){
// 為Calculator類實(shí)現(xiàn)
// 實(shí)現(xiàn)一個(gè)方法
Calculator.implement({
// 把兩個(gè)數(shù)字相乘
// 并返回結(jié)果
multiply : function(){
result = this.first * this.second;
alert(result);
}
});
// 建立一個(gè)Calculator類實(shí)例
var myCalculator = new Calculator(100, 50);
// 調(diào)用multiply方法
myCalculator.multiply();
}
demo_six()
在類教程的第一部分中，我們使用了print_r這個(gè)函數(shù)來調(diào)試Javascript。使用implement方法，我們可以讓它非常輕松地打印出出一個(gè)類中的變量值，只要在Calculator中實(shí)現(xiàn)這個(gè)方法就行了。
參考代碼：
復(fù)制代碼 代碼如下:
var demo_seven = function(){
// 為Calculator類實(shí)現(xiàn)一個(gè)方法
// 用來打印這個(gè)類里面的內(nèi)容
Calculator.implement({
show_class : function(){
alert(print_r(this, true));
}
});
// 建立一個(gè)Calculator類實(shí)例
var myCalculator = new Calculator(100, 50);
// 顯示類的詳細(xì)信息
myCalculator.show_class();
}
demo_seven()
代碼示例
雖然很簡(jiǎn)潔，不過這對(duì)于相對(duì)比較簡(jiǎn)單的計(jì)算器這個(gè)類來說不是一個(gè)特別有用的功能。但是，由于MooTools里面的大多數(shù)對(duì)象都是用相同的方式建立的類，因此我們可以用這種方式來擴(kuò)充MooTools的類，提供更多功能。下面的例子實(shí)現(xiàn)了一個(gè)功能，它可以顯示任何你想看的HTML的內(nèi)容結(jié)構(gòu)。這個(gè)功能現(xiàn)在就被自動(dòng)地添加到了任何與你交互的HTML元素，因此你可以給你的元素添加一個(gè)showStructure元素的完整描述。
參考代碼： 復(fù)制代碼 代碼如下:
var demo_eight = function(){
Element.implement({
showStructure : function(){
var structure = '<pre>' + print_r(this, true) + '</pre>';
// 打開一個(gè)彈出窗口
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes');
// 把內(nèi)容寫入到彈出窗口中
newWindow.document.write(structure);
}
});
$('demo_eight').showStructure();
}
注意：要讓這個(gè)示例能正確顯示，你需要先允許該頁(yè)面彈出窗口。
更多學(xué)習(xí)
下載一個(gè)包含你開始所需要的所有東西的zip包
MooTools Class文檔
一些非常好的關(guān)于更好地利用MooTools類的討論
JavaScript技術(shù)：Mootools 1.2教程(21)――類（二），轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
