Mootools 1.2教程 類(一)
更新時間：2009年09月15日 22:21:03 作者：
今天我們將講一下用MooTools來創(chuàng)建和使用類的一些基本知識。
簡單地講，一個類就是一個容器，這個容器包含了一些變量集合和操作這些變量的函數(shù)，以便實現(xiàn)特定的功能。在一個內(nèi)容牽涉較多的項目中，類會顯得難以置信的有用。
變量
在前面一系列的課程中，我們已經(jīng)學(xué)習(xí)過了Hash對象中鍵值對（key/value pair）的使用方式，因此，下面的這個例子中創(chuàng)建了一個類，它只包含了一些變量，你看起來可能會覺得非常的熟悉：
參考代碼：
// 創(chuàng)建一個名為class_one的類
// 包含兩個內(nèi)部變量
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
類似地，你可以通過類似訪問hash中的變量的方式來訪問其中的變量，注意一下，在下面的代碼中，我們創(chuàng)建了一個我們在上面定義的Class_one類的實例。
參考代碼：
var run_demo_one = function(){
// 創(chuàng)建類Class_one的一個實例，名稱為demo_1
var demo_1 = new Class_one();
// 顯示demo_1中的變量
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
方法/函數(shù)
方法是指一個指定的類中的函數(shù)（通俗地說就是一個類中的函數(shù)就叫做方法，換了個叫法而已）。這些方法必須通過這個類的實例來調(diào)用，而類本身不能調(diào)用它們。你可以像定義一個變量來定義一個方法，不同的是你需要給它指定一個靜態(tài)的值，給它指定一個匿名函數(shù)：
參考代碼：
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
注意一下上面例子中的關(guān)鍵字this的使用。由于在上面的方法中操作的變量都是類內(nèi)部的變量，因此你需要通過使用關(guān)鍵字this來訪問這些變量，否則你將只能得到一個undefined值。
參考代碼：
// 正確
working_method : function(){
alert('First Value : ' + this.variable_one);
},
// 錯誤
broken_method : function(){
alert('Second Value : ' + variable_two);
}
調(diào)用新創(chuàng)建的類中的方法就像訪問那些類的變量一樣。
參考代碼：
var run_demo_2 = function(){
// 實例化一個類class_two
var demo_2 = new Class_two();
// 調(diào)用function_one
demo_2.function_one();
// 調(diào)用function_two
demo_2.function_two();
}
initialize方法
類對象中的initialize選項可以讓你來對類進(jìn)行一些初始化操作，也可以讓你來處理一些可供用戶設(shè)置的選項和變量。（Fdream注：實際上這個就相當(dāng)于類的初始化方法。）你可以像定義方法一樣來定義它：
參考代碼：
var Myclass = new Class({
// 定義一個包含一個參數(shù)的初始化方法
initialize : function(user_input){
// 創(chuàng)建一個屬于這個類的變量
// 并給它賦值
// 值為用戶傳進(jìn)來的值
this.value = user_input;
}
})
你也可以通過這個初始化來改變其他的選項或者行為：
參考代碼：
var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "Everything this message says is true";
}
else {
this.message = "Everything this message says is false";
}
}
})
// 這將設(shè)置myClass實例的message屬性為下面的字符串
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// 這將設(shè)置myClass實例的message屬性為下面的字符串
// "Everything this message says is false"
var myclass_instance = new Myclass(false);
所有的這一切工作都不需要聲明任何其他變量或者方法。只需要記住每個鍵值對后面的逗號就行了。真的是非常容易漏掉一個逗號，然后花費大量的時間來追蹤這些不存在的漏洞。
參考代碼：
var Class_three = new Class({
// 當(dāng)類創(chuàng)建的時候就會執(zhí)行這個類
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two;
if (true_false_option){
this.boolean_option = "True Selected";
}
else {
this.boolean_option = "False Selected";
}
},
// 定義一些方法
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_3 = function(){
var demo_3 = new Class_three("First Argument", "Second Argument");
demo_3.function_one();
demo_3.function_two();
}
實現(xiàn)選項功能
當(dāng)創(chuàng)建類的時候，給類中的一些變量設(shè)置一些默認(rèn)值會非常有用，如果用戶沒有提供初始輸入的話。你可以手動地在初始化方法中設(shè)置這些變量，檢查每一個輸入來看用戶是不是提供了相應(yīng)的值，然后替換相應(yīng)的默認(rèn)值?；蛘?，你也可以使用MooTools中Class.extras提供的Options類來實現(xiàn)。
給你的類增加一個選項功能非常簡單，就像給類添加一個其他的鍵值對一樣：
參考代碼：
var Myclass = new Class({
Implements: Options
})
首先不要太著急實現(xiàn)選項的細(xì)節(jié)問題，我們會在后面的教程中更深入的學(xué)習(xí)?，F(xiàn)在，我們已經(jīng)擁有一個有選項功能的類了，我們還需要做的就是定義一些默認(rèn)的選項。和其他的所有東西一樣，只需要添加一些需要初始化的鍵值對就可以了。與定義單個值不一樣的是，你需要像下面這樣定義一組鍵值對集合：
參考代碼：
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "Second Option"
}
})
現(xiàn)在我們就有了這些默認(rèn)的集合，我們還需要提供一個方式來供用戶在初始化這個類的時候覆蓋這些默認(rèn)值。你所要做的工作就是在你的初始化函數(shù)中增加一行新的代碼，而Options類會完成其余的工作：
參考代碼：
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
this.setOptions(options);
}
})
一旦這個完成以后，你就可以通過傳遞一組鍵值對來覆蓋任何默認(rèn)選項：
參考代碼：
// 覆蓋所有的默認(rèn)選項
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
// 覆蓋其中的一個默認(rèn)選項
var class_instance = new Myclass({
options_two : "Override Second Option"
})
注意一下初始化函數(shù)中的setOptions方法。這是Options類中提供的一個方法，可以讓你在實例化一個類的時候設(shè)置選項。
參考代碼：
var class_instance = new Myclass();
// 設(shè)置第一個選項
class_instance.setOptions({options_one : "Override First Option"});
一旦設(shè)置了選項，你就可以通過變量options來訪問它們。
參考代碼：
var class_instance = new Myclass();
// 取得第一個選項的值
var class_option = class_instance.options.options_one;
// 變量class_option現(xiàn)在的值就為"First Default Option"了
如果你想在類的內(nèi)部訪問這個選項，請使用this語句：
參考代碼：
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
// 注意我們使用this關(guān)鍵字來
// 引用這個類
alert(this.option_two);
}
});
var class_instance = new Myclass();
// 將彈出一個對話框，顯示"Second Default Option"
class_instance.test();
把這些東西組合成一個類，看起來就是這樣的：
參考代碼：
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
var run_demo_4 = function ){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
// 創(chuàng)建一個類class_four的實例
// 并指定一個名叫new_option的新選項
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}
代碼及示例
熟悉PHP的人可能認(rèn)識下面示例中的show_options方法中的print_r()函數(shù)：
參考代碼：
show_options : function(){
alert(print_r(this.options, true));
}
這不是一個javascript的原生方法，只不過是從PHP2JS項目中Kevin van Zonneveld的一小段代碼而已。對于那些不熟悉PHP的人，這個print_r()方法就給你了一個數(shù)組中鍵值對格式化后的字符串。在調(diào)試腳本的過程中，這是一個極其有用的debug工具，這個函數(shù)在后面提供的下載包中有詳細(xì)的代碼，我強烈推薦使用它來測試和研究。
參考代碼：
var Class_five = new Class({
// 我們使用了選項
Implements: Options,
// 設(shè)置我們的默認(rèn)選項
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
// 設(shè)置我們的初始化函數(shù)
// 通過setOptions方法來設(shè)置選項
initialize : function(options){
this.setOptions(options);
},
// 用來打印選項數(shù)組信息的方法
show_options : function(){
alert(print_r(this.options, true));
},
// 通過setOptions方法來交換兩個選項的值
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
});
function demo_7(){
var demo_7 = new Class_five();
demo_7.show_options();
demo_7.setOptions({option_one : "New Value"});
demo_7.swap_options();
demo_7.show_options();
}
變量
在前面一系列的課程中，我們已經(jīng)學(xué)習(xí)過了Hash對象中鍵值對（key/value pair）的使用方式，因此，下面的這個例子中創(chuàng)建了一個類，它只包含了一些變量，你看起來可能會覺得非常的熟悉：
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個名為class_one的類
// 包含兩個內(nèi)部變量
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
類似地，你可以通過類似訪問hash中的變量的方式來訪問其中的變量，注意一下，在下面的代碼中，我們創(chuàng)建了一個我們在上面定義的Class_one類的實例。
參考代碼：
復(fù)制代碼 代碼如下:
var run_demo_one = function(){
// 創(chuàng)建類Class_one的一個實例，名稱為demo_1
var demo_1 = new Class_one();
// 顯示demo_1中的變量
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
方法/函數(shù)
方法是指一個指定的類中的函數(shù)（通俗地說就是一個類中的函數(shù)就叫做方法，換了個叫法而已）。這些方法必須通過這個類的實例來調(diào)用，而類本身不能調(diào)用它們。你可以像定義一個變量來定義一個方法，不同的是你需要給它指定一個靜態(tài)的值，給它指定一個匿名函數(shù)：
參考代碼：
復(fù)制代碼 代碼如下:
var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
注意一下上面例子中的關(guān)鍵字this的使用。由于在上面的方法中操作的變量都是類內(nèi)部的變量，因此你需要通過使用關(guān)鍵字this來訪問這些變量，否則你將只能得到一個undefined值。
參考代碼：
復(fù)制代碼 代碼如下:
// 正確
working_method : function(){
alert('First Value : ' + this.variable_one);
},
// 錯誤
broken_method : function(){
alert('Second Value : ' + variable_two);
}
調(diào)用新創(chuàng)建的類中的方法就像訪問那些類的變量一樣。
參考代碼：
復(fù)制代碼 代碼如下:
var run_demo_2 = function(){
// 實例化一個類class_two
var demo_2 = new Class_two();
// 調(diào)用function_one
demo_2.function_one();
// 調(diào)用function_two
demo_2.function_two();
}
initialize方法
類對象中的initialize選項可以讓你來對類進(jìn)行一些初始化操作，也可以讓你來處理一些可供用戶設(shè)置的選項和變量。（Fdream注：實際上這個就相當(dāng)于類的初始化方法。）你可以像定義方法一樣來定義它：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
// 定義一個包含一個參數(shù)的初始化方法
initialize : function(user_input){
// 創(chuàng)建一個屬于這個類的變量
// 并給它賦值
// 值為用戶傳進(jìn)來的值
this.value = user_input;
}
})
你也可以通過這個初始化來改變其他的選項或者行為：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "Everything this message says is true";
}
else {
this.message = "Everything this message says is false";
}
}
})
// 這將設(shè)置myClass實例的message屬性為下面的字符串
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// 這將設(shè)置myClass實例的message屬性為下面的字符串
// "Everything this message says is false"
var myclass_instance = new Myclass(false);
所有的這一切工作都不需要聲明任何其他變量或者方法。只需要記住每個鍵值對后面的逗號就行了。真的是非常容易漏掉一個逗號，然后花費大量的時間來追蹤這些不存在的漏洞。
參考代碼：
復(fù)制代碼 代碼如下:
var Class_three = new Class({
// 當(dāng)類創(chuàng)建的時候就會執(zhí)行這個類
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two;
if (true_false_option){
this.boolean_option = "True Selected";
}
else {
this.boolean_option = "False Selected";
}
},
// 定義一些方法
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
var run_demo_3 = function(){
var demo_3 = new Class_three("First Argument", "Second Argument");
demo_3.function_one();
demo_3.function_two();
}
實現(xiàn)選項功能
當(dāng)創(chuàng)建類的時候，給類中的一些變量設(shè)置一些默認(rèn)值會非常有用，如果用戶沒有提供初始輸入的話。你可以手動地在初始化方法中設(shè)置這些變量，檢查每一個輸入來看用戶是不是提供了相應(yīng)的值，然后替換相應(yīng)的默認(rèn)值?；蛘?，你也可以使用MooTools中Class.extras提供的Options類來實現(xiàn)。
給你的類增加一個選項功能非常簡單，就像給類添加一個其他的鍵值對一樣：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options
})
首先不要太著急實現(xiàn)選項的細(xì)節(jié)問題，我們會在后面的教程中更深入的學(xué)習(xí)?，F(xiàn)在，我們已經(jīng)擁有一個有選項功能的類了，我們還需要做的就是定義一些默認(rèn)的選項。和其他的所有東西一樣，只需要添加一些需要初始化的鍵值對就可以了。與定義單個值不一樣的是，你需要像下面這樣定義一組鍵值對集合：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "Second Option"
}
})
現(xiàn)在我們就有了這些默認(rèn)的集合，我們還需要提供一個方式來供用戶在初始化這個類的時候覆蓋這些默認(rèn)值。你所要做的工作就是在你的初始化函數(shù)中增加一行新的代碼，而Options類會完成其余的工作：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
this.setOptions(options);
}
})
一旦這個完成以后，你就可以通過傳遞一組鍵值對來覆蓋任何默認(rèn)選項：
參考代碼：
復(fù)制代碼 代碼如下:
// 覆蓋所有的默認(rèn)選項
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
// 覆蓋其中的一個默認(rèn)選項
var class_instance = new Myclass({
options_two : "Override Second Option"
})
注意一下初始化函數(shù)中的setOptions方法。這是Options類中提供的一個方法，可以讓你在實例化一個類的時候設(shè)置選項。
參考代碼：
復(fù)制代碼 代碼如下:
var class_instance = new Myclass();
// 設(shè)置第一個選項
class_instance.setOptions({options_one : "Override First Option"});
一旦設(shè)置了選項，你就可以通過變量options來訪問它們。
參考代碼：
復(fù)制代碼 代碼如下:
var class_instance = new Myclass();
// 取得第一個選項的值
var class_option = class_instance.options.options_one;
// 變量class_option現(xiàn)在的值就為"First Default Option"了
如果你想在類的內(nèi)部訪問這個選項，請使用this語句：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
// 注意我們使用this關(guān)鍵字來
// 引用這個類
alert(this.option_two);
}
});
var class_instance = new Myclass();
// 將彈出一個對話框，顯示"Second Default Option"
class_instance.test();
把這些東西組合成一個類，看起來就是這樣的：
參考代碼：
復(fù)制代碼 代碼如下:
var Class_four = new Class({
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
var run_demo_4 = function ){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
// 創(chuàng)建一個類class_four的實例
// 并指定一個名叫new_option的新選項
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}
代碼及示例
熟悉PHP的人可能認(rèn)識下面示例中的show_options方法中的print_r()函數(shù)：
參考代碼：
復(fù)制代碼 代碼如下:
show_options : function(){
alert(print_r(this.options, true));
}
這不是一個javascript的原生方法，只不過是從PHP2JS項目中Kevin van Zonneveld的一小段代碼而已。對于那些不熟悉PHP的人，這個print_r()方法就給你了一個數(shù)組中鍵值對格式化后的字符串。在調(diào)試腳本的過程中，這是一個極其有用的debug工具，這個函數(shù)在后面提供的下載包中有詳細(xì)的代碼，我強烈推薦使用它來測試和研究。
參考代碼：
復(fù)制代碼 代碼如下:
var Class_five = new Class({
// 我們使用了選項
Implements: Options,
// 設(shè)置我們的默認(rèn)選項
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
// 設(shè)置我們的初始化函數(shù)
// 通過setOptions方法來設(shè)置選項
initialize : function(options){
this.setOptions(options);
},
// 用來打印選項數(shù)組信息的方法
show_options : function(){
alert(print_r(this.options, true));
},
// 通過setOptions方法來交換兩個選項的值
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
});
function demo_7(){
var demo_7 = new Class_five();
demo_7.show_options();
demo_7.setOptions({option_one : "New Value"});
demo_7.swap_options();
demo_7.show_options();
}
更多學(xué)習(xí)
相關(guān)文章
今天繼續(xù)我們的Mootools 1.2教程的第23課，我們今天來講一下Fx插件中的Fx.Slide。通過該插件，可以讓你把內(nèi)容以滑動的方式顯示出來。它使用起來非常簡單，是你UI工具箱中一個很好的工具。2009-09-09
Mootools 圖片展示插件(lightbox,ImageMenu)收集集合
Mootools圖片展示插件(lightbox,ImageMenu)收集，學(xué)習(xí)mootools的朋友可以參考，非常不錯的效果。2010-05-05
有人最近要求我們寫一個關(guān)于MooTools 1.2的30天的教程，這似乎也是個很不錯的主意，于是我們決定現(xiàn)在就開始。在這些教程中，我們假設(shè)用戶沒有任何MooTools或者是JavaScript經(jīng)驗，但是至少有基本的HTML和CSS知識。2009-09-09
Mootools 1.2教程 輸入過濾第一部分（數(shù)字）
今天我們來看看MooTools是怎樣使得過濾用戶輸入變得非常輕松。我們今天將講一些基本的數(shù)字過濾，明天再更深入地講講字符串過濾。2009-09-09
分享一個用Mootools寫的鼠標(biāo)滑過進(jìn)度條改變進(jìn)度值的實現(xiàn)代碼
分享一個用Mootools寫的鼠標(biāo)滑過進(jìn)度條改變進(jìn)度值的實現(xiàn)代碼，需要的朋友可以參考下。2011-12-12
一些mootools的學(xué)習(xí)資源，學(xué)習(xí)mootools的朋友可以參考下。2010-02-02
使用Mootools動態(tài)添加Css樣式表代碼,兼容各瀏覽器
這個函數(shù)很有用處,尤其是當(dāng)我們在使用Mootools開發(fā)插件的時候,例如Tips等,當(dāng)我們需要額外的Css來支撐插件內(nèi)的效果時,通常我們的做法是把Css放到單獨的css文件里調(diào)用2011-12-12
今天我們開始第三講，我們今天主要看一下Fx.Tween。2009-09-09
今天我們將先簡要地看一下正則表達(dá)式，然后再看一下MooTools提供的一些讓正則表達(dá)式更容易使用的功能。2009-09-09
今天開始本系列教程的第2講。在這一講中，我們會學(xué)習(xí)幾種選擇HTML元素的方法。在許多方面，這是MooTools用得最多最基本的。畢竟，要創(chuàng)建一個基于HTML元素的交互性用戶體驗，你必須首先把它們掌握在手中。2009-09-09