Menu

30天學會 MooTools 教學(4): 函數和MooTools

今天開始MooTools系列教程的第4講。如果你還沒有看過上一講，請先查看上一篇教程《30天學會 MooTools 教學(3): 數組管理DOM元素》。今天我們先不講MooTools，而是講一講JavaScript中的函數（function）的基本知識。

但是，為了符合MooTools這個主題，你需要知道在哪裡該使用MooTools的函數。此前，我們已經在我們的所有示例代碼中，把代碼都放在 domready方法中。當我們需要把它放在domready的外面時，我們使用了函數（function）。在你在domready裡面調用函數之前， 函數並不會被執行。

一般來說，一種比較好的方式是儘可能地把你的函數代碼都放在頁面之外的某一個地方，然後通過JavaScript應用來調用它們。當你只是寫代碼玩玩，可能把所有的東西寫在一個頁面上更容易一些。在這個教程中，我們使用下面的約定：

<script type="text/javascript">
/*
 * 函數定義寫在這裡
 */
 
window.addEvent('domready', function() {
    /*
     * 函數調用寫在這裡
     */
});
</script>

所有的例子都遵循這個格式，當頁面載入的時候（load）執行函數代碼。在每個函數的下面，都有一個相應的按鈕，你可以點擊它們，然後看到結果。這是通過使用MooTools的事件處理來完成的，明天我們將會講到這個。

函數基礎

在JavaScript中，有幾種方式來定義函數，由於我們的主題是講解MooTools，因此我們將選擇MooTools的首選方式。下面的示例是一個函數定義的開始。我們什麼了一個變量，並命名為simple_function，並吧這個變量定義為一個函數：

var simple_function = function(){

然後我們給這個函數增加了一個alert語句，當函數被調用的時候就會執行：

alert('This is a simple function');

最後，我們以一個花括號結束這個函數的定義：

}

這個關閉花括號看起來是一件非常簡單的事情，但是很多時候要追蹤這個問題卻是一件很痛苦的事情。因此，適度地強迫對函數定義的關閉符號進行檢查是個不錯的主意。

在下面的例子中，我們把它們組合起來了。在聲明這個函數之後，我們在頁面加載後的domready事件裡面添加了對這個函數的調用。可以點擊例子下面的按鈕查看調用函數simple_function();後的結果。

// 定義simple_function為一個函數
var simple_function = function(){
    alert('This is a simple function');
}
 
window.addEvent('domready', function() {
    // 當頁面加載後調用simple_function
    simple_function();
});

// -->SCRIPT-->

 

單個參數

雖然你有很多代碼可以輕鬆地隨時調用，這已經很有用了，但是如果你可以給它傳遞參數（信息）進行處理，這將會更有用。要在函數中使用參數，你需要在function後面的括號中添加一個變量，就像這樣：

var name_of_function = function(name_of_the_parameter){
    /* 函數代碼寫在這裡 */
}

一旦你這樣做了，在這個函數內部就可以使用這個變量了。儘管你可以給參數取任何你想要的名字，但是讓參數名更有意義是個不錯的選擇。舉個例子來說， 如果你要傳遞一個小鎮的名字，可能你把參數命名為town_name比其他更模糊的名字要好一些（比如user_input）。

在下面的例子中，我們定義了一個只帶有一個參數的函數，並在彈出對話框中顯示這個變量。請注意，信息的第一部分被單引號包含起來了，而參數沒有。當你要把參數和硬編碼的字符串連接在一起，你需要用加號（+）運算符把他們連接起來，就像下面一樣：

var single_parameter_function = function(parameter){
    alert('the parameter is : ' + parameter);
}
 
window.addEvent('domready', function(){
        single_parameter_function('this is a parameter');
});

// -->SCRIPT-->

 

多個參數

JavaScript沒有限制在一個函數中可以定義的參數的個數。一般來說，要讓傳給函數的參數個數儘可能地少，這會使代碼更具可讀性。函數中定義 的多個參數使用逗號分割，其它行為這和單個參數函數一樣。下面的示例中的函數帶有兩個數字，並把它們的和賦值給第三個數字，就像這樣：

var third_number = first_number + second_number;

這裡加號（+）運算符的使用和把這些結果連接成字符串略有一些不同：

alert(first_number + " plus " + second_number + " equals " + third_number);

