|
|
變量
在前面一系列的課程中，我們已經(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選項可以讓你來對類進行一些初始化操作，也可以讓你來處理一些可供用戶設(shè)置的選項和變量。（Fdream注：實際上這個就相當(dāng)于類的初始化方法。）你可以像定義方法一樣來定義它：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
// 定義一個包含一個參數(shù)的初始化方法
initialize : function(user_input){
// 創(chuàng)建一個屬于這個類的變量
// 并給它賦值
// 值為用戶傳進來的值
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í)
下載一個包含你開始所需要的所有東西的zip包
- MooTools Class文檔MooTools Class.extra文檔print_r()參考
JavaScript技術(shù)：Mootools 1.2教程 類(一)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
