欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Mootools 1.2教程(21)——類（二）

 更新時間：2009年09月15日 22:39:39   作者：  
在今天的教程中，我們將主要學(xué)習(xí)一下MooTools中類的實(shí)現(xiàn)和繼承（擴(kuò)展）。
Fdream注：原文好像少了一部分，因此我自作主張地補(bǔ)充了下面這一段及BaseClass的代碼。
在今天的教程中，我們將主要學(xué)習(xí)一下MooTools中類的實(shí)現(xiàn)和繼承（擴(kuò)展）。通過實(shí)現(xiàn)和繼承，我們可以在子類中使用父類的方法，而不需要再重新聲明和實(shí)現(xiàn)相同的方法。MooTools中的Class類可以幫助我們輕松地做到這一點(diǎn)。首先，我們定一個基類（base class）。
參考代碼：
復(fù)制代碼 代碼如下:

var BaseClass = new Class({
// 定義一個方法testFunction
// 這個方法彈出一個對話框
testFunction : function(){
alert('This function is defined in BaseClass');
}
});

現(xiàn)在，我們已經(jīng)有了一個基類（base class），我們可以通過創(chuàng)建一個新類來實(shí)現(xiàn)它從而使用它的全部功能。注意，在下面的例子中，我們的新類沒有做任何事情，而只是實(shí)現(xiàn)了基類BaseClass。
參考代碼：
復(fù)制代碼 代碼如下:

// 創(chuàng)建一個名叫ImplementingClass的類
var ImplementingClass = new Class({
// 我所做的全部事情就是實(shí)現(xiàn)Baseclass
Implements : BaseClass
});

現(xiàn)在，我們就可以創(chuàng)建一個ImplementingClass的實(shí)例，并使用在BaseClass中定義的方法。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_one = function(){
// 創(chuàng)建一個ImplementingClass實(shí)例
var test_class = new ImplementingClass();
// 調(diào)用在BaseClass中定義的testFunction
test_class.testFunction();
}

demo_one()
你也可以對基類中的變量和初始化函數(shù)（構(gòu)造函數(shù)）做同樣的事情。如果你在實(shí)施類（實(shí)現(xiàn)基類的類）中聲明了的話，每個你在基類中定義的東西就將被轉(zhuǎn)移到實(shí)施類中。
注意：從現(xiàn)在開始，我們下面所有的示例中將全部使用下面這個版本的BaseClass。
參考代碼：
復(fù)制代碼 代碼如下:

var BaseClass = new Class({
// 把參數(shù)賦值給這個類中的inputVariable變量
initialize: function(input){
this.inputVariable = input;
},
// 顯示變量inputVariable的值
testFunction : function(){
alert('BaseClass.testFunction() : ' + this.inputVariable);
},
// 為這個類的所有實(shí)例定義一個內(nèi)部變量
definedVariable : "Defined in BaseClass",
});
var ImplementingClass = new Class({
// 重復(fù)一遍：
// 這里我們做的全部事情就只是實(shí)現(xiàn)BaseClass
Implements : BaseClass
});

下面的示例表明：初始化程序、函數(shù)調(diào)用和變量都可以被訪問到，就像它們是屬于這個實(shí)施類的。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_two = function(){
// 創(chuàng)建一個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)了一個類，你可以添加任何你想要的功能到你的實(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');
}
});

請注意，我們在實(shí)施類中重新定義了testFunction和definedVariable，就像我們添加新的函數(shù)和變量一樣。特別需要注意的是：如果你想在實(shí)施類中定義一個已經(jīng)在基類中定義了的函數(shù)或者變量，基類中的定義將會取代實(shí)施類中的定義。如果不明白，看看下面的例子就知道了。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_three = function(){
// 創(chuàng)建一個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。簡單地把上面代碼中的“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)建一個ImplementingClass實(shí)例
var test_class = new ExtendingClass('this is the input value');
// 調(diào)用testFunction()（同時在BaseClass和ExtendingClass中都有定義）
test_class.testFunction();
// 顯示變量definedVariable的值（同時在BaseClass和ExtendingClass中都有定義）
alert('test_class.definedVariable : ' + test_class.definedVariable);
}

demo_four()
使用extends的另外一個有用的功能是，它提供了一個功能：在覆蓋基類的初始化方法時，你仍然可以調(diào)用基類中的初始化方法。因此，如果你在基類中定義了一個這樣的初始化方法：
參考代碼：
復(fù)制代碼 代碼如下:

