MooTools教程(4):函數和MooTools

今天開始MooTools系列教程的第4講。若是你尚未看過上一講，請先查看上一篇教程<《Mootools 1.2教程(3)——數組使用簡介》。今天咱們先不講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();
});

單個參數

雖然你有不少代碼能夠輕鬆地隨時調用，這已經頗有用了，可是若是你能夠給它傳遞參數（信息）進行處理，這將會更有用。要在函數中使用參數，你須要在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');
});

多個參數

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);
});

返回值

在一個彈出對話框中顯示一個函數的執行結果可能頗有用，可是有些時候你可能須要在其餘地方用到這個結果。要完成這個任務，你須要使用函數中的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);
});

把函數做爲參數

若是你看看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);
});

延伸學習...

下載包含你學習所須要的全部東西的zip包

包含MooTools 1.2核心庫、一個外部JavaScript文件、一個簡單的html頁面和一個css文件。

更多關於JavaScript函數的內容

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

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

有關示例的文檔

• Utilities/DomReady
• Number.toInt()
• Number.limit()
• Array.rgbToHex()
• Element.setStyle()
• Element.addEvent()