雖然這個初一看起來可能有些混亂，但是實際上卻非常簡單。如果你在兩個數字之間使用加號（+），你就是把它們加在一起。如果你在任意組合的數字和字符串之間使用加號（+），那麼就是把所有的東西作為字符串連接起來。

var two_parameter_function = function(first_number, second_number){
    // 取得first_number和second_number相加的和
    var third_number = first_number + second_number;
 
    // 顯示結果
    alert(first_number + " plus " + second_number + " equals " + third_number);
}
 
window.addEvent('domready', function(){
two_parameter_function(10, 5);
});

// -->SCRIPT-->

 

返回值

在一個彈出對話框中顯示一個函數的執行結果可能很有用，但是有些時候你可能需要在其他地方用到這個結果。要完成這個任務，你需要使用函數中的return功能。下面的示例代碼中，函數和上面的示例一樣，不過這裡不是彈出一個對話框，而是返回兩個數字相加後的結果：

return third_number;

你會發現，我們也在domready中做了更多的事情。為了顯示這個結果，我們把這個函數的返回值賦值給了一個名稱為return_value的參數，然後把它顯示在彈出對話框中。

var two_parameter_returning_function = function(first_number, second_number){
    var third_number = first_number + second_number;
    return third_number;
}
window.addEvent('domready', function(){
    var return_value = two_parameter_returning_function(10, 5);
    alert("return value is : " + return_value);
});

// -->SCRIPT-->

 

把函數作為參數

如果你看看MooTools的domready裡面我們包裝的東西，你會注意到我們把一個函數作為參數傳遞進去了：

window.addEvent('domready', function(){
/* 函數代碼 */
});

一個像這樣把函數作為一個參數傳遞進去的函數稱為匿名函數：

function(){
    /* 函數代碼 */
}

在第一篇教程的評論中，Boomstix指出了在domready中不使用匿名函數的一種替代方式。這種方式就是這樣的：

// 建立一個要在domready時調用的函數
var domready_function(){
    /* 函數代碼 */
}
 
// 把函數指定到domready事件
window.addEvent('domready', domready_function);

我不知道這兩種方式在性能和功能性上的任何明顯差別，因此我認為這基本上只是一個風格習慣而已。我們會繼續堅持我們的方式，如果有任何人知道這些差別請告訴我們。

 

代碼示例

為了刺激你明天的食慾（和彌補今天對MooTools的缺少），我寫了一個沒有什麼意義的函數，可以讓你隨意改變這個頁面的背景：

var changeColor = function(){
    // 用來從輸入框中獲得顏色值
    // （請參考：
    // http://docs.mootools.net/Element/Element#Element:get）
    var red   = $('red').get('value');
    var green = $('green').get('value');
    var blue  = $('blue').get('value');
 
    // 確保每一個東西都是整數
    // （請參考：
    // http://docs.mootools.net/Native/Number#Number:toInt）
    red   = red.toInt();
    green = green.toInt();
    blue  = blue.toInt();
 
    // 確保每一個數字都在1到255之間
    // 如果有需要則取整
    // （請參考：
    // http://docs.mootools.net/Native/Number#Number:limit）
    red   = red.limit(1, 255);
    green = green.limit(1, 255);
    blue  = blue.limit(1, 255);
 
    // 取得十六進制代碼
    // （請參考：
    // http://docs.mootools.net/Native/Array/#Array:rgbToHex）
    var color = [red, green, blue].rgbToHex(); 
 
    // 設置為該頁面的背景色
    // （請參考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', color);
 
}
 
var resetColor = function(){
    // 重新設置頁面的背景色為白色
    // （請參考：
    // http://docs.mootools.net/Element/Element.Style#Element:setStyle）
    $('body_wrap').setStyle('background', '#fff');
}
 
window.addEvent('domready', function(){
    // 為按鈕添加點擊事件（明天我們會講這個）
    // （請參考：
    // http://docs.mootools.net/Element/Element.Event#Element:addEvent）
    $('change').addEvent('click', changeColor);
    $('reset').addEvent('click', resetColor);
});

// -->SCRIPT-->

延伸學習...

下載包含你學習所需要的所有東西的zip包
包含MooTools 1.2核心庫、一個外部JavaScript文件、一個簡單的html頁面和一個css文件。

 

更多關於JavaScript函數的內容

JavaScript函數上的Quirksmode（怪異模式）

我沒有很好的關於JavaScript函數的資源，如果有人知道的話請告訴我。

 

有關示例的文檔

 

Mootools 教學列表：