initialize : function(){
alert('base class');
}

然后，在擴(kuò)展類中定義了下面這樣一個初始化方法，那么將會彈出兩個提示分別顯示“base class”和“extending class”。
參考代碼：
復(fù)制代碼 代碼如下:

initialize : function(){
// 調(diào)用父類的構(gòu)造函數(shù)
this.parent();
alert('extending class');
}

如果父類的初始化函數(shù)需要參數(shù)，請一定要確保在這個初始化函數(shù)中又相同的輸入?yún)?shù)并傳遞給父類的構(gòu)造函數(shù)。在下面的示例中，請注意我們沒有給input指定任何值——我們只是把它傳遞給了父類的構(gòu)造函數(shù)，它會自動管理好的。
參考代碼：
復(fù)制代碼 代碼如下:

var ExtendingClass = new Class({
// 重復(fù)一遍：我們在使用擴(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ò)展你的類定義，你還可以使用它們原有的類來一次添加一個功能。在下面的這個示例中，我們將使用一個簡單的計算器類（calculator），定義這個類的時候，我們只給了它一個對兩個數(shù)字做加法運(yùn)算和一個做減法運(yùn)算的功能。
參考代碼：
復(fù)制代碼 代碼如下:

var Calculator = new Class({
// 在初始化的時候指定兩個數(shù)字
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number;
},
// 把兩個數(shù)字相加
// 并返回結(jié)果
add : function(){
result = this.first + this.second;
alert(result);
},
// 把兩個數(shù)字相減
// 并返回結(jié)果
subtract : function(){
result = this.first - this.second;
alert(result);
}
});

如果你只是要對數(shù)字做加法或者減法運(yùn)算，這一切看起來都很好，但是，如果你要對它們做乘法怎么辦呢？使用.implement();方法，我們可以給這個類添加一個功能，就像我們已經(jīng)創(chuàng)建了另外一個以Calculator類為基類的類一樣。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_six = function(){
// 為Calculator類實(shí)現(xiàn)
// 實(shí)現(xiàn)一個方法
Calculator.implement({
// 把兩個數(shù)字相乘
// 并返回結(jié)果
multiply : function(){
result = this.first * this.second;
alert(result);
}
});
// 建立一個Calculator類實(shí)例
var myCalculator = new Calculator(100, 50);
// 調(diào)用multiply方法
myCalculator.multiply();
}

demo_six()
在類教程的第一部分中，我們使用了print_r這個函數(shù)來調(diào)試javascript。使用implement方法，我們可以讓它非常輕松地打印出出一個類中的變量值，只要在Calculator中實(shí)現(xiàn)這個方法就行了。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_seven = function(){
// 為Calculator類實(shí)現(xiàn)一個方法
// 用來打印這個類里面的內(nèi)容
Calculator.implement({
show_class : function(){
alert(print_r(this, true));
}
});
// 建立一個Calculator類實(shí)例
var myCalculator = new Calculator(100, 50);
// 顯示類的詳細(xì)信息
myCalculator.show_class();
}

demo_seven()
代碼示例
雖然很簡潔，不過這對于相對比較簡單的計算器這個類來說不是一個特別有用的功能。但是，由于MooTools里面的大多數(shù)對象都是用相同的方式建立的類，因此我們可以用這種方式來擴(kuò)充MooTools的類，提供更多功能。下面的例子實(shí)現(xiàn)了一個功能，它可以顯示任何你想看的HTML的內(nèi)容結(jié)構(gòu)。這個功能現(xiàn)在就被自動地添加到了任何與你交互的HTML元素，因此你可以給你的元素添加一個showStructure元素的完整描述。
參考代碼：
復(fù)制代碼 代碼如下:

var demo_eight = function(){
Element.implement({
showStructure : function(){
var structure = '<pre>' + print_r(this, true) + '</pre>';
// 打開一個彈出窗口
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes');
// 把內(nèi)容寫入到彈出窗口中
newWindow.document.write(structure);
}
});
$('demo_eight').showStructure();
}

注意：要讓這個示例能正確顯示，你需要先允許該頁面彈出窗口。

更多學(xué)習(xí)

下載一個包含你開始所需要的所有東西的zip包

MooTools Class文檔

一些非常好的關(guān)于更好地利用MooTools類的討論

相關(guān)文章

最新評論