|
|
變量
在前面一系列的課程中，我們已經(jīng)學(xué)習(xí)過了Hash對(duì)象中鍵值對(duì)（key/value pair）的使用方式，因此，下面的這個(gè)例子中創(chuàng)建了一個(gè)類，它只包含了一些變量，你看起來可能會(huì)覺得非常的熟悉：
參考代碼：
復(fù)制代碼 代碼如下:
// 創(chuàng)建一個(gè)名為class_one的類
// 包含兩個(gè)內(nèi)部變量
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
類似地，你可以通過類似訪問hash中的變量的方式來訪問其中的變量，注意一下，在下面的代碼中，我們創(chuàng)建了一個(gè)我們?cè)谏厦娑x的Class_one類的實(shí)例。
參考代碼：
復(fù)制代碼 代碼如下:
var run_demo_one = function(){
// 創(chuàng)建類Class_one的一個(gè)實(shí)例，名稱為demo_1
var demo_1 = new Class_one();
// 顯示demo_1中的變量
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
方法/函數(shù)
方法是指一個(gè)指定的類中的函數(shù)（通俗地說就是一個(gè)類中的函數(shù)就叫做方法，換了個(gè)叫法而已）。這些方法必須通過這個(gè)類的實(shí)例來調(diào)用，而類本身不能調(diào)用它們。你可以像定義一個(gè)變量來定義一個(gè)方法，不同的是你需要給它指定一個(gè)靜態(tài)的值，給它指定一個(gè)匿名函數(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來訪問這些變量，否則你將只能得到一個(gè)undefined值。
參考代碼：
復(fù)制代碼 代碼如下:
// 正確
working_method : function(){
alert('First Value : ' + this.variable_one);
},
// 錯(cuò)誤
broken_method : function(){
alert('Second Value : ' + variable_two);
}
調(diào)用新創(chuàng)建的類中的方法就像訪問那些類的變量一樣。
參考代碼：
復(fù)制代碼 代碼如下:
var run_demo_2 = function(){
// 實(shí)例化一個(gè)類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方法
類對(duì)象中的initialize選項(xiàng)可以讓你來對(duì)類進(jìn)行一些初始化操作，也可以讓你來處理一些可供用戶設(shè)置的選項(xiàng)和變量。（Fdream注：實(shí)際上這個(gè)就相當(dāng)于類的初始化方法。）你可以像定義方法一樣來定義它：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
// 定義一個(gè)包含一個(gè)參數(shù)的初始化方法
initialize : function(user_input){
// 創(chuàng)建一個(gè)屬于這個(gè)類的變量
// 并給它賦值
// 值為用戶傳進(jìn)來的值
this.value = user_input;
}
})
你也可以通過這個(gè)初始化來改變其他的選項(xiàng)或者行為：
參考代碼：
復(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實(shí)例的message屬性為下面的字符串
// "Everything this message says is true"
var myclass_instance = new Myclass(true);
// 這將設(shè)置myClass實(shí)例的message屬性為下面的字符串
// "Everything this message says is false"
var myclass_instance = new Myclass(false);
所有的這一切工作都不需要聲明任何其他變量或者方法。只需要記住每個(gè)鍵值對(duì)后面的逗號(hào)就行了。真的是非常容易漏掉一個(gè)逗號(hào)，然后花費(fèi)大量的時(shí)間來追蹤這些不存在的漏洞。
參考代碼：
復(fù)制代碼 代碼如下:
var Class_three = new Class({
// 當(dāng)類創(chuàng)建的時(shí)候就會(huì)執(zhí)行這個(gè)類
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();
}
實(shí)現(xiàn)選項(xiàng)功能
當(dāng)創(chuàng)建類的時(shí)候，給類中的一些變量設(shè)置一些默認(rèn)值會(huì)非常有用，如果用戶沒有提供初始輸入的話。你可以手動(dòng)地在初始化方法中設(shè)置這些變量，檢查每一個(gè)輸入來看用戶是不是提供了相應(yīng)的值，然后替換相應(yīng)的默認(rèn)值。或者，你也可以使用MooTools中Class.extras提供的Options類來實(shí)現(xiàn)。
給你的類增加一個(gè)選項(xiàng)功能非常簡(jiǎn)單，就像給類添加一個(gè)其他的鍵值對(duì)一樣：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options
})
首先不要太著急實(shí)現(xiàn)選項(xiàng)的細(xì)節(jié)問題，我們會(huì)在后面的教程中更深入的學(xué)習(xí)。現(xiàn)在，我們已經(jīng)擁有一個(gè)有選項(xiàng)功能的類了，我們還需要做的就是定義一些默認(rèn)的選項(xiàng)。和其他的所有東西一樣，只需要添加一些需要初始化的鍵值對(duì)就可以了。與定義單個(gè)值不一樣的是，你需要像下面這樣定義一組鍵值對(duì)集合：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "Second Option"
}
})
現(xiàn)在我們就有了這些默認(rèn)的集合，我們還需要提供一個(gè)方式來供用戶在初始化這個(gè)類的時(shí)候覆蓋這些默認(rèn)值。你所要做的工作就是在你的初始化函數(shù)中增加一行新的代碼，而Options類會(huì)完成其余的工作：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
this.setOptions(options);
}
})
一旦這個(gè)完成以后，你就可以通過傳遞一組鍵值對(duì)來覆蓋任何默認(rèn)選項(xiàng)：
參考代碼：
復(fù)制代碼 代碼如下:
// 覆蓋所有的默認(rèn)選項(xiàng)
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
// 覆蓋其中的一個(gè)默認(rèn)選項(xiàng)
var class_instance = new Myclass({
options_two : "Override Second Option"
})
注意一下初始化函數(shù)中的setOptions方法。這是Options類中提供的一個(gè)方法，可以讓你在實(shí)例化一個(gè)類的時(shí)候設(shè)置選項(xiàng)。
參考代碼：
復(fù)制代碼 代碼如下:
var class_instance = new Myclass();
// 設(shè)置第一個(gè)選項(xiàng)
class_instance.setOptions({options_one : "Override First Option"});
一旦設(shè)置了選項(xiàng)，你就可以通過變量options來訪問它們。
參考代碼：
復(fù)制代碼 代碼如下:
var class_instance = new Myclass();
// 取得第一個(gè)選項(xiàng)的值
var class_option = class_instance.options.options_one;
// 變量class_option現(xiàn)在的值就為"First Default Option"了
如果你想在類的內(nèi)部訪問這個(gè)選項(xiàng)，請(qǐng)使用this語句：
參考代碼：
復(fù)制代碼 代碼如下:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
// 注意我們使用this關(guān)鍵字來
// 引用這個(gè)類
alert(this.option_two);
}
});
var class_instance = new Myclass();
// 將彈出一個(gè)對(duì)話框，顯示"Second Default Option"
class_instance.test();
把這些東西組合成一個(gè)類，看起來就是這樣的：
參考代碼：
復(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)建一個(gè)類class_four的實(shí)例
// 并指定一個(gè)名叫new_option的新選項(xiàng)
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)識(shí)下面示例中的show_options方法中的print_r()函數(shù)：
參考代碼： 復(fù)制代碼 代碼如下:
show_options : function(){
alert(print_r(this.options, true));
}
這不是一個(gè)Javascript的原生方法，只不過是從php2JS項(xiàng)目中Kevin van Zonneveld的一小段代碼而已。對(duì)于那些不熟悉php的人，這個(gè)print_r()方法就給你了一個(gè)數(shù)組中鍵值對(duì)格式化后的字符串。在調(diào)試腳本的過程中，這是一個(gè)極其有用的debug工具，這個(gè)函數(shù)在后面提供的下載包中有詳細(xì)的代碼，我強(qiáng)烈推薦使用它來測(cè)試和研究。
參考代碼：復(fù)制代碼 代碼如下:
var Class_five = new Class({
// 我們使用了選項(xiàng)
Implements: Options,
// 設(shè)置我們的默認(rèn)選項(xiàng)
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
// 設(shè)置我們的初始化函數(shù)
// 通過setOptions方法來設(shè)置選項(xiàng)
initialize : function(options){
this.setOptions(options);
},
// 用來打印選項(xiàng)數(shù)組信息的方法
show_options : function(){
alert(print_r(this.options, true));
},
// 通過setOptions方法來交換兩個(gè)選項(xiàng)的值
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í)
下載一個(gè)包含你開始所需要的所有東西的zip包
- MooTools Class文檔MooTools Class.extra文檔print_r()參考
JavaScript技術(shù)：Mootools 1.2教程 類(一)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
